Краткое описание всех новых функций JavaScript ECMAScript 6

Прошло восемь лет с тех пор, как ECMAScript официально выпустил ES6 в 2015 году. С 2015 года новая версия будет выпускаться каждый год в июне, причем в качестве номера версии будет указываться год.

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

ps: В некоторой информации говорится, что все версии после ES2015 называются ES6, а в некоторых говорится, что ES6 означает ES2015, ES7 означает ES2016 и так далее, что здесь не будет обсуждаться.

ES2015 (ES6)

ES2015 — это версия с наибольшими изменениями. По сути, весь контент до ES2015 был расширен, как показано на следующем рисунке:

Ключевые слова let, const и область действия на уровне блока.

До ES6 существовал только один способ объявления переменных — использование ключевого слова var . В ES2015 для объявления переменных и констант были добавлены ключевые слова let и const

. следует:

// Переменная объявления let v = 100
в = 200
// Объявляем константу const V = 200
// Изменить константы // V = ​​300 // Сообщать об ошибках.

Переменные или константы, объявленные с использованием ключевых слов let и const имеют область действия на уровне блока.

Пример кода выглядит следующим образом:

{
  вар v = 100
}
{
  пусть значение = 200
}
консоль.журнал(в)
console.log(val) // Ошибка val не определена

Стоит отметить, что переменные, объявленные с использованием ключевых слов let или const , не обладают характеристиками продвижения переменных, и существует временная мертвая зона.

Расширение функции

позволяет функциям использовать значения по умолчанию в ES2015. Пример кода выглядит следующим образом:

// До es2015 function foo(v) {.
  v = v : 100
  вернуть v
}
//es2015
функциональная панель (v = 100) {
  вернуть v
}

Стоит отметить, что при наличии нескольких параметров необходимо использовать параметры по умолчанию, начиная с начала .

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

function foo(v) {.
  вернуть v``
}
// Стрелочная функция записывается const foo = (v) => {
  вернуть v
}
// сокращение 1
const foo = v => { // Только один параметр может опускать круглые скобки return v
}
// сокращение 2
const foo = v => v // Вы можете опустить return и фигурные скобки, если в операторе есть только return.

Стоит отметить, что this функции стрелки определяется на основе контекста выполнения и не this внутренней привязки. .

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

Пример кода выглядит следующим образом:

