JavaScript: что нового в ES2019

внешний интерфейс

Как самый популярный язык программирования и один из самых важных языков веб-разработки, JavaScript постоянно развивается, получая новые внутренние обновления с каждой итерацией. Давайте посмотрим, какие новые функции есть в ES2019 и добавим в нашу ежедневную разработку:

Array.prototype.flat()

Array.prototype.flat()Рекурсивно сглаживает вложенные массивы до указанной глубины. По умолчанию 1, используйте, если хотите полную глубинуInfinity. Этот метод не изменяет исходный массив, а создает новый массив:

const arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(2); 
// [1, 2, 3, 4, 5, 6]

const arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]];
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6, 7, 8]

flat()Метод удаляет пустые элементы из массива:

const arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]

Array.prototype.flatMap()

flatMap()Метод сначала сопоставляет каждый элемент с помощью функции сопоставления, а затем сжимает результат в новый массив. это сArray.prototype.mapи со значением глубины 1Array.prototype.flatпочти то же самое, ноflatMapОбычно несколько эффективнее объединить в один метод.

const arr1 = [1, 2, 3];

arr1.map(x => [x * 4]); 
// [[4], [8], [12]]

arr1.flatMap(x => [x * 4]); 
// [4, 8, 12]

Лучший пример:

const sentence = ["This is a", "regular", "sentence"];

sentence.map(x => x.split(" ")); 
// [["This","is","a"],["regular"],["sentence"]]

sentence.flatMap(x => x.split(" ")); 
// ["This","is","a","regular", "sentence"]

// 可以使用 归纳(reduce) 与 合并(concat)实现相同的功能
sentence.reduce((acc, x) => acc.concat(x.split(" ")), []);

String.prototype.trimStart() и String.prototype.trimEnd()

за исключением удаления пробельных символов с обоих концов строкиString.prototype.trim()Кроме того, теперь есть отдельные методы, которые удаляют только пробелы с каждого конца:

const test = " hello ";

test.trim(); // "hello";
test.trimStart(); // "hello ";
test.trimEnd(); // " hello";
  • trimStart(): псевдонимtrimLeft(), удалить последовательные пробелы с левого конца исходной строки и вернуться, не изменяя непосредственно исходную строку.
  • trimEnd(): псевдонимtrimRight(), удалить последовательные пробелы в правом конце исходной строки и вернуться, не изменяя непосредственно исходную строку.

Object.fromEntries

Новый метод для преобразования списка пар ключ-значение в Object.

Это былоObject.entries()ровно наоборот,Object.entries()Метод используется при преобразовании объекта в массив, он возвращает массив пар ключ-значение с учетом собственных перечисляемых свойств объекта.

Но теперь вы можете пройтиObject.fromEntriesВозвращает массив операций в объект.

Вот пример (возведите в квадрат значения всех свойств объекта):

const obj = { prop1: 2, prop2: 10, prop3: 15 };

// 转化为键值对数组:
let array = Object.entries(obj); 
// [["prop1", 2], ["prop2", 10], ["prop3", 15]]

Возводим в квадрат значения всех свойств объекта:

array = array.map(([key, value]) => [key, Math.pow(value, 2)]); 
// [["prop1", 4], ["prop2", 100], ["prop3", 225]]

Мы преобразуем массивarrayПередать как параметрObject.fromEntries, который преобразует массив в объект:

const newObj = Object.fromEntries(array); 
// {prop1: 4, prop2: 100, prop3: 225}

Необязательный параметр улова

Новое предложение позволяет полностью отказаться отcatch()параметр, потому что во многих случаях вы не хотите его использовать:

try {
  //...
} catch (er) {
  //handle error with parameter er
}

try {
  //...
} catch {
  //handle error without parameter
}

Symbol.description

descriptionэто свойство только для чтения, которое возвращаетSymbolДополнительное описание строки объекта для использования вместоtoString()метод.

const testSymbol = Symbol("Desc");

testSymbol.description; // "Desc"

testSymbol.toString(); // "Symbol(Desc)"

Function.toString()

Теперь вызовите функциюtoString()вернет функцию (в виде строки) точно так, как она определена, включая пробелы и комментарии.

До:

function /* foo comment */ foo() {}

foo.toString(); // "function foo() {}"

Сейчас:

foo.toString(); // "function /* foo comment */ foo() {}"

Улучшения JSON.parse()

Разделитель линии(\u2028)Сегмент сепаратор(\u2029), теперь анализируется правильно, а не сообщает о синтаксической ошибке.

var str = '{"name":"Bottle\u2028AnGe"}'
JSON.parse(str)
// {name: "Bottle
AnGe"}

Оригинальная ссылка:JavaScript: что нового в ES2019

серия статей

Хотите увидеть больше статей в серии,Нажмите, чтобы перейти на домашнюю страницу блога github.

Прогулка в конце, добро пожаловать, чтобы обратить внимание: джентльмен переднего конца бутылки, ежедневное обновление

前端瓶子君