来源:twitter
作用:Milos
译者:前端小智
在项目开发过程中,企业会有很多的任务、需求、缺陷等需要进行管理,CORNERSTONE 提供敏捷、任务、需求、缺陷、测试管理、WIKI、共享文件和日历等功能模块,帮助企业完成团队协作和敏捷开发中的项目管理需求;更有甘特图、看板、思维导图、燃尽图等多维度视图,帮助企业全面把控项目情况。
为了保证的可读性,本文采用意译而非直译。
数组拷贝经常被误解,但这并不是因为拷贝过程本身,而是因为缺乏对 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 个
空位 (empty) 的数组,而不是由 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]
代码部署后可能存在的 BUG 没法实时知道,事后为了解决这些 BUG,花了大量的时间进行 log 调试,这边顺便给大家推荐一个好用的 BUG 监控工具 Fundebug。
原文:https://twitter.com/protic_milos
总结
请注意 ,上面这些方法执行的是浅拷贝,就是数组是元素是对象的时候,咱们更改对象的值,另一个也会跟着变,就能 技巧 4 来说,如果咱们的数组元素是对象,如下所示:
const authors = [{ name: '前端小智', age: 25},
{name: '王大冶', age: 30},
]
const copy = [...authors]
copy[0].name = '被更改过的前端小智'
console.log(copy)
console.log(authors)
输出
所以上面的技巧适合简单的数据结构,复杂的结构要使用深拷贝。数组拷贝经常被误解,但这并不是因为拷贝过程本身,而是因为缺乏对 JS 如何处理数组及其元素的理解,推荐周爱民老师的新课程,对 JS 理解很到位。
好课推荐 | 介绍 |
---|---|
周爱民老师出新课了,想当初还是看他的书入门的,这次新课大纲不错,强烈推荐啊,使用 ILOVEJSJS 优惠码再便宜 5 元 |
交流(欢迎加入群,群工作日都会发红包,互动讨论技术)
阿里云最近在做活动,低至 2 折,真心觉得很划算了,可以点击本条内容或者链接进行参与:
https://promotion.aliyun.com/…
干货系列文章汇总如下,觉得不错点个 Star,欢迎 加群 互相学习。
https://github.com/qq449245884/xiaozhi
因为篇幅的限制,今天的分享只到这里。如果大家想了解更多的内容的话,可以去扫一扫每篇文章最下面的二维码,然后关注咱们的微信公众号,了解更多的资讯和有价值的内容。