js数组深拷贝汇总

1.for 循环实现数组的深拷贝

通过对数组的for循环,即可实现对数组的深拷贝了。

javascript 复制代码
var arr = [1,2,3,4,5]
var arr2 = copyArr(arr)
function copyArr(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
    res.push(arr[i])
    }
    return res
}

2.slice 方法实现数组的深拷贝

将原数组中抽离部分出来形成一个新数组。我们只要设置为抽离全部,即可完成数组的深拷贝。

javascript 复制代码
var arr = [1,2,3,4,5]
var arr2 = arr.slice(0)
arr[2] = 5
console.log(arr)
console.log(arr2)
// 输出arr为  [1, 2, 5, 4, 5]
// 输出arr2为 [1, 2, 3, 4, 5]

3.concat 方法实现数组的深拷贝

用于连接多个数组组成一个新的数组的方法。那么,我们只要连接它自己,即可完成数组的深拷贝。

javascript 复制代码
var arr = [1,2,3,4,5]
var arr2 = arr.concat()
arr[2] = 5
console.log(arr)
console.log(arr2)
// 输出arr为  [1, 2, 5, 4, 5]
// 输出arr2为 [1, 2, 5, 4, 5]

4.使用JSON.parse()和JSON.stringify()

javascript 复制代码
const arr1 = [1, 2, 3, 4];
const arr2 = JSON.parse(JSON.stringify(arr1));

5. 使用Array.from()

javascript 复制代码
const arr1 = [1, 2, 3, 4];
const arr2 = Array.from(arr1);

6.使用Array.map()

javascript 复制代码
const arr1 = [1, 2, 3, 4];
const arr2 = arr1.map(item => item);

7.ES6扩展运算符实现数组的深拷贝

javascript 复制代码
var arr = [1,2,3,4,5]
var [ ...arr2 ] = arr
arr[2] = 5
console.log(arr)
console.log(arr2)
// 输出arr为  [1, 2, 5, 4, 5]
// 输出arr2为 [1, 2, 5, 4, 5]
相关推荐
挽淚几秒前
JavaScript 数组详解:从入门到精通
javascript
言兴1 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
惜.己3 分钟前
使用python的读取xml文件,简单的处理成元组数组
xml·开发语言·python·测试工具
sunbyte5 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常6 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常8 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101812 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
南篱13 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript
Struggler28119 分钟前
Chrome插件开发
前端
apihz26 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip