解构赋值是深拷贝吗?

2019-04-18 admin

最近在使用Redux想到一个问题,Redux里常用的一种语法是这样的:

setSth(state, { payload }) {
    const { newthing} = payload;
    return {
        ...state,
        newthing
    }
}

Redux通过解构赋值…state,保留了state里未修改的部分,并覆盖修改的部分,那么现在问题来了,这里的新对象通过解构得来的…state,是否是原来属性的引用赋值呢?

我们知道,如下情况:

let state = {a: 1, b: 2}
let state2 = state;
state2.a = 5;
// state.a === 5 => true

这里state2是state的一个引用赋值。 那么使用解构赋值生成一个新对象会如何呢?

let state = {a: 1, b: 2}
let state2 = { ...state }
state2.a = 5;
// state.a === 1 => true

通过实验可见,state2属性的修改并没有影响到state,所以这是一份拷贝,那么问题又来了,这个拷贝是只有一层的浅拷贝,还是递归进去的深拷贝呢,我直觉地认为是深拷贝,于是又做了一个实验:

let state = {a: {a1: 1, a2: 2}, b: 2}
let state2 = { ...state }
state2.a.a1 = 5;
// state.a.a1 === 5 => true

事实证明我的直觉错了,解构复制到全新对象里只是浅拷贝,对象里属性的属性还是对原来对象里属性的属性的一个引用,因为解构赋值可以生成一份浅拷贝,其实我们针对已知结构的对象也可以全部使用这个方法实现自己想要的拷贝。比如上例中:

let state = {a: {a1: 1, a2: 2}, b: 2}
let state2 = { ...state, a: { ...state.a } }

希望可以帮助大家。

[转载]原文链接:https://segmentfault.com/a/1190000018910874

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-62133.html

文章标题:解构赋值是深拷贝吗?

相关文章
Node.js深受欢迎的六大原因
Node.js鏄�涓€绉嶅悗璧风殑浼樼�€鏈嶅姟鍣ㄧ紪绋嬭��瑷€锛屽畠鐢ㄦ潵鏋勫缓鍜岃繍琛學eb搴旂敤锛岃繖鍜孉SP.NET锛孯uby聽on聽Rails鎴朣pring妗嗘灦鍋氱殑宸ヤ綔鏄�绫讳技鐨勩€傚畠浣跨敤JavaScript浣滀负涓...
2015-11-11
JavaScript深入之类数组对象与
类数组对象 所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象 举个例子: var array = ['name', 'age', 'sex']; var ...
2017-05-27
JavaScript判断是否为数组的3种方法及效率比较
今天针对不同的数组判定方式在chrome上做了一个效率的对比,结果如下: 其代码如下: var ret; var o = [1,2,3]; var toStr = {}.toString; var array = {}; arra...
2017-03-22
2015年将是HTML5爆发的一年?
2015年将是HTML5爆发的一年 ...
2015-11-12
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
深入分析JSON编码格式提交表单数据
以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始。而新出现的JSON格式提交表单数据方法,将表单里的...
2017-03-25
js判断手机端(Android手机还是iPhone手机)
网上常用的代码 /** * [isMobile 判断平台] * @param test: 0:iPhone 1:Android */ function ismobile(test){ var u = naviga...
2017-03-27
js判断子窗体是否关闭的方法
本文实例讲述了js判断子窗体是否关闭的方法。分享给大家供大家参考。具体如下: function InsideMessageAdd() { //window.open()得到子窗体 tip = OpenDialog(&...
2017-03-29
深入浅出分析javaScript中this用法
本文实例讲述了javaScript中this用法。分享给大家供大家参考。具体分析如下: 之前学javascript的时候总搞不清this,这个this不像java里的this那么好理解。我后来也是看了许多别人写的文章,才理解过来的。现在把别...
2017-03-23
解析JavaScript的ES6版本中的解构赋值
什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量。这个语法非常简洁,而且比传统的属性访问更加清晰。 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0...
2017-03-27
回到顶部