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

原创已于 2022-06-09 15:56:59 修改 · 573 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

于 2022-06-09 15:55:36 首次发布

林林js笔记专栏收录该内容

1 篇文章

订阅专栏

分享几种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/