分享几种javascript里克隆数组的方法

浅克隆(Shallow copy)

for 循环

const arr = [1,2,3,4]
let arr_clone = []
for(let i in arr){    // 注意这里i不是表示arr里的元素，而是元素对应的序号arr_clone.push(arr[i])
}

const arr = [1,2,3,4]
let arr_clone = []
for(let i = 0; i < arr.length; i++){arr_clone.push(arr[i])
}

while循环

const arr = [1,2,3,4]
let arr_clone = []
let i = 0
while(i < arr.length){arr_clone.push(arr[i])i++
}

扩展运算符

const arr = [1,2,3,4]
let arr_clone = [...arr]

Array.map()

const arr = [1,2,3,4]
const clone = (x) => x
const arr_clone = arr.map(clone)

Array.filter()

const arr = [1,2,3,4]
const clone = () => true
const arr_clone = arr.filter(clone)

Array.slice()

const arr = [1,2,3,4]
const arr_clone = arr.slice()

以上全部都属于浅克隆，简单地说，克隆数组主要存储原数组所引用的对象的地址。当将原数组变量的值赋给新数组时，存储在原数组中的地址被复制到新数组中。这意味着新旧数组变量都指向内存中的同一个对象。因此，如果对象的状态通过任何引用变量改变，则会同时反映在两个引用变量中。

以for为例，浅克隆对一位数组没有影响

const arr = [1,2,3,4]
const arr_clone = []for(let i in arr){arr_clone.push(arr[i])
}console.log("原数组添加5")
arr.push(5)
console.log(arr)
console.log(arr_clone)
console.log()console.log("克隆数组添加6")
arr_clone.push(6)
console.log(arr)
console.log(arr_clone)
console.log()>>>
原数组添加5
[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 5 ]克隆数组添加6
[ 1, 2, 3, 4, 5, 6 ]
[ 1, 2, 3, 4, 5, 6 ]

浅克隆对多维数组有影响。当新旧数组push变量时，不会对对方有影响。但是当修改数组里的变量时我们发现，如果修改的是克隆数组，那么原数组也会受影响。同理修改原数组，克隆的也会受影响

const arr_2D = [[1, 2], [3]]
const arr_2D_clone = []for(let i in arr_2D){arr_2D_clone.push(arr_2D[i])
}console.log("克隆2D数组[1]添加4")
arr_2D_clone[1].push(4)
console.log(arr_2D)
console.log(arr_2D_clone)
console.log()console.log("克隆2D数组添加[5]")
arr_2D_clone.push([5])
console.log(arr_2D)
console.log(arr_2D_clone)
console.log()console.log("原2D数组[1]添加6")
arr_2D[1].push(6)
console.log(arr_2D)
console.log(arr_2D_clone)
console.log()console.log("原2D数组添加[7]")
arr_2D.push([7])
console.log(arr_2D)
console.log(arr_2D_clone)>>>
克隆2D数组[1]添加4
[ [ 1, 2 ], [ 3, 4 ] ]
[ [ 1, 2 ], [ 3, 4 ] ]克隆2D数组添加[5]
[ [ 1, 2 ], [ 3, 4 ] ]
[ [ 1, 2 ], [ 3, 4 ], [ 5 ] ]原2D数组[1]添加6
[ [ 1, 2 ], [ 3, 4, 6 ] ]
[ [ 1, 2 ], [ 3, 4, 6 ], [ 5 ] ]原2D数组添加[7]
[ [ 1, 2 ], [ 3, 4, 6 ], [ 7 ] ]
[ [ 1, 2 ], [ 3, 4, 6 ], [ 5 ] ]

深克隆(Deep copy)

深克隆就可以避免上述问题

