Автор оригинала: Scott Robinson.
В одном из моих предыдущих статей я охватил, как вы можете Скопируйте объекты в JavaScript Отказ Копирование объекта – это довольно сложное усилие, учитывая, что вы также должны быть в состоянии скопировать каждый другой тип данных, который может быть в объекте. Но что, если ты просто Копирование массива? Как и последняя статья, есть довольно много способов выполнить эту задачу, несколько из которых я пойду в эту статью.
Но сначала записка по скорости. Хотя это может не важно для всех приложений, это что-то рассмотреть, если копирование больших массивов является общей операцией в вашем коде, или если скорость действительно имеет значение. Для некоторых методов ниже я отмечаю его скорость относительно других методов, которые исходятся от результатов Этот тест Отказ
Копирование простых массивов
Для этой первой части, давайте предположим, что массив, который вы хотите скопировать, содержит только примитивные (и неизменные) типы данных. То есть массив содержит только номера, логические значения, строки и т. Д. Таким образом, мы можем сосредоточить больше на передаче данных из одного массива в другую, в отличие от того, как мы обрабатываем копирование фактического содержимого массива, которое я буду Обложка в разделе «Глубокие копии» ниже.
Существует удивительное количество способов скопировать массив, некоторые из которых включают в себя:
толкать- Распространение
ломтикArray.Rom._.clone.
Оператор распространения и ломтик Метод – самые быстрые способы копирования неглубокого массива, но имейте в виду, что это зависит от основного времени выполнения, так что это может не быть универсально.
Толкать
Это, вероятно, является наиболее очевидным решением, которое петли по оригинальному массиву и использует новый массив push () Способ добавления элементов из одного массива на другое:
let oldArr = [3, 1, 5, 2, 9];
let newArr = [];
for (let i=0; i < oldArr.length; i++) {
newArr.push(oldArr[i]);
}
Мы просто циклируемся над массивом, который будет скопирован и протолкнуть каждый элемент на новый массив.
Распространение
Этот метод использует Распространение оператора , который был определен в ES6 и доступен в большинстве обновленных браузеров.
Работает как следующее:
let oldArr = [3, 1, 5, 2, 9]; let newArr = [...oldArr];
Если я собираюсь использовать собственное решение и стороннюю библиотеку, это обычно это решение, которое я предпочитаю благодаря чистую и простому синтаксису.
Одно важное примечание состоит в том, что это копирование работает только на верхнем уровне (например, многие из этих методов), поэтому его не следует использовать, если вам нужны глубокие копии чего-либо.
Ломтик
ломтик () Метод обычно используется для возврата части массива, указанного в Начало и конец Параметры. Однако, если параметры не передаются, то вернутся копия всего массива:
let oldArr = [3, 1, 5, 2, 9]; let newArr = oldArr.slice();
Во многих JavaScript Runtimes это самый быстрый способ скопировать массив.
Array.Rom.
Array.rom Метод предназначен для создания неглубокой копии любого ИТЕРИТЕЛЬНО Вы передаете к нему, и он также принимает дополнительную функцию отображения в качестве второго параметра. Таким образом, его можно использовать для создания массива из строк, наборов, карт и, конечно, других массивов:
let oldArr = [3, 1, 5, 2, 9]; let newArr = Array.from(oldArr);
Лодаш клон
Лодаш клон () и CLONDEEP () Методы могут быть вам знакомы, если вы читаете Эта статья на копировании объектов. Методы делают именно то, что вы ожидаете – прошел любой объект (или массив, примитивный и т. Д.), будет скопирован и возвращен.
_.cloneep (описанный ниже ниже) отличается тем, что он не останавливает клонирование на верхнем уровне, он рекурсивно скопирует все объекты, которые он встречается на любом уровне.
Учитывая это, мы можем использовать его для копирования массивов:
let oldArr = [3, 1, 5, 2, 9]; let newArr = _.clone(oldArr);
_.clone Выполняет очень хорошо по сравнению с другими методами, поэтому, если вы уже используете эту библиотеку в своем приложении, это простое решение.
Глубокие копии
Одно важное значение указать, состоит в том, что все методы, описанные выше, только выполняют мелкие копии ваших массивов. Таким образом, если у вас есть массив объектов, например, фактический массив будет скопирован, но основные объекты будут переданы посредством ссылки на новый массив.
Чтобы продемонстрировать эту проблему, давайте посмотрим на пример:
let oldArr = [{foo: 'bar'}, {baz: 'qux'}];
let newArr = [...oldArr];
console.log(newArr === oldArr);
console.log(newArr[0] === oldArr[0]);
false true
Здесь вы видите, что, в то время как фактический массив новый, объекты в нем были. Для некоторых приложений это может быть большая проблема. Если это относится к вам, вот некоторые другие методы для попытки.
Глубоко клона Лодаш
Лодаш _.cloneep Метод делает точно так же, как _.clone () За исключением того, что он рекурсивно клонирует все в массиве (или объекте), вы передаете его. Используя тот же пример, что и выше, мы видим, что используя _.cloneep () предоставит нам как новый массив и Скопированные элементы массива:
const _ = require('lodash');
let oldArr = [{foo: 'bar'}, {baz: 'qux'}];
let newArr = _.cloneDeep(oldArr);
console.log(newArr === oldArr);
console.log(newArr[0] === oldArr[0]);
false false
JSON Методы
JavaScript предоставляет некоторые удобные методы JSON, которые обрабатывают преобразование большинства типов данных JS в строку, а затем действительную строку JSON к объекту JS. Соответствующие методы используются следующим образом:
let oldArr = [{foo: 'bar'}, {baz: 'qux'}];
let arrStr = JSON.stringify(oldArr);
console.log(arrStr);
let newArr = JSON.parse(arrStr);
console.log(newArr);
console.log(newArr === oldArr);
console.log(newArr[0] === oldArr[0]);
'[{"foo":"bar"},{"baz":"qux"}]'
[ { foo: 'bar' }, { baz: 'qux' } ]
false
false
Этот метод отлично работает, и это не требует сторонних библиотек. Однако есть два основных вопроса:
- Данные должны быть сериализуемыми и десериализированными через JSON
- Использование методов JSON таким способом намного медленнее, чем другие решения
Поэтому, если у вас есть данные, которые не могут быть сериализованы для JSON или, если скорость важно для вашего приложения, то это может не быть хорошим решением для вас.
Заключение
В этой статье я охватил ряд способов, которые вы можете скопировать массивы в JavaScript, как с использованием нативного кода, а также полезной сторонней библиотеки в Лоташ. Мы также смотрели на проблему глубоких клонинговых массивов и какие решения существуют для ее решения.
Есть ли другой метод, который лучше всего подходит для вас? Дайте нам знать, что вы думаете в комментариях.