Перевод: Лю Сяоси
Оригинальная ссылка:Рисовое путешествие avlutin.com/JavaScript-…
Из-за ограниченного уровня некоторые переводы в тексте могут быть недостаточно точными, если у вас есть идеи получше, укажите их в комментариях.
Другие статьи можно нажать: GitHub.com/Иветт Л.А. Ю/Б…
Любой язык программирования имеет возможности, выходящие за рамки базового использования, которые выигрывают от успешного проектирования и попыток решить широкий круг проблем.
JavaScriptЕсть такая функция:Array.from: разрешено вJavaScriptКоллекции (например, массивы, массивоподобные объекты или строки,map,setи т.д. Iterables) делают полезные преобразования.
В этой статье я опишу 5 полезных и интересныхArray.from()Пример.
1. Введение
Прежде чем мы начнем, давайте вспомнимArray.from()эффект. грамматика:
Array.from(arrayLike[, mapFunction[, thisArg]])
- arrayLike: Обязательный параметр, объект псевдомассива или итерируемый объект, который вы хотите преобразовать в массив.
- mapFunction: необязательный параметр,
mapFunction(item，index){...}это функция, вызываемая для каждого элемента в коллекции. Возвращенное значение будет вставлено в новую коллекцию. - thisArg: необязательный параметр, выполнить функцию обратного вызова
mapFunctionкогда этот объект. Этот параметр используется редко.
Например, давайте умножим каждый элемент массива классов на 2:
const someNumbers = { '0': 10, '1': 15, length: 2 };
Array.from(someNumbers, value => value * 2); // => [20, 30]
2. Преобразовать массив классов в массив
Array.from()Первое использование: для преобразования объекта, похожего на массив, в массив.
Как правило, массивоподобные объекты, с которыми вы столкнетесь:argumentsключевое слово илиDOMсобирать.
В следующем примере просуммируем аргументы функции:
function sumArguments() {
return Array.from(arguments).reduce((sum, num) => sum + num);
}
sumArguments(1, 2, 3); // => 6
Array.from(arguments)массивоподобный объектargumentsв массив, затем используйте массивreduceметод суммирования.
также,Array.from()Первым параметром может быть любой итерируемый объект, мы продолжаем рассматривать некоторые примеры:
Array.from('Hey'); // => ['H', 'e', 'y']
Array.from(new Set(['one', 'two'])); // => ['one', 'two']
const map = new Map();
map.set('one', 1)
map.set('two', 2);
Array.from(map); // => [['one', 1], ['two', 2]]
3. Клонирование массива
существуетJavaScriptЕсть много способов клонировать массив. Как вы можете себе представить,Array.from()Неглубокие копии массивов могут быть легко реализованы.
const numbers = [3, 6, 9];
const numbersCopy = Array.from(numbers);
numbers === numbersCopy; // => false
Array.from(numbers)создал паруnumbersнеглубокая копия массива,numbers === numbersCopyРезультатfalse, что означает, что хотяnumbersа такжеnumbersCopyимеют одни и те же элементы, но это разные объекты массива.
Можно ли использоватьArray.from()Создать клон массива, включая все вложенные? Испытай себя!
function recursiveClone(val) {
return Array.isArray(val) ? Array.from(val, recursiveClone) : val;
}
const numbers = [[0, 1, 2], ['one', 'two', 'three']];
const numbersClone = recursiveClone(numbers);
numbersClone; // => [[0, 1, 2], ['one', 'two', 'three']]
numbers[0] === numbersClone[0] // => false
recursiveClone()Возможность делать глубокие копии массивов, оцениваяitemЯвляется ли это массивом, если это массив, продолжайте вызыватьrecursiveClone()реализовать глубокую копию массива.
Можете ли вы написать лучше, чем использоватьArray.from()Рекурсивная копия, более короткая глубокая копия массива? Если вы можете, пожалуйста, напишите в разделе комментариев ниже.
4. Заполните массив значениями
Если вам нужно инициализировать массив с тем же значением, тоArray.from()будет хорошим выбором.
Давайте определим функцию, которая создает массив, заполненный теми же значениями по умолчанию:
const length = 3;
const init = 0;
const result = Array.from({ length }, () => init);
result; // => [0, 0, 0]
resultпредставляет собой новый массив длины 3, и каждый элемент массива равен 0. передачаArray.from()Метод, передающий в класс массив объектов{ length }и вернуть инициализированное значениеmapFunctionфункция.
Однако есть альтернативаarray.fill()Та же функция может быть достигнута.
const length = 3;
const init = 0;
const result = Array(length).fill(init);
fillArray2(0, 3); // => [0, 0, 0]
fill()Массив правильно заполнен начальными значениями.
4.1 Заполнение массивов объектами
Когда каждый элемент инициализированного массива должен быть новым объектом,Array.from()это лучшее решение:
const length = 3;
const resultA = Array.from({ length }, () => ({}));
const resultB = Array(length).fill({});
resultA; // => [{}, {}, {}]
resultB; // => [{}, {}, {}]
resultA[0] === resultA[1]; // => false
resultB[0] === resultB[1]; // => true
Зависит отArray.fromвернутьresultAИнициализировать другим пустым экземпляром объекта. Это происходит потому, что каждый раз, когда он вызывается,mapFunction, который здесь() => ({})вернет новый объект.
Потом,fill()метод созданresultBИспользуйте тот же пустой экземпляр объекта для инициализации. Пустые элементы не пропускаются.
4.2 Использованиеarray.mapкак насчет этого?
Можно ли использоватьarray.map()метод достижения? Давайте попробуем:
const length = 3;
const init = 0;
const result = Array(length).map(() => init);
result; // => [undefined, undefined, undefined]
map()Способ, кажется, ненормальный, созданный массив не ожидается[0, 0, 0]Но массив с тремя пустыми предметами.
Это потому чтоArray(length)создает массив с 3 пустыми элементами (он же разреженный массив), ноmap()метод пропускает пустые элементы.
5. Создайте диапазон чисел
вы можете использоватьArray.from()Создайте диапазон значений. Например, следующееrangeФункция генерирует массив, начиная с 0 доend - 1.
function range(end) {
return Array.from({ length: end }, (_, index) => index);
}
range(4); // => [0, 1, 2, 3]
существуетrange()в функции,Array.from()предоставляет массив{length：end}, и тот, который просто возвращает текущий индексmapфункция . Таким образом, вы можете генерировать диапазоны значений.
6. Дедупликация массива
из-заArray.from()Входной параметр является итерируемым объектом, поэтому мы можем использовать его сSetВ сочетании для быстрого удаления дубликатов из массива.
function unique(array) {
return Array.from(new Set(array));
}
unique([1, 1, 2, 3, 3]); // => [1, 2, 3]
первый,new Set(array)создал коллекцию, содержащую массивы,SetКоллекции удаляют дубликаты.
потому чтоSetКоллекции повторяемы, поэтому вы можете использоватьArray.from()Преобразуйте его в новый массив.
Таким образом, мы добились дедупликации массива.
7. Заключение
Array.from()метод принимает массивоподобные объекты, а также итерируемые объекты, он может приниматьmapфункция, и этоmapФункция не пропускает значения, которыеundefinedЗначение предметов. Эти функции даютArray.from()предлагает множество возможностей.
Как упоминалось выше, вы можете легко преобразовать подобный массиву объект в массив, клонировать массив, заполнить массив инициализацией, сгенерировать диапазон и реализовать дедупликацию массива.
Фактически,Array.from()Очень хорошо спроектирован, гибкая конфигурация, допускает множество преобразований коллекции.
тебе известноArray.from()другие интересные варианты использования? Вы можете написать в поле для комментариев.
напиши в конце
Был час ночи после перевода, и, конечно же, ни одна взрослая жизнь не легка.
Спасибо за вашу готовность потратить свое драгоценное время на чтение этой статьи. Если эта статья немного поможет вам или вдохновит, пожалуйста, не скупитесь на лайки и звезды, вы, безусловно, самая большая движущая сила для меня, чтобы двигаться вперед.GitHub.com/Иветт Л.А. Ю/Б…