const foo = (...args) => {.
  // console.log(arguments) // ReferenceError: аргументы не определены
  console.log(args) // args — это массив}
foo(1, 2, 3, 4) // [1, 2, 3, 4]

Атрибут name, добавленный к функции в ES2015, указывает на имя функции.

Пример кода выглядит следующим образом:

function foo(v). {
  вернуть v
}
константный бар = v => v
console.log(foo.name) // foo

значения

bar

. Расширение значения в ES2015 в основном добавляет некоторые методы к объектам Math и Number , а также методы двоичного и восьмеричного представления.

В ES2015 0b или 0B используются для представления двоичных чисел, а 0o или 0O используются для представления восьмеричных чисел.

Пример кода выглядит следующим образом:

console.log(0b111111111 === 511) // true
console.log(0o777 === 511) //

Атрибуты и методы, расширенные true для Number, следующие:

Метод расширения Math выглядит следующим образом:

Строковое расширение

ES2015 вводит строки шаблона, определяемые с помощью обратных кавычек (`). Строка шаблона сохранит формат, и можно использовать переменные.

Пример кода выглядит следующим образом:

// Используйте `, чтобы определить строку шаблона, let str = `чашу недель`.
// Строка шаблона может сохранять формат let str2 = `Чаша недель`
// Строка шаблона может использовать переменную const myName = 'Чаша недель'
let str3 = `author: ${myName}` // Использование ${} для оболочки

ES2015 также расширяет некоторые методы для экземпляров String и String, а именно:

Расширение

массива предоставляет оператор расширения в ES2015, то есть..., используемый в массиве для расширения массива. и разделите его запятыми,

пример кода следующим образом:

const arr = [1, 2, 3, 4, 5, 6]
const newArr = [...arr] // Копируем массив console.log(Math.max.call(null, ...arr)) // Используем каждый элемент массива в качестве параметра.

Кроме того, Array и массивы. предоставьте ряд методов, которые будут представлены один за другим:

Array.from() : Создайте объект, подобный массиву, или итерируемый объект как новый массив . Пример кода выглядит следующим образом:

function foo() {.
  return Array.from(arguments) // Преобразуем аргументы в массив}

console.log(foo(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]

Array.of() : создаем новый массив с переменным количеством аргументов Пример кода выглядит следующим образом:

Array.of(1) // [1]
Array.of(true, 1, 'Чаша недель') // [true, 1, 'Чаша недель']

Array.prototype.copyWithin(), неглубоко копирует часть массива в другое место в том же массиве и его возврат не меняет длину исходного массива.

Пример кода выглядит следующим образом:

const arr = [1, 2, 3, 4]

// Начинаем с индекса 2 и копируем содержимое в индекс 0 в конце arr.copyWithin(0, 2) // [ 3, 4, 3, 4 ]

Array.prototype.find() в соответствии с заданной функцией обратного вызова, найдите первый соответствующий элемент и верните неопределенное значение, если не найден . Пример кода выглядит следующим образом:

const arr = [1, 2, 3, 4].
arr.find(item => item === 2) // 2 (указательный элемент),

Array.prototype.findIndex() по заданной функции обратного вызова находим индекс первого совпадающего элемента, возвращаем, если не найден - 1 , пример кода выглядит следующим образом:

const arr = [1, 2, 3, 4]
arr.findIndex(item => item === 2) // 1 (указывает индекс)

Array.prototype.fill() , заполняет массив заданным значением . Пример кода выглядит следующим образом:

const arr = [1, 2]. , 3, 4 ]
// Заполняем индекс 1-3 заданным значением
arr.fill('чаша недель', 1, 3) // [ 1, 'чаша недель', 'чаша недель', 4 ]

Array.prototype.keys() возвращает итерируемый объект, содержимое которого — ключ массива , пример кода выглядит следующим образом:

const arr = [1, true, «Чаша недель»]
константные ключи = arr.keys()
for (const i ключей) {
  console.log(i) // Результаты обхода 0 1 2
}

Array.prototype.values() возвращает итерируемый объект, содержимым которого является значение массива .

Пример кода выглядит следующим образом:

const arr = [1, true, «Чаша Чжоу»]
константные значения = arr.values()
for (const i значений) {
  console.log(i) // Результат обхода 1 true Чаша недель}

Array.prototype.entries() возвращает итерируемый объект, содержимое которого представляет собой массив. Индекс 0 — это элемент исходного массива, а 1 — элемент. исходного массива. Значение позиции,

пример кода выглядит следующим образом:

const arr = [1, true, «Чаша недель»]

константный итератор = arr.entries()
console.log(Array.from(iterator)) // [ [ 0, 1 ], [ 1, true ], [ 2, 'Чаша недель' ] ]

Расширение объекта

в ES2015 позволяет использовать имя атрибута объекта и значение атрибута должно быть согласованным. Вы можете просто написать имя атрибута.

Пример кода выглядит следующим образом:

const myName = 'Чаша недель'.
константный возраст = 18
const person = {myName, age}
console.log(person) // { myName: 'Чаша Чжоу', age: 18 }

Кроме того, при определении объекта разрешено использовать заключенные в [] выражения в качестве имен атрибутов. Пример кода выглядит следующим образом:

const myName = 'Неделя чаши'
константный возраст = 18
константный человек = {
  мое имя,
  ['a' + 'g' + 'e']: возраст,
}
console.log(person) // { myName: 'One Bowl Zhou', age: 18 }

Object.is() : используется для сравнения двух значений, используется для решения NaN ≠= NaN, +0 === - 0 проблема,

пример кода следующий:

console.log(NaN === NaN) // false
console.log(+0 === -0) // правда

console.log(Object.is(NaN, NaN)) // true
console.log(Object.is(+0, -0)) // false

Object.assign() : копирует значения всех перечислимых свойств из одного или нескольких исходных объектов в целевой объект и возвращает целевой объект,

пример Код следующий:

const person = Object.assign({}, { name: 'One Bowl Zhou' }, { age: 18 })
console.log(person) // { name: 'One Bowl Zhou', age: 18 }

• Object.getPrototypeOf() : Получить объект-прототип ;
• Object.setPrototypeOf() : Установить объект-прототип .

Классы

выдвигают концепцию классов в ES2015, и классы доступны на уровне синтаксиса. Пример кода выглядит следующим образом:

class Person {.
  конструктор(возраст) {
    //Атрибут this.myName = 'Чаша недель'
    this.age = возраст
  }
  // Статический метод static print() {
    консоль.log()
  }
  //Доступ get myName() {
    console.log('получатель')
    вернуть «чашу недель»
  }
  установить myName(v) {
    console.log('сеттер' + v)
  }
  setName(v) {
    this.myName = v
  }
}
константный человек = новый человек (18)
person.setName('ywanzhou') // Запуск аксессора-установщика console.log(person.myName) // Запуск аксессора-геттера.

Модульность

предложила в ES2015 спецификацию модульности ESModel, которая является первой официальной спецификацией модуляризации. В спецификации нам разрешено использовать экспорт для экспорта модулей и импорт для представления модулей.

Пример кода выглядит следующим образом:

import a from 'm' // Импортируйте экспорт по умолчанию в модуль m и назовите его a.
import a, { b } from 'm' // Импортируем экспорт по умолчанию в модуль m и отдельно импортируем элемент b
import * as A from 'm' // Импортируйте все элементы в модуле import 'm' // Выполняем модуль m Export const b = 1 // Экспортируем отдельно экспорта по умолчанию b // Экспорт по умолчанию экспорт { b } // Экспорт по требованию экспорт { b как bb } // Переименовываем и экспортируем экспорт { b } из 'm' // Импортируем элемент b в модуль m и экспортируем

назначение деструктуризации.

В ES2015 добавлен новый синтаксис для назначения деструктуризации, который позволяет нам использовать определенные шаблоны в. arrays. Или извлеките указанное значение из объекта.

Пример кода выглядит следующим образом:

// Деструктуризация присвоения массива let [name, age, хобби = 'coding' /* Значение назначения структуры по умолчанию */] = ['A Bowl]. Чжоу, 18]
// Поменяем местами значения двух переменных, пусть a = 1
пусть б = 2
;[а, б] = [б, а]
console.log(a, b) // 2 1

// Присвоение структуры объекта let { name: ObjName /* Деструктуризация присваивания rename*/, sex } = { name: 'Чаша недель', sex: 1 }

// Деструктуризация присвоения параметров функции function bar({ name, age }) {
  вернуть имя + возраст
}
bar({ name: 'Чаша недель', age: 18 }) // Чаша недель 18

Символ

Символ — это новый тип данных в ES2015. Он создается с помощью метода Symbol() и может передавать строку в виде. Параметр Используется для описания символа;

все значения символов, созданные с помощью метода Symbol(), уникальны. Пример кода выглядит следующим образом:

/**.
 * Синтаксис * Символ([описание])
 * * описание -> необязательная информация описания */
//Создаем значение типа Символ const mySymbol = Символ()
console.log(mySymbol) // Символ()

const myName = Символ('Чаша недель')
console.log(typeof myName) // символ Символ

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

Promise

Promise — это асинхронное решение, представленное в ES2015, которое решает проблему ада обратных вызовов.

Объект обещания может быть создан с помощью конструктора Promise() . Каждый объект Promise имеет следующие состояния:

• ожидание: начальное состояние, состояние ни успеха, ни отказа.
• решено: означает, что операция завершилась успешно.
• отклонено: означает, что операция не удалась.

Существует только два типа переключения состояний, а именно:

• pending→resolved
• pending→resolved

. Как только состояние изменится, оно больше не изменится.

В экземпляре Promise есть метод then , позволяющий нам связывать вызовы в экземпляре Promise . then метод также имеет экземпляр Promise ,

как показано на рисунке ниже:

Пример кода выглядит следующим образом:

new Promise((разрешить, отклонить) => {
    console.log('Я журнал в первом обещании')
    решать()
})
    .then(() => {
        console.log('Я первым вхожу в систему')
    })
    .then(() => {
        console.log('Тогда я второй лог, но у меня есть исключение')
        выбросить новую ошибку («Ошибка»)
    })
    .then(() => {
        console.log('Тогда я веду журнал первого обратного вызова в третьем, но я не буду его выполнять, потому что надо мной произошло исключение')
    }, () => {
        console.log('Я веду журнал второго обратного вызова в третьем, затем я его выполнил')
    })
    .then(() => {
        console.log('Тогда я в четвертом журнале, могу нормально работать')
    })

/* Результат выполнения следующий: Я — журнал в первом промисе
Я логинюсь первым, тогда

в

третьем. Тогда я являюсь логом в четвертом.

методы Promise следующие:

• Promise.prototype.then() : требуется не более двух параметров: функция обратного вызова успеха и неудачи
• Promise.all()
• Promise.prototype.catch() : равна второму параметру метода then ;
• Promise.all() : упаковать несколько экземпляров в новый экземпляр, вернуть массив результатов после всех изменений состояния экземпляра (изменить все изменения и затем вернуться).
• Promise.race() : упаковать несколько экземпляров в новый экземпляр, вернуть все состояния экземпляра. Расставить приоритеты. измененный результат (сначала изменить и сначала вернуть)
• Promise.resolve() : преобразовать объект в объект Promise (эквивалентно new Promise(resolve => resolve()) )
• Promise.reject() : преобразовать объект в состояние rejected Объект Promise (эквивалент new Promise((resolve, reject) => reject()) )

Iterator

Iterator — это итератор. Это интерфейс, который обеспечивает единый механизм доступа к различным структурам данных. Другими словами, до тех пор, пока любые данные. структура развертывает интерфейс итерации, ее можно пройти унифицированным способом.

Структура данных, реализующая итерируемый интерфейс, обычно реализует сама себя или наследует атрибут Symbol.iterator и является итерируемым объектом. Свойство Symbol.iterator само по себе является функцией, которая является функцией генерации итератора по умолчанию для текущей структуры данных.

Объект, содержащий метод next() можно назвать итерируемым объектом. Объект next() вернет объект, содержащий два значения,

как показано ниже:

• value : любое значение JavaScript возвращаемое итератором. Может быть опущено, если done true .
• done : логическое значение. Если оно имеет false , это означает, что итерация не остановлена. Если оно имеет true , итератор немедленно останавливается, а значение value можно опустить.

Интерфейс итератора, изначально предоставляемый JavaScript, показан на рисунке ниже:

Теперь реализуем итератор для obj, код следующий:

const obj = {
    [Символ.итератор] () {
        возвращаться {
            следующий () {
                console.log('Итератор выполнен');
                возвращаться {
                    ценить: '',
                    Done: true // Отмечаем, что все закончилось, true означает, что все закончилось}
            }
        }
    }
}

Мы добавили печать в метод next() . Чтобы убедиться, что итератор был выполнен, окончательным результатом работы является то, что

итератор был выполнен.

Генератор

— это решение для асинхронного программирования, представленное в ES2015. Ключевое слово function Используйте звездочку * между именем функции и именем функции и используйте ключевое слово yield внутри функции для определения различных состояний.

Пример кода выглядит следующим образом:

function* testGenerator() {
  // доходность определяет доходность состояния «чаша недель»
  дать «новые функции»
  return 'generator' // Завершить работу генератора, даже если позже появится ключевое слово доходности, оно будет недействительным}
const g = testGenerator() // Возвращаем объект Generator и перемещаем состояние с помощью метода next() g.next()
/* { value: 'Чаша Чжоу', выполнено: false } */

г.следующий()
/* { value: 'это новые функции', Done: false } */

г.следующий()
/* { value: 'generator', Done: True } */

Proxy и Reffect

Proxy используются для создания прокси-объекта для реализации перехвата и настройки основных операций, как показано в следующей таблице:

Vue3 написан на основе Proxy . Следующий код показывает использование объектов Proxy :

<!DOCTYPE html>.
<html lang="ru">
<голова>
  <мета-кодировка="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, Initial-scale=1.0" />
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
  <title>Автоматически обновлять dom через set</title>
</голова>

<тело>
  <p class="card" style="ширина: 300 пикселей; поле: 100 пикселей авто">
    <p class="card-body">
      <h1 id="имя"></h1>
      <button id="btn" class="btn btn-primary">Изменить</button>
    </p>
  </p>
  <скрипт>
    // Получаем узел DOM const name = document.getElementById('name')
    const btn = document.getElementById('btn')
    //Определяем функцию, которая изменяет значение const updateDOM = (el, value) => {
      el.innerHTML = значение
    }
    const person = новый прокси({
      название: 'Тарелка каши',
    }, {
      set(цель, propKey, значение) {
        //Если значение внутри изменится, вызовем наш updateDOM
        updateDOM(имя, значение)
        цель [propKey] = значение
        вернуть истину
      },
    })
    name.innerHTML = person.name
    // Нажмите кнопку, чтобы запустить операцию изменения btn.addEventListener('click', () => {
      person.name === 'Чаша Чжоу'?
        (person.name = 'Часка каши') :
        (person.name = 'Одна чаша Чжоу')
    })
  </скрипт>