const arr = [1,2,3,4]
const arr_2D = [[1, 2], [3]]let arr_clone = JSON.parse(JSON.stringify(arr))
let arr_2D_clone = JSON.parse(JSON.stringify(arr_2D))console.log("原数组添加5")
arr.push(5)
console.log(arr)
console.log(arr_clone)
console.log()console.log("克隆数组添加6")
arr_clone.push(6)
console.log(arr)
console.log(arr_clone)
console.log()console.log("克隆2D数组[1]添加4")
arr_2D_clone[1].push(4)
console.log(arr_2D)
console.log(arr_2D_clone)
console.log()console.log("克隆2D数组添加[5]")
arr_2D_clone.push([5])
console.log(arr_2D)
console.log(arr_2D_clone)
console.log()console.log("原2D数组[1]添加6")
arr_2D[1].push(6)
console.log(arr_2D)
console.log(arr_2D_clone)
console.log()console.log("原2D数组添加[7]")
arr_2D.push([7])
console.log(arr_2D)
console.log(arr_2D_clone)>>>
原数组添加5
[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4 ]克隆数组添加6
[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 6 ]克隆2D数组[1]添加4
[ [ 1, 2 ], [ 3 ] ]
[ [ 1, 2 ], [ 3, 4 ] ]克隆2D数组添加[5]
[ [ 1, 2 ], [ 3 ] ]
[ [ 1, 2 ], [ 3, 4 ], [ 5 ] ]原2D数组[1]添加6
[ [ 1, 2 ], [ 3, 6 ] ]
[ [ 1, 2 ], [ 3, 4 ], [ 5 ] ]原2D数组添加[7]
[ [ 1, 2 ], [ 3, 6 ], [ 7 ] ]
[ [ 1, 2 ], [ 3, 4 ], [ 5 ] ]

文章参考：

https://www.freecodecamp.org/news/how-to-clone-an-array-in-javascript-1d3183468f6a/https://www.freecodecamp.org/news/how-to-clone-an-array-in-javascript-1d3183468f6a/What is Shallow Copy in JavaScript ? - GeeksforGeeksA Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.https://www.geeksforgeeks.org/what-is-shallow-copy-in-javascript/

【林林js笔记】克隆数组的几种方法以及浅克隆深克隆误区相关推荐

js对象转换为数组的两种方法
第一种方法: Object.values(obj) 示例: var obj = { name: '小明', age: 22 }; console.log( Object.values(obj) ); ...
js 简单的数组去重13种方法
js 数组去重十几种数组去重的方法,有的去重构思可以大致相同. 上篇的几种数组去重 https://blog.csdn.net/weixin_47988564/article/details/106 ...
【js】创建数组的三种方法
<html><head></head><script type="text/javascript">//数组var stuName1 ...
JS 中迭代数组的三种方法
第一种(forEach): const todo = [{id : '1',name : 'zhangsan',age : '20',},{id : '2',name : 'lisis',age : ...
javascript中如何创建数组-与创建数组的几种方法
javascript中数组的创建方式有3种,我只学了3种,还有没有其他方法我也不知道哈.... 下面我们来看看 js中创建数组的其中一种方法. //先写一种最常规的的创建JS数组的方法 var arr ...
知识点2:js（javascript）中检测是否为数组的两种方法【翻转数组案例】
javascript基础知识文章目录 javascript基础知识前言一.翻转数组案例二.检测数组的两种方法 1.如果传输的参数不是数组 2.instanceof 运算符可以用来检测是否满足 ...
matlab合并有序数组,《数组合并》JS合并两个数组的3种方法详解
这篇文章主要介绍了JS合并两个数组的3种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一个包解决你所有的JS问题,点击获取需要将两个数组 ...
js合并两个数组的三种方法
js合并数组的三种方法前提:两个数组a=[1,2,3,4].b=[5,6,7],将其合并为一个数组 1. concat //js的Array对象提供了一个叫concat()方法,连接两个或更多的数组 ...
js类数组转化为数组的5种方法【附思路】
arrayLike为要转化的类数组,适合有点基础的小伙伴. 1.扩展运算符... console.log([...arrayLike]) 2.Array.form console.lo ...
js刷新页面有哪几种方法
js刷新页面有哪几种方法一.总结一句话总结:location属性的reload方法即可:document.location.reload() 1.页面刷新有哪常见的8种方法? 1,history. ...

【林林js笔记】克隆数组的几种方法以及浅克隆深克隆误区