js浅拷贝实现

最新推荐文章于 2024-09-27 17:24:59 发布

置顶木蓝茶陌*_*

最新推荐文章于 2024-09-27 17:24:59 发布

阅读量5k

点赞数 1

分类专栏： JS 文章标签：浅拷贝 js浅拷贝 slice浅拷贝 assign浅拷贝

本文链接：https://blog.csdn.net/jyn15159/article/details/124025238

版权

JS 专栏收录该内容

88 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的浅拷贝概念，通过Array.prototype.slice()和Object.assign()方法展示了浅拷贝如何复制对象属性的引用。同时，提供了一个简单的浅拷贝函数实现。浅拷贝仅复制对象的非对象属性的值和对象属性的引用，不适用于深拷贝复杂对象。文中还探讨了浅拷贝在数组和对象中的应用及其影响。

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

jS浅拷贝实现

一个新的对象直接拷贝已存在的对象的对象属性的引用，即浅拷贝。

Array.prototype.slice()属于浅拷贝。

var arr = [2, 4, 6, { y: 10 }]
var newArr = arr.slice()
newArr[3].x = 20
newArr[3].y = 30
console.log(arr)     // [2, 5, 6, { y: 30, x: 20 }]
console.log(newArr)  // [2, 5, 6, { y: 30, x: 20 }]

浅拷贝只拷贝已存在对象的对象属性的引用，其余非对象属性是占用新的内存空间，并非与原对象共享。

var newArr = Array.prototype.slice.call(arr)
newArr[1] = 50
console.log(arr)  // [2, 4, 6, { y: 10 }]
console.log(newArr)  // [2, 50, 6, { y: 10 }]

浅拷贝：新的对象复制已有对象中非对象属性的值和对象属性的引用。

简单实现一个浅拷贝函数：

var arr = [2, 4, 6, { y: 10 }]
function shallowCopy (arr) {
    var newArr = Array.isArray(arr) ? [] : {}
    // var newArr = arr instanceof Array ? [] : {}
    for (let key in arr) {
        newArr[key] = arr[key]
    }
    return newArr
}
var newArr = shallowCopy(arr)
console.log(newArr)

像常用的数组方法slice()和对象方法Object.assign()都属于浅拷贝。

var obj = { x: 1, y: 2, z: { num: 10 } }
var newObj = {}
Object.assign(newObj, obj)
newObj.y = 3
console.log(obj)  // { x: 1, y: 2, z: { num: 10 } }
console.log(newObj) // { x: 1, y: 3, z: { num: 10 } }

浅拷贝只拷贝已存在对象的对象属性的引用：

var obj = { x: 1, y: 2, z: { num: 10 } }
var newObj = {}
Object.assign(newObj, obj)
newObj.z.num = 20
console.log(obj)  // { x: 1, y: 2, z: { num: 20 } }
console.log(newObj)  // { x: 1, y: 2, z: { num: 20 } }