</тело>
</html>

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

Reflect — это объект, предоставляемый ECMAScript2015. Он предоставляет некоторые статические методы для перехвата операций JavaScript. Эти методы соответствуют методам handlers в Proxy.

Reflect не является конструктором, а это означает, что его экземпляр не может быть создан.

Каждая операция перехвата в объекте Proxy (например: get , delete и т. д.) соответствующим образом вызывает внутренний метод Reflect . Статические методы, которые он предоставляет, соответствуют именам методов в handlers в Proxy,

а именно:

Set, Map, WeakSet, WeakMap

Set , Map , WeakSet и WeakMap — это несколько новых объектов в ES2015:

• Set и WeakSet аналогичны массивам. Разница между ними заключается в том, что Set может хранить данные любого типа, а WeakSet может хранить только ссылки на объекты, и это

наиболее распространенный вариант использования

Набор объектов в реальной разработке предназначен для реализации дедупликации данных. Пример кода выглядит следующим образом:

const arr = [1, 2, 2, 3, 4, 3, 5].
const set = новый набор (arr)
// Объект set можно использовать... для раскрытия всех элементов console.log([...set]) // [ 1, 2, 3, 4, 5 ]

• Map и WeakMap аналогичны объектам и хранятся в форма пар ключ-значение Да, разница между ними в том, что пары ключ-значение Map могут быть произвольными, тогда как ключи WeakMap должны быть ссылками на объекты, а значения могут быть любого типа.

ES2016 (ES7)

ES2016 выпускает относительно мало новых функций, в основном две новые функции, как показано на рисунке ниже:

Оператор экспоненты

ES2016 имеет новый экспоненту ** , также называемый оператором степени, который имеет ту же функцию, что и Math.pow().

Пример кода выглядит следующим образом:

console.log(2 ** 10 === Math.pow. (2, 10 )) // true

Метод Array.prototype.includes()

добавляет метод includes() к прототипу массива в ES2016. Этот метод используется для определения того, содержит ли массив указанное значение, и возвращает логическое значение

. пример кода выглядит следующим образом:

const arr = [1, 2, 3, 4, 5, NaN]
console.log(arr.indexOf(NaN)) // -1
console.log(arr.includes(NaN)) // true

Стоит отметить, что NaN и NaN , +0 и -0 равны при использовании includes() .

ES2017(ES8)

синтаксического сахара async/await

Promise решает проблему ада обратных вызовов, если цепочек вызовов слишком много, читаемость все равно станет хуже. Новый синтаксический сахар async/await в ES2017 решает эту проблему.

Промис записывается следующим образом:

;(function () {
  функция обещание(v) {
    вернуть новое обещание((разрешить, отклонить) => {
      решить(в)
    })
  }
  константа р = обещание (1)
  p.then(res => {
    возврат обещания (рез)
  }).then(res => {
    консоль.log(рез)
  })
})()

Если следующий промис зависит от предыдущего, эта цепочка вызовов будет очень длинной. Теперь перепишем ее, используя синтаксический сахар async/await:

;(async function () {.
  функция обещание(v) {
    вернуть новое обещание((разрешить, отклонить) => {
      решить(в)
    })
  }
  const r1 = ожидание обещания (1)
  const r2 = ожидание обещания (r1)
  const res = ожидание обещания (r2)
  консоль.log(рез)
})()

Как видите, мы можем использовать синтаксический сахар async/await, чтобы переписать Promise в простой метод записи.

Объект Atomics

ES2017 добавляет новый объект Atomics. Этот объект предоставляет ряд статических методов для работы с объектами SharedArrayBuffer и ArrayBuffer. Этот объект не может быть создан с использованием ключевого слова new . Он предоставляет только некоторые статические свойства и

расширения объекта

. расширен для Object в ES2017 следующим образом:

• Object.values() : возвращает массив всех перечислимых значений свойств данного объекта;
• Object.entries() : возвращает массив всех перечислимых значений свойств данного объекта; сам объект. Массив пар ключ-значение для перечисляемых свойств;
• Object.getOwnPropertyDescriptors() : возвращает дескрипторы свойств всех собственных свойств данного объекта.

Расширение функций

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

