12 个拷贝数组的 JS 技巧
数组拷贝经常被误解,但这并不是因为拷贝过程本身,而是因为缺乏对 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>
总结
请注意,上面这些方法执行的是浅拷贝,就是数组是元素是对象的时候,更改对象的值,另一个也会跟着变