Переводчик: Front-end Xiaozhi
Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статья
GitHubGitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.
Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.
ECMAScript 2015, также известный как ES6, — это основной выпуск, на создание которого ушло 6 лет. С тех пор Технический комитет 39 (TC39), отвечающий за разработку стандарта ECMAScript, ежегодно публикует новую версию стандарта. Этот ежегодный цикл выпуска упрощает процесс и быстро делает доступными новые функции, что приветствуется сообществом JavaScript.
В этом году выйдет ECMAScript 2019 (сокращенно ES2019). Новые функции включаютObject.fromEntries(),trimStart(),trimEnd(),flat(),flatMap(), свойство описания объекта символа, необязательноcatchпривязка и др.
Хорошей новостью является то, что эти функции уже реализованы в последних версиях Firefox и Chrome, и их также можно преобразовать, чтобы старые браузеры могли с ними работать.
1. Object.fromEntries()
Преобразование данных из одного формата в другой очень распространено в JavaScript. Для облегчения преобразования объектов в массивы в ES2017 введеныObject.entrie()метод. Этот метод будетобъектв качестве параметра и с[key，value]Возвращает массив собственных перечисляемых пар свойств объекта со строковыми ключами. Например:
const obj = {one: 1, two: 2, three: 3};
console.log(Object.entries(obj));
// => [["one", 1], ["two", 2], ["three", 3]]
Но что, если мы хотим сделать наоборот и преобразовать список пар ключ-значение в объекты? Некоторые языки программирования, такие как Python, обеспечивают этоdict()функция. существуетUnderscore.jsиLodash_.fromPairsфункция.
Представлено в ES2019Object.fromEntries()Метод переносит аналогичные функции в JavaScript, что позволяет легко преобразовывать ключевые значения в объекты:
const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);
console.log(obj); // => {one: 1, two: 2, three: 3}
Как вы видете,Object.fromEntries()иObject.entries()Он делает прямо противоположное. Хотя та же функциональность Object.fromEntries() могла быть реализована ранее, она была реализована несколько сложным образом:
const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Array.from(myArray).reduce((acc, [key, val])
=> Object.assign(acc, {[key]: val}), {})
console.log(obj); // => {one: 1, two: 2, three: 3}
Не забудьте перейти кObject.fromEntries()Аргументом может быть любой объект, реализующий итерируемый протокол, если он возвращает двухэлементный массивоподобный объект.
Например, в следующем кодеObject.fromEntries()будетMapobject в качестве параметра и создает новый объект, ключи и соответствующие значения которого задаются парами в Map:
const map = new Map();
map.set('one', 1);
map.set('two', 2);
const obj = Object.fromEntries(map);
console.log(obj); // => {one: 1, two: 2}
Object.fromEntries()Методы также очень полезны для преобразования объектов, рассмотрим следующий код:
const obj = {a: 4, b: 9, c: 16};
// 将对象转换为数组
const arr = Object.entries(obj);
// 计算数字的平方根
const map = arr.map(([key, val]) => [key, Math.sqrt(val)]);
// 将数组转换回对象
const obj2 = Object.fromEntries(map);
console.log(obj2); // => {a: 2, b: 3, c: 4}
Приведенный выше код преобразует значение объекта в его квадратный корень. Для этого он сначала преобразует объект в массив, а затем используетmap()Метод берет квадратный корень из значений в массиве, а результатом является массив, который можно преобразовать обратно в объект.
использоватьObject.fromEntries()Другой случай работы со строкой запроса URL-адреса, как в этом примере.
const paramsString = 'param1=foo¶m2=baz';
const searchParams = new URLSearchParams(paramsString);
Object.fromEntries(searchParams); // => {param1: "foo", param2: "baz"}
В этом коде строка запроса будет передана вURLSearchParams()Конструктор. Затем возвращаемое значение (т.URLSearchParamsэкземпляр объекта) передаетсяObject.fromEntries()метод, результатом является объект, содержащий каждый параметр как свойство.
Object.fromEntries()В настоящее время этот метод находится на стадии 4, что означает, что он готов к включению в стандарт ES2019.
2. trimStart() and trimEnd()
trimStart()иtrimEnd()метод реализован сtrimLeft()иtrimRight()такой же. Эти методы в настоящее время находятся на этапе 4 и будут добавлены в спецификацию для совместимости сpadStart()иpadEnd()Чтобы быть последовательным, вот несколько примеров:
const str = " string ";
// es2019
console.log(str.trimStart()); // => "string "
console.log(str.trimEnd()); // => " string"
// 相同结果
console.log(str.trimLeft()); // => "string "
console.log(str.trimRight()); // => " string"
Для веб-совместимости,trimLeft()иtrimRight()останется какtrimStart()иtrimEnd()псевдоним.
3. flat() and flatMap()
flat()метод сглаживания многомерного массива в одномерный массив
const arr = ['a', 'b', ['c', 'd']];
const flattened = arr.flat();
console.log(flattened); // => ["a", "b", "c", "d"]
Раньше мы часто использовалиreduce()илиconcat()чтобы сгладить многомерный массив:
const arr = ['a', 'b', ['c', 'd']];
const flattend = [].concat.apply([], arr);
// or
// const flattened = [].concat(...arr);
console.log(flattened); // => ["a", "b", "c", "d"]
Обратите внимание, что если в предоставленном массиве есть нулевые значения, они будут отброшены:
const arr = ['a', , , 'b', ['c', 'd']];
const flattened = arr.flat();
console.log(flattened); // => ["a", "b", "c", "d"]
flat()Также принимает необязательный параметр, указывающий количество уровней, на которые должен быть сведен вложенный массив. Если параметр не указан, будет использоваться значение по умолчанию.1:
const arr = [10, [20, [30]]];
console.log(arr.flat()); // => [10, 20, [30]]
console.log(arr.flat(1)); // => [10, 20, [30]]
console.log(arr.flat(2)); // => [10, 20, 30]
flatMap()метод будетmap()иflat()объединены в один метод. Сначала он создает новый массив, используя возвращаемое значение предоставленной функции, а затем объединяет все элементы подмассива этого массива. Вот пример:
const arr = [4.25, 19.99, 25.5];
console.log(arr.map(value => [Math.round(value)]));
// => [[4], [20], [26]]
console.log(arr.flatMap(value => [Math.round(value)]));
// => [4, 20, 26]
Уровень глубины, на котором массив будет сглажен, равен1, Если вы хотите удалить элементы из результата, просто верните пустой массив:
const arr = [[7.1], [8.1], [9.1], [10.1], [11.1]];
// do not include items bigger than 9
arr.flatMap(value => {
if (value >= 10) {
return [];
} else {
return Math.round(value);
}
});
// returns:
// => [7, 8, 9]
В дополнение к текущему обрабатываемому элементу функция обратного вызова получит индекс элемента и ссылку на сам массив.flat()иflatMap()В настоящее время метод находится на стадии 4.
4. Свойство description объекта Symbol
при созданииSymbol, вы можете добавить к нему в целях отладкиdescription(описывать). Иногда можно получить прямой доступ кdescriptionочень полезно.
ЕС2019 этоSymbolОбъект добавляет свойство только для чтенияdescription, который возвращает объект, содержащийSymbolСтрока описания.
let sym = Symbol('foo');
console.log(sym.description); // => foo
sym = Symbol();
console.log(sym.description); // => undefined
// create a global symbol
sym = Symbol.for('bar');
console.log(sym.description); // => bar
5. Дополнительный улов
try catchв предложенииcatchИногда это не работает, рассмотрим следующий код:
try {
// 使用浏览器可能尚未实现的功能
} catch (unused) {
// 这里回调函数中已经帮我们处理好的错误
}
в этом кодеcatchИнформация обратного звонка и бесполезна. Но это письмо, чтобы избежатьSyntaxErrorОшибка. ES2019 можно не указыватьcatchОкружающие скобки:
try {
// ...
} catch {
// ....
}
Также: String.prototype.matchAll для ES2020
matchAll()метод — это предложение этапа 4 ES2020, которое возвращает объект итератора для всех совпадений (включая группы захвата) с регулярным выражением.
для сmatch()Подход остается последовательным: TC39 выбирает «matchAll» вместо других предлагаемых имен, таких как «matches» или «scan» Ruby. См. простой пример:
const re = /(Dr\. )\w+/g;
const str = 'Dr. Smith and Dr. Anderson';
const matches = str.matchAll(re);
for (const match of matches) {
console.log(match);
}
// logs:
// => ["Dr. Smith", "Dr. ", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr. ", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]
Группа захвата, соответствующих персонажам в этом регулярном выражении ** «DR» **, а затем одна точка и пространство。\w+Совпадение с любым символом слова один или несколько раз. иgФлаг указывает движку искать шаблоны во всей строке.
Раньше его нужно было использовать в циклеexec()метод для достижения того же результата, который не очень эффективен:
const re = /(Dr\.) \w+/g;
const str = 'Dr. Smith and Dr. Anderson';
let matches;
while ((matches = re.exec(str)) !== null) {
console.log(matches);
}
// logs:
// => ["Dr. Smith", "Dr.", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr.", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]
Важно отметить, что хотяmatch()методы могут использоваться с глобальными флагамиgиспользуется вместе для доступа ко всем совпадениям, но не предоставляет соответствующую группу захвата или индексную позицию. Сравните следующий код:
const re = /page (\d+)/g;
const str = 'page 2 and page 10';
console.log(str.match(re));
// => ["page 2", "page 10"]
console.log(...str.matchAll(re));
// => ["page 2", "2", index: 0, input: "page 2 and page 10", groups: undefined]
// => ["page 10", "10", index: 11, input: "page 2 and page 10", groups: undefined]
Суммировать
В этом посте мы более подробно рассмотрим несколько ключевых функций, представленных в ES2019, в том числеObject.fromEntries(),trimStart(), trimEnd(), flat(), flatMap(),symbolСвойство описания объекта и необязательноеcatch.
Хотя некоторые браузеры не полностью реализовали эти функции, Babel и другие транспиляторы JavaScript можно использовать, и их по-прежнему можно использовать в проектах.
общаться
Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.