Что нового в ECMAScript 2020

JavaScript

Что нового в ECMAScript 2020

JavaScriptT2 Light_1200x303
JavaScriptT2 Light_1200x303

JavaScript — один из самых популярных языков программирования, и каждый год в него добавляются новые функции. В этой статье описываются новые функции, добавленные в ECMAScript 2020 (он же ES11).

До появления ECMAScript 2015 (он же ES6) JavaScript развивался очень медленно. Но с 2015 года каждый год добавляются новые функции. Обратите внимание, что не все функции поддерживаются современными браузерами, но благодаря компиляторам JavaScriptBabelсуществует, мы уже можем использовать новые функции. В этой статье будут представлены некоторые из последних функций ECMAScript 2020 (ES11).

Необязательная цепочка

Большинство разработчиков сталкивались с этой проблемой:

TypeError: Cannot read property ‘x’ of undefined

Эта ошибка означает, что мы обращаемся к свойству, которое не принадлежит объекту.

получить доступ к свойствам объекта

const flower = {
    colors: {
        red: true
    }
}

console.log(flower.colors.red) // 正常运行

console.log(flower.species.lily) // 抛出错误：TypeError: Cannot read property 'lily' of undefined

В этом случае движок JavaScript выдаст такую ​​ошибку. Но в некоторых случаях не имеет значения, существует ли значение, потому что мы знаем, что оно будет. Итак, дополнительная цепочка пригодится!

Мы можем использовать необязательный оператор цепочки, состоящий из вопросительного знака и точки, чтобы указать, что ошибка не должна возникать. Должен вернуться, если нет значенияundefined.

console.log(flower.species?.lily) // 输出 undefined

Необязательную цепочку также можно использовать при доступе к массивам или вызове функций.

массив доступа

let flowers =  ['lily', 'daisy', 'rose']

console.log(flowers[1]) // 输出：daisy

flowers = null

console.log(flowers[1]) // 抛出错误：TypeError: Cannot read property '1' of null
console.log(flowers?.[1]) // 输出：undefined

Функции вызова

let plantFlowers = () => {
  return 'orchids'
}

console.log(plantFlowers()) // 输出：orchids

plantFlowers = null

console.log(plantFlowers()) // 抛出错误：TypeError: plantFlowers is not a function

console.log(plantFlowers?.()) // 输出：undefined

Нулевое слияние

В настоящее время, чтобы предоставить резервное значение для переменной, логический оператор||Все еще обязательно. Он подходит для многих ситуаций, но не может применяться в некоторых особых сценариях. Например, случай, когда начальное значение является логическим или числовым. Например, мы хотим присвоить переменной число.Когда начальное значение переменной не является числом, оно по умолчанию равно 7:

let number = 1
let myNumber = number || 7

ПеременнаяmyNumberравно 1, так как левая (number)Являетсянастоящийзначение 1. Однако, когда переменнаяnumberА если не 1, а 0?

let number = 0
let myNumber = number || 7

0 этоПодделказначение, так что даже 0 является числом. ПеременнаяmyNumberбудет присвоено значение 7 справа. Но результат не тот, что мы хотим. К счастью, оно состоит из двух вопросительных знаков:??Оператор слияния может проверять переменнуюnumberЭто число без написания дополнительного кода.

let number = 0
let myNumber = number ?? 7

Значение в правой части оператора равно только значению в левой частиnullилиundefinedдопустимо, поэтому переменная в примереmyNumberТеперь значение равно 0.

Частные поля Частные поля

многие имеютclassesЯзык программирования позволяет определять классы как общедоступные, защищенные или частные свойства.PublicДоступ к свойствам можно получить извне класса или из подклассов,protectedСвойства могут быть доступны только подклассам,privateДоступ к свойствам возможен только из класса. JavaScript изES6Синтаксис класса начал поддерживаться, но приватные поля не были введены до сих пор. Чтобы определить частное свойство, ему должен предшествовать знак решетки:#.

class Flower {
  #leaf_color = "green";
  constructor(name) {
    this.name = name;
  }

  get_color() {
    return this.#leaf_color;
  }
}

const orchid = new Flower("orchid");

