来自：https://juejin.cn/post/6903852199311310862 侵删
数组拷贝经常被误解，但这并不是因为拷贝过程本身，而是因为缺乏对 JS 如何处理数组及其元素的理解。JS 中的数组是可变的，这说明在创建数组之后还可以修改数组的内容。这意味着要拷贝一个数组，咱们不能简单地将旧数组分配给一个新变量，它也是一个数组。如果这样做，它们将共享相同的引用，并且在更改一个变量之后，另一个变量也将受到更改的影响。这就是我们需要克隆这个数组的原因。接着来看看一些关于拷贝何克隆数组的方法和技巧。
方法 1 - 使用Array.slice方法
<script type="text/javascript">
const number = [1, 2, 3, 4, 5];
const newNumber = number.slice();
newNumber.push(6);//添加新项证明不会改变原数组
console.log(number);//[1,2,3,4,5]
console.log(newNumber);//[1,2,3,4,5,6]
</script>
复制代码
方法 2 - 使用Array.map方法
<script type="text/javascript">
const number = [1, 2, 3, 4, 5];
//map有返回值，声明变量接收返回值
const newNumber = number.map(num => num);
newNumber.push(6);//添加新项证明不会改变原数组
console.log(number);//[1,2,3,4,5]
console.log(newNumber);//[1,2,3,4,5,6]
</script>
复制代码
方法 3 - 使用Array.from方法
<script type="text/javascript">
const number = [1, 2, 3, 4, 5];
/*Array.from():
作用：将一个类数组对象或者可遍历对象转化成一个真正的数组
new Set类似数组，但里面不能有重复值*/
const newNumber = Array.from(new Set(number));
newNumber.push(6);//添加新项证明不会改变原数组
console.log(number);//[1,2,3,4,5]
console.log(newNumber);//[1,2,3,4,5,6]
</script>
复制代码
注意：该方法不能用在原数组里有重复项，会被去重
方法 4 - 使用扩展运算符（...）
<script type="text/javascript">
const number = [1, 2, 3, 4, 5];
const newNumber = [...number];
newNumber.push(6);//添加新项证明不会改变原数组
console.log(number);//[1,2,3,4,5]
console.log(newNumber);//[1,2,3,4,5,6]
</script>
复制代码
方法 5 - 使用 Array.of 方法和扩展运算符
<script type="text/javascript">
const number = [1, 2, 3, 4, 5];
// Array.of()：把一组值，转成数组
const newNumber =Array.of (...number);
newNumber.push(6);//添加新项证明不会改变原数组
console.log(number);//[1,2,3,4,5]
console.log(newNumber);//[1,2,3,4,5,6]
</script>
复制代码
注意：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]
new Array(7)//这里表示数组长度为7
new Array(1,2,3)//[1,2,3]
复制代码
方法 6 - 使用 Array 构造函数和扩展运算符
<script type="text/javascript">
const arr = [1, 2, 3, 4, 5];
const newArr = new Array(...arr);
newArr.push(6);
console.log(arr);//[1,2,3,4,5]
console.log(newArr);//[1,2,3,4,5,6]
</script>
复制代码
方法 7 - 使用 Array.concat 方法
<script type="text/javascript">
const arr = [1, 2, 3, 4, 5];
const newArr = arr.concat();//concat() 方法用于连接两个或多个数组
newArr.push(6);
console.log(arr);//[1,2,3,4,5]
console.log(newArr);//[1,2,3,4,5,6]
</script>
复制代码
方法 8 - 使用forEach方法和push方法
<script type="text/javascript">
let arr = [1, 2, 2, 4, 7];
let newArr = []
arr.forEach((item) => newArr.push(item))
newArr.push(6)
console.log(arr);//[1,2,2,4,7]
console.log(newArr);//[1,2,2,4,7,6]
</script>
复制代码
方法 9 - 使用 for 循环
<script type="text/javascript">
let arr = [1, 2, 2, 4, 7];
let newArr = []
for (let i = 0; i < arr.length; i++) {
newArr.push(arr[i])
}
newArr.push(6)
console.log(arr);//[1,2,2,4,7]
console.log(newArr);//[1,2,2,4,7,6]
</script>
复制代码
方法10- 使用 Array.push 方法和扩展运算符
<script type="text/javascript">
let arr = [1, 2, 2, 4, 7];
let newArr = []
newArr.push(...arr);
newArr.push(8);
console.log(arr);//[1,2,2,4,7]
console.log(newArr);//[1,2,2,4,7,8]
</script>
复制代码
方法 11 - 使用 Array.unshift 方法和展开操作符
<script type="text/javascript">
let arr = [1, 2, 2, 4, 7];
let newArr = []
newArr.unshift(...arr);
newArr.push(8);
console.log(arr);//[1,2,2,4,7]
console.log(newArr);//[1,2,2,4,7,8]
</script>
复制代码
方法 12 - 使用解构与扩展运算符
<script type="text/javascript">
const arr = [1, 2, 3, 4, 5];
const [...newArr] = arr
newArr.push(6);
console.log(arr);//[1,2,3,4,5]
console.log(newArr);//[1,2,3,4,5,6]
</script>
复制代码
总结
请注意，上面这些方法执行的是浅拷贝，就是数组是元素是对象的时候，更改对象的值，另一个也会跟着变
作者：就叫王可爱_
链接：https://juejin.cn/post/6903852199311310862
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