Пример кода выглядит следующим образом:

функция fun(
  ааааа,
  ббббб,
  cccccc,
) {}

Если есть запятая в конце, вам нужно добавить только строку в конце, если ее нет, вам нужно добавить запятую в конце, а затем добавить строку; Это меняет две строки в управлении версиями, а не одну.

Расширение String

добавляет два новых метода экземпляра для строк в ES2017:

• padStart() : заполняет пробелы в начале строки;
• padEnd() : заполняет пробелы в конце строки,

пример кода выглядит следующим образом:

const str; = 'Чаша Чжоу'
console.log(str.padStart(10)) /* Чаша Чжоу*/
console.log(str.padEnd(10)) /* Ивань Чжоу*/

ES2018(ES9)

для асинхронной итерации

появился новый оператор for await...of , который можно использовать для обхода асинхронных итерируемых объектов.

Пример кода выглядит следующим образом:

var asyncIterable = {.
  [Symbol.asyncIterator]() {
    возвращаться {
      я: 0,
      следующий() {
        если (this.i <3) {
          return Promise.resolve({ value: this.i++, Done: false })
        }

        return Promise.resolve({сделано: true})
      },
    }
  },
}
;(асинхронная функция () {
  для ожидания (количество asyncIterable) {
    консоль.log(число)
  }
})()

// 0
// 1
// 2

Расширения регулярных выражений

В ES2018 к регулярным выражениям добавлены следующие расширения:

Именование групп регулярных выражений:

до ES2018 мы не могли именовать группы в регулярных выражениях. Эта функция была введена в ES2018. Она не только облегчает регулярное чтение и. пример

кода выглядит следующим образом:

const RE_DATE = /(?<год>d{4})-(?<месяц>d{2})-(?<день>d {2})/

const matchObj = RE_DATE.exec('22 февраля 2022 г.')
const год = matchObj.groups.year // 2022 год
const месяц = ​​matchObj.groups.month // 02
const day = matchObj.groups.day // 22-

секундный модификатор/режим dotALLl: новый модификатор s позволяет использовать . Соответствует любому отдельному символу, а атрибут **** указывает, следует ли использовать модификацию " s " вместе в символе регулярного выражения. .

Обратные утверждения: до ES2018 существовали только прямые утверждения, а в ES2018 были добавлены обратные утверждения и обратные отрицательные утверждения .

Оператор расширения объекта