console.log(orchid.get_color()); // 输出：green
console.log(orchid.#leaf_color) // 报错：SyntaxError: Private field '#leaf_color' must be declared in an enclosing class

Если мы получим доступ к закрытым свойствам класса извне, он обязательно сообщит об ошибке.

Статические поля Статические поля

Если вы хотите использовать методы класса, вы должны сначала создать экземпляр класса следующим образом:

class Flower {
  add_leaves() {
    console.log("Adding leaves");
  }
}

const rose = new Flower();
rose.add_leaves();

Flower.add_leaves() // 抛出错误：TypeError: Flower.add_leaves is not a function

Попытка доступа к неустановленномуFlowerМетод класса выдаст ошибку. Но из-заstaticполя, методы класса могут бытьstaticЗатем объявление ключевого слова вызывается извне.

class Flower {
  constructor(type) {
    this.type = type;
  }
  static create_flower(type) {
    return new Flower(type);
  }
}

const rose = Flower.create_flower("rose"); // 正常运行

Верхний уровень Ожидание Верхний уровень Ожидание

В настоящее время, если вы используетеawaitЧтобы получить результат функции обещания, используйтеawaitфункция должна использоватьasyncОпределения ключевых слов.

const func = async () => {
    const response = await fetch(url)
}

Головная боль в том, что дождаться какого-то результата в глобальном масштабе в принципе невозможно. если не использоватьВыражение немедленно вызываемой функции (IIFE).

(async () => {
    const response = await fetch(url)
})()

но представилТоп ОжидайтеПосле этого нет необходимости оборачивать код в асинхронную функцию, как показано ниже:

const response = await fetch(url)

Эта функция полезна для разрешения зависимостей модуля или когда требуется альтернативный источник, когда исходный источник недоступен.

let Vue
try {
    Vue = await import('url_1_to_vue')
} catch {
    Vue = await import('url_2_to_vue)
}

Метод Promise.allSettled

При ожидании нескольких промисов для возврата результатов мы можем использоватьPromise.all([promise_1, promise_2]). Но проблема в том, что если один из запросов не проходит, выдается ошибка. Однако иногда мы хотим, чтобы результаты других запросов возвращались нормально после сбоя запроса. Ввиду этой ситуацииES11представилPromise.allSettled.

promise_1 = Promise.resolve('hello')
promise_2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'problem'))

Promise.allSettled([promise_1, promise_2])
    .then(([promise_1_result, promise_2_result]) => {
        console.log(promise_1_result) // 输出：{status: 'fulfilled', value: 'hello'}
        console.log(promise_2_result) // 输出：{status: 'rejected', reason: 'problem'}
    })

Успешное обещание вернет обещание, содержащееstatusа такжеvalue, невыполненное обещание вернет объект, содержащийstatusа такжеreasonОбъект.

Динамический импорт

ты можешь бытьwebpackДинамический импорт уже используется в привязках модулей . Но появилась встроенная поддержка этой функции:

// Alert.js
export default {
    show() {
        // 代码
    }
}


// 使用 Alert.js 的文件
import('/components/Alert.js')
    .then(Alert => {
        Alert.show()
    })

Учитывая, что многие приложения используют сборщики модулей, такие как webpack, для транспиляции и оптимизации кода, эта функция сейчас не очень полезна.

Mathall соответствует всем предметам

Если вы хотите найти все строки, соответствуют регулярному выражению и их местам, Chaptall очень полезно.

const regex = /\b(apple)+\b/;
const fruits = "pear, apple, banana, apple, orange, apple";


for (const match of fruits.match(regex)) {
  console.log(match); 
}
// 输出 
// 
// 'apple' 
// 'apple'

Напротив,matchAllВозвращает дополнительную информацию, включая индекс, по которому было найдено совпадение.

for (const match of fruits.matchAll(regex)) {
  console.log(match);
}

// 输出
// 
// [
//   'apple',
//   'apple',
//   index: 6,
//   input: 'pear, apple, banana, apple, orange, apple',
//   groups: undefined
// ],
// [
//   'apple',
//   'apple',
//   index: 21,
//   input: 'pear, apple, banana, apple, orange, apple',
//   groups: undefined
// ],
// [
//   'apple',
//   'apple',
//   index: 36,
//   input: 'pear, apple, banana, apple, orange, apple',
//   groups: undefined
// ]

globalЭтот глобальный объект

JavaScript может работать в разных средах, таких как браузеры или Node.js. Глобальные объекты, доступные в браузере, являются переменными.window, но в Node.js есть функция с именемglobalОбъект. Для того, чтобы использовать единый глобальный объект в разных средах, введеныglobalThis.

// 浏览器
window == globalThis // true

// node.js
global == globalThis // true

BigInt

Наибольшее число, которое можно точно выразить в JavaScript, равно 2^53 - 1. А BigInt можно использовать для создания больших чисел.

const theBiggerNumber = 9007199254740991n
const evenBiggerNumber = BigInt(9007199254740991)

В заключение

Я надеюсь, что эта статья была вам полезна, и я с нетерпением жду новых возможностей JavaScript так же, как и я. Если вы хотите узнать больше, вы можете увидеть комитет tc39Официальный репозиторий Github.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из ИнтернетаНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,

Категории