JavaScript数组拷贝的n种方法（浅拷贝）

haoduoyu2099

已于 2023-03-08 21:44:10 修改

阅读量911

点赞数

文章标签： javascript 前端开发语言 Powered by 金山文档

于 2023-03-07 15:09:24 首次发布

本文链接：https://blog.csdn.net/haoduoyu2099/article/details/129382529

版权

文章列举并展示了17种在JavaScript中进行数组浅拷贝的方法，包括slice、concat、Object.assign等，当原数组内的对象被修改时，新数组内的对象也会同步变化，证明这些方法执行的是浅拷贝。

摘要由CSDN通过智能技术生成

开门见山，直接进入主题。

假设有如下一个数组 arr，需要拷贝一个新数组 nArr，拷贝完对原数组arr 内的object对象做一个修改，新数组内的拷贝的引用类型object也被同步修改了，证明是浅拷贝。

const arr = [{name: 'xiaoyu'}, 1, 2, 3];
let nArr = [];

方法1. Array.prototype.slice.apply()

nArr = Array.prototype.slice.apply(arr)
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法2. Array.prototype.slice.call()

nArr = Array.prototype.slice.call(arr)
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法3. [].slice.apply()

nArr = [].slice.apply(arr)
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法4. [].slice.call()

nArr = [].slice.call(arr)
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法5. arr.slice()

nArr = arr.slice()
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法6. concat()

nArr = [].concat(arr)
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法7. Object.assign()

nArr = Object.assign([], arr)
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法8. 扩展 ...运算符（展开语法）

nArr = [...arr]
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法9. 解构

[... nArr] = arr
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法10. push() 与展开语法

nArr.push(...arr)
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法11. unshift() 与展开语法

nArr.unshift(...arr)
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法12. Array.of() 与展开语法

nArr = Array.of(...arr)
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法13. for 循环

for(let i = 0, l = arr.length; i < l; i++) {
    nArr.push(arr[i])
}
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法14. forEach 循环

arr.forEach(item => {
    nArr.push(item)
})
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法15. map 循环

nArr = arr.map(item => item)
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

方法16. filter 过滤

nArr = arr.filter(item => true)
arr[0].name = 'hello';
console.log(nArr); // [{name: 'hello'}, 1, 2, 3]

// 17. JSON.parse() 与 JSON.stringfy()，深拷贝

nArr = JSON.parse(JSON.stringify(arr))
arr[0].name = 'hello';
console.log(88,nArr); // [{name: 'xiaoyu'}, 1, 2, 3]

完。

关注