14 个复制数组的 JS 技巧

为了确保的可读性,本文选用意译而非直译。

数组仿制经常被误解,但这并不是由于仿制进程自身,而是由于缺少对 JS 怎么处理数组及其元素的了解。JS 中的数组是可变的,这说明在创立数组之后还能够修正数组的内容。

这意味着要仿制一个数组,我们不能简略地将旧数组分配给一个新变量,它也是一个数组。假如这样做,它们将同享相同的引证,并且在更改一个变量之后,另一个变量也将遭到更改的影响。这便是我们需求克隆这个标签17数组的原因。

我自己是一名从事了多年开发的web前端老程序员,现在辞去职务在做自己的web前端私家定制课程,今年年初我花了一个月收拾了一份最合适2019年学习的web前端学习干货,各种结构都有收拾,送给每一位前端小伙伴,想要获取的能够重视我的头条号并在后台私信我:前端,即可免费获取。

接着来看看一些关于仿制何克隆数组标签10的风趣办法和技巧。

技巧 1 - 运用`Array.slice`办法

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

const copy = nu标签11mbers.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); // 增加新项以证明不会标签19修正原始数组

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

// 输出
// [1, 2, 3, 4, 标签175, 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) 创立一个具有单个元素 714 个仿制数组的 JS 技巧 的数组,而 Array(7) 创立一个长度为7的空数组(留意:这是指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组)。

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

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

技标签14巧 6 - 运用 A14 个仿制数组的 JS 技巧rray 结构函数和打开操作符

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

const copy = new Array(...numbers)标签14;
copy.push(6); // 增加新项以证明不标签11会修正原始数组

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 =标签14 [1, 2, 3, 4, 5];

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

conso标签5le.log(c标签20opy);
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); // 增加新项以证明不会修正原始数组

cons标签14ole.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 c14 个仿制数组的 JS 技巧opy = [];
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标签11 (let i = 0; i < numbers.length; i++) {
copy.push(numbers[i]);
}
copy.push(6); // 增加新项以证明不会修正原始数标签11组

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

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

技巧 13 - 运用 `Array.reduce` 办法

这个做法是可行,但比较剩余,少用

const 14 个仿制数组的 JS 技巧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]

技巧标签11 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]

代码布置后或许存标签3在的BUG14 个仿制数组的 JS 技巧无法实时知道,过后为了处理这些BUG,花了很多的时刻进行log 调试,这边顺便给我们引荐一个好用的BUG监控东西 Fundebug。

原文:https://twitt14 个仿制数组的 JS 技巧er.com/protic_milos

总结

请留意,上面这些办法履行的是浅仿制,便是数组是元素是目标的时分,我们更改目标的值,另一个也会跟着变,就能技巧4来说,假如我们的数组元素是目标,如下所示:

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

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

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

输出

所以上面的技巧合适简略的数据结构,杂乱的结构要运用深仿制。数组仿制14 个仿制数组的 JS 技巧经常被误解,但这并不是由于仿制进程自身,而是由于缺少对 JS 怎么处理数组及其元素的了解。

好啦,本次共享到这儿了。

来历:twitter
效果:Milos
译者:前端小智

Write a Comment

电子邮件地址不会被公开。 必填项已用 *标注