14 приемов JS для копирования массивов

Источник: твиттер

Роль: Милош

Переводчик: Front-end Xiaozhi

Чтобы обеспечить удобочитаемость, в этой статье используется вольный перевод, а не дословный перевод.

Копирование массива часто неправильно понимают не из-за самого процесса копирования, а из-за непонимания того, как JS обрабатывает массивы и их элементы. Массивы в JS изменяемы, что означает, что содержимое массива может быть изменено после создания массива.

Это означает, что для копирования массива мы не можем просто присвоить старый массив новой переменной, которая также является массивом. Если вы это сделаете, они будут использовать одну и ту же ссылку, и после изменения одной переменной изменение также повлияет на другую переменную. Вот почему нам нужно клонировать этот массив.

Давайте рассмотрим некоторые интересные методы и приемы копирования и клонирования массивов.

Совет 1 — ИспользуйтеArray.sliceметод

const numbers = [1, 2, 3, 4, 5]

const copy = numbers.slice()
copy.push(6) // 添加新项以证明不会修改原始数组

console.log(copy)
console.log(numbers)

// 输出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Совет 2 — ИспользуйтеArray.mapметод

const numbers = [1, 2, 3, 4, 5]

const copy = numbers.map( num => num )
copy.push(6) // 添加新项以证明不会修改原始数组

console.log(copy);
console.log(numbers);

// 输出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Совет 3 — ИспользуйтеArray.from метод

const numbers = [1, 2, 3, 4, 5];

const copy = Array.from(new Set(numbers));
copy.push(6); // 添加新项以证明不会修改原始数组

console.log(copy);
console.log(numbers);

// 输出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Совет 4. Используйте оператор спреда

const numbers = [1, 2, 3, 4, 5];

const copy = [...numbers];
copy.push(6); // 添加新项以证明不会修改原始数组

console.log(copy);
console.log(numbers);

// 输出 
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Совет 5 — ИспользуйтеArray.ofМетоды и операторы спреда

const numbers = [1, 2, 3, 4, 5];

const copy = Array.of(...numbers);
copy.push(6); // 添加新项以证明不会修改原始数组

console.log(copy);
console.log(numbers);

// 输出 
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Array.of()Метод создает новый экземпляр массива с переменным количеством аргументов, независимо от количества или типов аргументов.Array.of()а такжеArrayРазница между конструкторами заключается в обработке целочисленных аргументов:Array.of(7), чтобы создатьмассив из одного элемента 7,а такжеArray(7)Создайте длину7(примечание: это относится к пустому массиву с7个Массив пустых мест, а не7индивидуальныйundefinedмассив компонентов).

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Совет 6. Используйте конструктор Array и оператор расширения

const numbers = [1, 2, 3, 4, 5];

const copy = new Array(...numbers);
copy.push(6); // 添加新项以证明不会修改原始数组

console.log(copy);
console.log(numbers);

// 输出 
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Совет 7 — Используйте деструктурирование

const numbers = [1, 2, 3, 4, 5];

const [...copy] = numbers;
copy.push(6); // 添加新项以证明不会修改原始数组

console.log(copy);
console.log(numbers);

// 输出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Совет 8. Используйте метод Array.concat

const numbers = [1, 2, 3, 4, 5];

const copy = numbers.concat();
copy.push(6); // 添加新项以证明不会修改原始数组

console.log(copy);
console.log(numbers);

// 输出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Совет 9 — ИспользуйтеArray.pushМетоды и операторы спреда

const numbers = [1, 2, 3, 4, 5];

let copy = [];
copy.push(...numbers);
copy.push(6); // 添加新项以证明不会修改原始数组

console.log(copy);
console.log(numbers);

// 输出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Совет 10 — ИспользуйтеArray.unshift Методы и операторы спреда

const numbers = [1, 2, 3, 4, 5];

let copy = [];
copy.unshift(...numbers);
copy.push(6); // 添加新项以证明不会修改原始数组

console.log(copy);
console.log(numbers);

// 输出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Совет 11 — ИспользуйтеArray.forEachМетоды и операторы спреда

const numbers = [1, 2, 3, 4, 5];

let copy = [];
numbers.forEach((value) => copy.push(value));
copy.push(6); // 添加新项以证明不会修改原始数组

console.log(copy);
console.log(numbers);

// 输出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Совет 12 — Используйтеforцикл

const numbers = [1, 2, 3, 4, 5];

let copy = [];
for (let i = 0; i < numbers.length; i++) {
    copy.push(numbers[i]);
}
copy.push(6); // 添加新项以证明不会修改原始数组

console.log(copy);
console.log(numbers);

// 输出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Совет 13 — ИспользуйтеArray.reduceметод

Этот подход возможен, но он избыточен и его следует использовать с осторожностью.

const numbers = [1, 2, 3, 4, 5];

const copy = numbers.reduce((acc, x) => { acc.push(x); return acc; }, []);
copy.push(6); // 添加新项以证明不会修改原始数组

console.log(copy);
console.log(numbers);

// 输出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Совет 14 — Используйте древниеapplyметод

const numbers = [1, 2, 3, 4, 5];

let copy = [];
Array.prototype.push.apply(copy, numbers);
copy.push(6); // 添加新项以证明不会修改原始数组

console.log(copy);
console.log(numbers);

// 输出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.

оригинал:Twitter.com/pro представляет _Milo…

Суммировать

осторожность, вышеуказанные методы выполняют поверхностную копию, то есть, когда элемент массива является объектом, мы меняем значение объекта, а другой тоже будет меняться, поэтому мы можемСовет 4Например, если наши элементы массива являются такими объектами:

const authors = [
  { name: '前端小智', age: 25 }, 
  { name: '王大冶', age: 30 }, 
]

const copy = [...authors ]
copy[0].name = '被更改过的前端小智'

console.log(copy)
console.log(authors)

выход

Таким образом, описанные выше методы подходят для простых структур данных, а в сложных структурах следует использовать глубокое копирование. Копирование массива часто неправильно понимают не из-за самого процесса копирования, а из-за непонимания того, как JS обрабатывает массивы и их элементы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.