В ES2015 был добавлен новый оператор расширения массива. В ES2018 эта функция была добавлена ​​к объекту. Пример кода выглядит следующим образом:

const n = { name: 'One Bowl of Zhou' }.
const a = {возраст: 18}
const person = { ...n, ...a }
// Объединяем объект console.log(person) // { name: 'Чаша Чжоу', возраст: 18 }

Promise.prototype.finally()

Метод finally() вернет объект Promise When, состояние обещания. изменяется, будет ли оно rejected или fulfilled , будет выполнен обратный вызов finally() .

Пример кода выглядит следующим образом:

fetch(url)
  .then(res => {
    консоль.log(рез)
  })
  .catch(ошибка => {
    console.log(ошибка)
  })
  .finally(() => {
    console.log('конец')
  })

ES2019(ES10)

Оптимизация

оптимизировала следующие два содержимого в ES2019:

(

• catch try...catch возвращаемое
• Function.prototype.toString() функции содержит комментарии и пробелы;

{
  console.log('Чаша недель')
} ловить {
  console.error('Чаша недель')
}

TrimStart()/trimLeft() и tripEnd()/trimRight()

• String.prototype.trimStart : используется для удаления пробелов в левой части строки;
• String.prototype.trimLeft : это псевдоним trimStart
• String.prototype.trimEnd : используется. Удалите пробелы в правой части строки;
• String.prototype.trimRight : trimEnd

расширение массива псевдонимов

. В ES2019 расширены два метода массива, а именно:

• Array.prototype.flat() : Это метод будет следовать указанному. Глубоко рекурсивно пройти по массиву, объединить все элементы с элементами пройденного подмассива в новый массив и вернуть его, проще говоря, для достижения выравнивания массива.

const arr = [0, 1, 2, [3, 4]]
console.log(arr.flat()) // [ 0, 1, 2, 3, 4 ]

• Array.prototype.flatMap() : этот метод отображает и выравнивает массив и возвращает новый массив (может быть только один уровень массива). быть расширен).

Object.fromEntries()

Новый метод Object.fromEntries() в ES2019 преобразует список пар ключ-значение в объект. Это операция, обратная методу Object.entries() .

Пример кода выглядит следующим образом:

const person. = {
  название: «Чаша Чжоу»,
  возраст: '18',
}
const e = Object.entries(человек)

const p = Object.fromEntries(e)
console.log(p) // { name: 'Чаша недель', age: '18' }

Symbol.prototype.descrption

description — это свойство, доступное только для чтения, которое возвращает необязательную строку описания при создании объекта символа.

ES2020(ES11)

Модульизация

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

import('/modules/my-module.js'). тогда(модуль => {
  // Сделайте что-нибудь с модулем.
})

Динамический импорт использует метод import() , который возвращает обещание.

В ES2020 в import также добавляется meta , который предоставляет объект контекстно-зависимых атрибутов метаданных модулю JavaScript.

типа данных BigInt

BigInt решает проблему, заключающуюся в том, что максимальное число, разрешенное в JavaScript, равно 2**53-1 . BigInt может представлять любое большое целое число.

const theBiggestInt = 9007199254740991n;
const такжеHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n
const HugeString = BigInt("9007199254740991");
// ↪ 9007199254740991n
const HugeHex = BigInt("0x1ffffffffffff");
// ↪ 9007199254740991n
const HugeBin = BigInt("0b111111111111111111111111111111111111111111111111111111");
// ↪ 9007199254740991n

globalThis Объект

globalThis был введен в ES2020, который представляет собой введение глобальных объектов в Node Global , а среда браузера — Window . Следующий код показывает разницу между наличием GlobalThis :

// before

вар getGlobal = функция () { 
  если (typeof self !== 'неопределено') { return self } 
  if (typeof window !== 'undefined') { return window } 
  if (typeof global !== 'undefined') { return global } 
  throw new Error('невозможно найти глобальный объект'); 
}; 

вар globals = getGlobal(); 

if (typeof globals.setTimeout !== 'функция') { 
  // в этой среде нет setTimeout! 
}

