reduce如何实现浅拷贝？concat如何实现浅拷贝？reduce求和

前端_彭于晏

于 2023-02-09 19:03:09 发布

阅读量132

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_35452726/article/details/128958764

版权

文章探讨了JavaScript中使用concat和reduce方法在处理数组拷贝时的深浅拷贝问题。当数组包含复杂对象时，concat创建的是浅拷贝，而修改拷贝后原数组也会受到影响。reduce方法虽然可以实现浅拷贝，但同样不能处理深层对象的独立拷贝。示例代码展示了这两种方法在处理对象数组时的行为。

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

使用concat的时候一层数据的时候可以实现深拷贝，拷贝的数据如果层级比较深的话就实现不了了，就成为了浅拷贝

let arr1 = ['北京', '上海', '广州']
let arr = []

let arr2 = arr.concat(arr1)
arr2[1] = 'shanghai'
console.log('arr1', arr1);
console.log('arr2', arr2);
打印出来的结果是
arr1 [ '北京', '上海', '广州' ]  
arr2 [ '北京', 'shanghai', '广州' ]

代码如下,

let arr1 = ['北京', { address: '上海' }, '广州']
let arr = []

let arr2 = arr.concat(arr1)
arr2[1].address = 'shanghai'
console.log('arr1', arr1);
console.log('arr2', arr2);

//打印结果是
arr1 [ '北京', { address: 'shanghai' }, '广州' ]
arr2 [ '北京', { address: 'shanghai' }, '广州' ]

以上是用concat实现的，下面来看一下reduce实现浅拷贝

let arr1 = ['北京', { address: '上海' }, '广州']
let arr2 = []

arr1.reduce((total, item, index, arr) => {
    arr2.push(item)
}, 0)
//修改arr2里面的address
arr2[1].address = 'shanghai'
console.log('arr1', arr1);
console.log('arr2', arr2);
// 结果是
// arr1['北京', { address: 'shanghai' }, '广州']
// arr2['北京', { address: 'shanghai' }, '广州']

reduce 的求和累加

let arr = [
    { name: 'zs', num: 111 },
    { name: '2s', num: 222 },
    { name: '3s', num: 333 },
    { name: '4s', num: 444 },
]

let num = arr.reduce((total, item, index, arr) => {
    return total += item.num
}, 0)
console.log(num);
// 结果是 1110