Рад Чинда
Insightsiful Tips для создания и клонирования массивов в JavaScript.
Очень важный аспект каждого языка программирования – это типы данных и структуры, доступные на языке. Большинство языков программирования предоставляют типы данных для представления и работы со сложными данными. Если вы работали с языками, такими как Python или Ruby, вы должны были увидеть типы данных, такие как Списки , наборы , кортежи , хэши , Диктовы , и так далее.
В JavaScript не так много сложных типов данных – у вас просто есть массива и Объекты Отказ Однако в ES6 на язык был добавлен пара типов данных и структур данных, таких как Символы , наборы и Карты Отказ
В этой статье я разделяю пару хаки для создания новых массивов JavaScript или клонирования уже существующих.
Создание массивов: Конструктор массива
Самый популярный метод создания массивов использует Массив литерала Синтаксис, который очень прост. Однако, когда вы хотите динамически создавать массивы, литеральный синтаксис массива не всегда может быть лучшим способом. Альтернативный метод использует Массив конструктор.
Вот простой фрагмент кода, показывающий использование Массив конструктор.
Из предыдущего фрагмента мы видим, что Массив Конструктор создает массивы по-разному в зависимости от аргументов, которые он получает.
Новые массивы: С определенной длиной
Давайте посмотрим на то, что происходит при создании нового Массив данной длины. Конструктор просто устанавливает Длина Свойство массива до заданной длины, не устанавливая клавиши.
Из вышеуказанного фрагмента вы можете подумать, что каждый ключ в массиве был установлен на значение undefined Отказ Но реальность такова, что эти ключи никогда не были установлены (они не существуют).
Следующая иллюстрация делает его более понятнее:
Это делает бесполезным, чтобы попытаться использовать любой из методов итерации массива, таких как карта () , Фильтр () или Уменьшить () манипулировать массивом. Допустим, мы хотим заполнить каждый индекс в массиве с номером 5 как значение. Мы будем пытаться следующее:
Мы можем видеть, что карта () Здесь не работал, потому что свойства индекса не существуют на массиве – только Длина Собственность существует.
Давайте посмотрим на разные способы исправить эту проблему.
1. Используя array.prototype.fill ()
заполнить () Способ заполняет все элементы массива из индекса запуска до конечного индекса со статическим значением. Конечный индекс не включен. Вы можете узнать больше о заполнить () здесь .
Обратите внимание, что наполнять() будет работать только в браузерах с поддержкой ES6.
Вот простая иллюстрация:
Здесь мы смогли заполнить все элементы нашего созданного массива с 5 Отказ Вы можете установить какое-либо статическое значение для различных индексов массива, используя заполнить () метод.
2. Используя массив. From ()
Array.from () Метод создает новый, мелкий скопированный Массив экземпляр из массива или иерируемого объекта. Вы можете узнать больше о Array.from () здесь .
Обратите внимание, что Array.from () будет работать только в браузерах с поддержкой ES6.
Вот простая иллюстрация:
Вот, у нас теперь есть правда undefined Значения, установленные для каждого элемента массива, используя Array.from () Отказ Это означает, что теперь мы можем идти вперед и использовать такие методы, как .карта () и .Filter () На массиве, поскольку свойства индекса теперь существуют.
Еще одна вещь, которую стоит отметить о Array.from () это то, что он может взять второй аргумент, который является Функция карты. Он будет вызван на каждом элементе массива. Это делает его избыточным призывом .карта () после Array.from () Отказ
Вот простой пример:
3. Использование оператора распространения
Распространение оператора ( ... ), добавляется в ES6, может использоваться для распространения элементов массива, устанавливая недостающие элементы в значение undefined Отказ Это даст тот же результат, что и просто звонить Array.from () С лишь массивом в качестве единственного аргумента.
Вот простая иллюстрация использования оператора распространения:
Вы можете идти вперед и использовать такие методы, как .карта () и .Filter () На массиве, поскольку свойства индекса теперь существуют.
Используя Array.of ()
Как мы видели с созданием новых массивов, используя Массив Конструктор или функция, Array.of () ведет себя очень похожую моду. На самом деле, единственная разница между Array.of () и Массив в том, как они обрабатывают один целочисленный аргумент, переданный им.
В то время как Array.of (5) Создает новый массив одним элементом, 5 и длина свойства 1 , Массив (5) Создает новый пустой массив с 5 пустыми слотами и свойство длиной 5 Отказ
var array1 = Array.of(5); // [5]
var array2 = Array(5); // Array(5) {length: 5}Помимо этой основной разницы, Array.of () ведет себя так же, как Массив конструктор. Вы можете узнать больше о Array.of () здесь .
Обратите внимание, что Array.of () будет работать только в браузерах с поддержкой ES6.
Преобразование в массивы: Array-Likes и Iterables
Если вы пишете функции JavaScript достаточно долго, вы уже должны знать о Аргументы объект – который является Массив – как Объект, доступный в каждой функции для удержания списка аргументов, которую полученные функции. Хотя Аргументы Объект выглядит очень похоже на массив, у него нет доступа к Array.Prototype методы.
До ES6 вы обычно видим фрагмент кода, как следующее, когда пытаетесь преобразовать Аргументы объект к массиву:
С Array.from () Или оператор распространения, вы можете удобно преобразовать любой массивный объект в массив. Следовательно, вместо этого это делать:
var args = Array.prototype.slice.call(arguments);
Вы можете сделать любой из них:
// Using Array.from() var args = Array.from(arguments); // Using the Spread operator var args = [...arguments];
Они также относятся к Iterables Как показано на следующем иллюстрации:
Тематическое исследование: Функция диапазона
В качестве тематического исследования, прежде чем мы продолжим, мы создадим простой Диапазон () Функция для реализации нового массив взлома Мы только что узнали. Функция имеет следующую подпись:
range(start: number, end: number, step: number) => Array
Вот фрагмент кода:
В этом фрагменте кода мы использовали Array.from () Чтобы создать новый массив диапазона динамической длины, а затем заполните его последовательно увеличенные числа, обеспечивая функцию сопоставления.
Обратите внимание, что приведенный выше фрагмент кода не будет работать для браузеров без поддержки ES6, за исключением случаев, когда вы используете многолифики.
Вот некоторые результаты позвонить Диапазон () Функция определена в приведенном выше фрагменте кода:
Вы можете получить демонстрацию Live Code, запустив следующую ручку на Кодепен :
Глонирование массивов: Соревнование
В JavaScript, массивы и объекты являются ссылочными типами. Это означает, что когда переменная присваивается массив или объект, что назначается переменной, является ссылкой на местоположение в памяти, где был сохранен массив или объект.
Массивы, как и любой другой объект в JavaScript, являются ссылочными типами. Это означает, что массивы скопированы ссылкой и не по стоимости.
Хранением типов ссылок Этот способ имеет следующие последствия:
1. Подобные массивы не равны.
Здесь мы видим, что хотя Array1 и Array2 Содержит, казалось бы, те же спецификации массива, они не равны. Это связано с тем, что ссылка на каждую из массивов указывает на другое место в памяти.
2. Массивы скопированы ссылкой и не по стоимости.
Здесь мы пытаемся скопировать Array1 к Array2. , но то, что мы в основном делаем, указывает Array2 к тому же местоположению в памяти, что Array1 указывает на. Следовательно, оба Array1 и Array2. указать на то же место в памяти и равна.
Подразделение этого является то, что когда мы внесем изменение в Array2 Удалив последний товар, последний пункт Array1 также удаляется. Это потому, что изменение на самом деле было сделано в массив, хранящийся в памяти, тогда как array1. и Array2 Просто указатели на то же место в памяти, где хранится массив.
Глонирование массивов: Хаки
1. Используя array.prototype.slice ()
ломтик () Метод создает неглубокую копию части массива без изменения массива. Вы можете узнать больше о ломтик () здесь .
Хитрость – звонить ломтик () либо с 0 Как единственный аргумент или без каких-либо аргументов вообще:
// with O as only argument array.slice(0); // without argument array.slice();
Вот простая иллюстрация клонирования массива с ломтик () :
Здесь вы можете увидеть это Array2 это клон Array1 с теми же предметами и длиной. Однако они указывают на разные местоположения в памяти, и в результате не равны. Вы также замечаете, что когда мы вступим в Array2. Удалив последний пункт, Array1 остается неизменной.
2. Используя Array.Prototype .Concat ()
CONCAT () Метод используется для объединения двух или более массивов, что приводит к новому массиву, в то время как исходные массивы остаются без изменений. Вы можете узнать больше о CONCAT () здесь .
Хитрость – звонить CONCAT () Либо с пустым массивом ( [] ) в качестве аргумента или без каких-либо аргументов вообще:
// with an empty array array.concat([]); // without argument array.concat();
Глонирование массива с CONCAT () очень похоже на использование ломтик () Отказ Вот простая иллюстрация клонирования массива с CONCAT () :
3. Используя массив. From ()
Как мы видели раньше, Array.from () Может использоваться для создания нового массива, который является неглубокой копией исходного массива. Вот простая иллюстрация:
4. Использование деструкурирования массива
С ES6 у нас есть более мощные инструменты на нашем панели инструментов, например Разрушение , распространять оператор , Функции стрелки , и так далее. Разрушивание – это очень мощный инструмент для извлечения данных из сложных типов, таких как массивы и объекты.
Хитрость состоит в том, чтобы использовать технику под названием Параметры отдыха, который включает в себя комбинацию деструкурирования массива и оператора распространения, как показано в следующем фрагменте:
let [...arrayClone] = originalArray;
Вышеуказанный фрагмент создает переменную по имени ArrayClone который является клоном OrdvancedArmay Отказ Вот простая иллюстрация клонирования массива с использованием деструкурирования массива:
Все методы клонирования массива, которые мы изучили, до сих пор производят Малая копия массива. Это не будет проблемой, если массив содержит только примитивные значения. Однако, если массив содержит вложенные ссылки на объекты, эти ссылки останутся неповрежденными, даже когда массив клонируется.
Вот очень простая демонстрация этого:
Обратите внимание, что изменение вложенного массива в Array1 Также модифицировал вложенный массив в Array2 наоборот.
Решение этой проблемы состоит в том, чтобы создать Глубокая копия из массива и есть пара способов сделать это.
1. Техника JSON
Самый простой способ создать глубокую копию массива, используя комбинацию JSON.Stringify () и Json.parse () Отказ
JSON.Stringify () Преобразует значение JavaScript на действительную строку JSON, а Json.parse () Преобразует строку JSON в соответствующее значение JavaScript или объекта.
Вот простой пример:
Эти недостатки в технике JSON могут быть организованы способом, в котором JSON.Stringify () Метод преобразует значения на json строку.
Вот простая демонстрация этого недостатка в попытке JSON.Stringify () Значение, содержащее вложенную функцию.
2. Глубокий копией помощника
Жизнестрее, альтернатива технике JSON будет реализовать свой собственный Функция Heyp Copy Helper Для типов опорных типов клонирования будь то массивы или объекты.
Вот очень простая и минималистичная функция глубокой копии под названием Deepclone :
Теперь это не самая лучшая из функций глубокой копии, как вы вскоре увидите с некоторыми библиотеками JavaScript – однако, он выполняет глубокое копирование до довольно долгого.
3. Используя JavaScript библиотеки
Функция вспомогательного помощника, которую мы только что определили, не достаточно надежны в клонировании всех видов данных JavaScript, которые могут быть вложены в комплексные объекты или массивы.
Библиотеки JavaScript, как Лоташ и jquery Обеспечить более надежные функции утилиты глубокой копии с поддержкой различных видов данных JavaScript.
Вот пример, который использует _.cloneep () Из библиотеки Лодаш:
Вот тот же пример, но используя $ .extend. () Из библиотеки JQuery:
Заключение
В этой статье мы смогли изучить несколько методов для динамического создания новых массивов и клонирования уже существующих, в том числе конвертирующих подобных массивам объектов и потрашивает в массивы.
Мы также видели, как некоторые новые функции и улучшения, введенные в ES6, могут позволить нам эффективно выполнять определенные манипуляции на массивы.
Мы использовали такие функции, как разрушимость и оператор распространения для клонирования и распределения массивов. Вы можете узнать больше о деструкурировании от Эта статья Отказ
CLAP и следуйте
Если вы нашли эту статью Insightful, вы можете дать некоторые раунды аплодисментов, если вы не возражаете.
Вы также можете следовать за мной на Medium ( Рад Chinda ) Для более проницательных статей вы можете найти полезным. Вы также можете следовать за мной в Twitter ( @gladchinda ).
Счастливый взлом …
Оригинал: “https://www.freecodecamp.org/news/https-medium-com-gladchinda-hacks-for-creating-javascript-arrays-a1b80cb372b/”