Хабрахабр

ECMAScript Proposal: Array.prototype.{flat,flatMap}

Нововведения в ECMAScript

Предлагаю вашему вниманию интересную штуку которая в скором времени появится уже появилась в стандарте ECMAScript. Здравствуйте читатели Хабр. Это нововведение всего лишь сахар-обертка и ее можно решить своими средствами и это я вам тоже покажу. Она уже доступна почти во всех браузерах и весь функционал тоже. Итак, добавляется базовые функции к массиву, в данном случае их 2, которые позволят нам разворачивать многоуровневые массивы в один или более уровней вложенности. Но этот сахар позволит нам писать кода меньше, ведь мы это так любим. Да да и все это как говориться из коробки

ECMAScript Proposal: Array.prototype.

Он имеет статус stage 3 4 из TC39 то есть уже Candidate Finished. Этот Proposal когда то был известен под именем Array.prototype.flat{ten, Map}. итак: Я думаю стоит немного отвлечься и рассказать о этом самом TC39 и о стандартах, кто знаком могут пропустить сие отступление.

Стандарты JavaScript и как его готовят.

ECMAScript

Он был принят Генеральной Ассамблеей Ecma в июне 1997. ECMAScript — это стандарт, который развивается и поддерживается ассоциацией ECMA International. Стандарт создавался на основе оригинальной версии JavaScript от Брендана Айха из Netscape и интерпретатора JScript от Microsoft, но с тех пор значительно развился. А если точнее, ECMAScript — это стандарт ECMA-262, который называется «Спецификация языка ECMAScript».

Это означает, что по мере того, как у спецификации появляются новые черновики или опубликованные редакции, разработчики браузеров и фреймворков вроде Node.js должны последовательно внедрять новый функционал. JavaScript — это реализация спецификации ECMAScript. Для этого вносятся изменения в движки, которые эти браузеры и фреймворки используют для интерпретирования и выполнения кода JavaScript.

В различных браузерах используются различные движки JavaScript, например, V8 в Chrome, SpiderMonkey в Firefox, и так далее. Зачем нужна спецификация? Без стандартизованной спецификации любой из этих движков был бы волен исполнять JavaScript как ему вздумается, очевидно, что это не очень хорошо. Когда вы пишете на JavaScript, вы ожидаете, что все движки во всех окружениях будут разбирать и выполнять ваш код абсолютно одинаково.

TC39

Они все дружно собираются вместе на встречах комитета приблизительно раз в два месяца и обсуждают заранее подготовленные списки вопросов.
Задачей TC39 является поддержка и обновление упомянутой ранее спецификации ECMAScript, после обсуждения и всеобщего согласия. Ecma International Technical Committee 39 (он же TC39) — комитет очень умных людей, он связан с группой участников тоже кстати умные. Сюда относятся синтаксис языка, семантика, библиотеки и сопутствующие технологии, на которых основывается язык.

Всё начинается с черновика функционала, расширяющего или изменяющего спецификацию. Этот процесс определён TC39. Если предложение оказывается достойным, черновик получает статус официального предложения. Такие черновики часто исходят от сообществ разработчиков, или же от самих участников TC39.

Они пронумерованы от нуля до четырёх мыж программисты: Затем на своём пути от идеи до публикации предложение проходит несколько определенных стадий.

[“Strawman”, “Proposal”, “Draft”, “Candidat”, “Finished”]

Если предложение добралось до стадии 4, можно ожидать, что его включат в следующую официально опубликованную редакцию спецификации стандарта ECMA-262, и в итоге оно появится в окружении, которое выполняет JavaScript. Переход на любую следующую стадию требует одобрения TC39. Больше об этом процессе вы можете узнать из самого документа.

Все существующие предложения на введения в стандарт можно посмотреть тут на github
ну теперь поехали дальше ...

Array.prototype.flat

Метод flat() возвращает новый массив,

var newArray = arr.flat(depth);

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

Пример:

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

Также существует и побочное действие, он удаляет не определенные элементы массива

Пример:

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

Рубрика делаем сами

Используем reduce и concat

Пример:

const arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; function flattenDeep(arr1) { return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
flattenDeep(arr1); //? [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

Array.prototype.flatMap

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

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) { // return element for new_array
}[, thisArg])

callback — Функция которая производит элементы нового массива, принимает три аргумента:

  1. currentValue — Текущий обрабатываемый элемент массива.
  2. index (необязательный) — Индекс обрабатываемого элемента в массиве.
  3. array (необязательный) — Массив по которому осуществляется обход.
    thisArg (необязательный) — Значение используемое в качестве this при вызове функции callback.
    Возвращаемое значение — Новый массив, каждый элемент которого является результатом выполнения функции callback и "поднят" на уровень 1.

пример:

[ { x: 1, y: 2 }, { x: 3, y: 4 }, { x: 5, y: 6 }
].flatMap(c => [c.x, c.y]) //? [1, 2, 3, 4, 5, 6] // or const orders = [ { orderId: 42, items: [ {name: 'soap', price: 1.99}, {name: 'shampoo', price: 4.99} ] }, { orderId: 1337, items: [ {name: 'toothpaste', price: 5.59}, {name: 'toothbrush', price: 8.99} ] }
]; orders.flatMap(i => i.items.map(i => i.name)); //? ["soap", "shampoo", "toothpaste", "toothbrush"]

Рубрика делаем сами

var arr1 = [1, 2, 3, 4]; arr1.reduce((acc, x) => acc.concat([x * 2]), []);
// [2, 4, 6, 8]

Заключение

Причины, по которым умные люди из TC39 это делают — улучшение качества языка, абстрагирования, удобства пользования и другие. Помните, что этот функционал добавляется в язык неспроста. Вы также можете позиционировать себя как эксперта по JavaScript в своей организации, способного предложить новые особенности языка, позволяющие улучшить как код, так и сам продукт. Изучите эти новшества заранее, и к тому моменту, как они будут официально опубликованы и станут везде поддерживаться, вы сможете не теряя времени сразу приняться за работу.

01. ps: пока писалась статья :), Proposal перешел в stage 4
Array.prototype.{flat,flatMap} to stage 4, per 2019. 29 TC39

Показать больше

Похожие публикации

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»