// после if (typeof globalThis.setTimeout !== 'function') {
  // в этой среде нет setTimeout!
}

Оператор объединения нулевых значений

Оператор объединения нулевых значений представлен двумя вопросительными знаками. Этот оператор также является логическим оператором, аналогичным логическому оператору ИЛИ. Правило расчета таково: пока левый операнд имеет значение null или undefined , возвращается правый операнд, в противном случае возвращается левый операнд. Логический оператор ИЛИ возвращает правый операнд только в том случае, если левый операнд преобразован в boolean тип и имеет false .

Пример кода выглядит следующим образом:

console.log(null ?? 10) // 10
console.log(не определено ?? 10) // 10

Console.log

(

false?

Код выглядит следующим образом:

var Значение

// Если значение значения не является нулевым или неопределенным, назначьте его значение 10
значение = значение ?? 10
Console.log (значение) // 10it

стоит отметить, что оператор NULL Coalescing и логично и логично или не может использоваться в то же время, в противном случае будет выброшено () .

Необязательный оператор цепочки.

Опциональный оператор цепочки используется для чтения значения атрибута глубоко в цепочке объекта. Aab Aab , нам сначала необходимо убедиться, Aa A .

Использование дополнительного оператора цепочки не вызовет такую ​​проблему undefind

var a = {}

(

(

aa?

// Если существует метод obj.fun (), он будет вызван непосредственно.
obj.fun?.a ()

Special.allsettled ()

Метод Promise.allSettled() возвращает обещание после того, как все данные обещания были разрешены или отклонены, с массивом объектов, каждый объект, представляющий соответствующий результат.

ES2021 (ES12)

String.prototype.Replaceall ()

Метод replaceAll() возвращает новую строку

.
const newstr = str.replaceall («каша», «неделя»)

(

Newstr) // Чаша

_

разделителей.

(

WeakRef

) // Символ 100000000

предназначен

только для простоты чтения.

Ссылка на другой объект.

Обещание

Promise.any() promise.all() Promise.any() (То есть все обещания не выполняются/отклоняют), возвращаются неудачное обещание и экземпляр типа агрегирования.

Операторы логического назначения

Некоторые новые операторы назначения были добавлены в ES2021, следующим образом:

• &&=
• ||=
• ??=

Фактически

, это соответствует обычным операторам назначения.

] = [true, false]
f1 && = 'чаша недель' // эквивалентно str = str && 'миска недель'
f2 || = 'чаша недель' // эквивалентно STR = Str || 'Чаша недель'

??

= 'чаша недель' // эквивалент STR = Str?

Расширение класса

членов

класса , не определяя их в constructor в ES2022.

  myname = 'миска Чжоу'
}
/* Оба последовательны*/
класс C {
  конструктор() {
    myname = 'миска Чжоу'
  }
}

Если член объявлен без инициализации, его значение по умолчанию не определен.

использовать

,

называемые # в качестве частных членов класса.

  #myname = 'One Bowl Week'
}
const c = новый c ()
Console.log (#myname) // Приватное поле «#myname» должна быть объявлена ​​в классе, который ожидает

, используется на верхнем уровне

await Верхний уровень без использования async функции

.
Awaitasyncfun ()
console.log (123)

object.hasown (

)

Метод Object.hasOwn() .

  Название: «Чаша Чжоу»,
  возраст: 18,
}
console.log (object.hashown (человек, «имя»)) // true
console.log (object.hashown (человек, «sex»)) // false

array.prototype.at ()

Новый метод at() в ES2022 его функция состоит в том, чтобы получить член массива, а его параметры - индекс

из

массива.

6]
Console.log (arr.at (-1)) // 6
// эквивалентно ARR [ARR.Length -

1

/d exec() /d Атрибут, используемый для указания начального значения индекса результата сопоставления в исходной строке.

Пример кода следующим образом:

const str = 'javaScript'
const r = /a /d

const m = r.exec (str)
Console.log (M.Ndices [0]) // [1, 2]

написана в конце

.

Карта разума выглядит следующим образом: