你要知道的 - Spread Operator for objects 技巧
栏目: JavaScript · 发布时间: 5年前
内容简介:今天看到了在 ECMAScript 2018 中 Spread Operator 增加了对对象的支持,使得它的应用更为广泛,本文重点介绍如何将它与 Object 一起使用以及与可以通过BABEL,查看示例代码 babel 编译后的结果。
今天看到了 你必须收藏的 ES6 语法密糖 - Spread Operator 技巧 ,这篇文章,收获很多,同时也想起来 ...
也有一些操作对象的用法,总结了一下。
在 ECMAScript 2018 中 Spread Operator 增加了对对象的支持,使得它的应用更为广泛,本文重点介绍如何将它与 Object 一起使用以及与 Object.assgin
的区别。
可以通过BABEL,查看示例代码 babel 编译后的结果。
...
解构赋值
除去已经声明的属性, 剩余 的所有属性都会赋给 ...
后的属性名
let { x, ...y } = { x: 1, y: 2, a: 3, b: 4 }; console.log(x); // 1 console.log(y); // {y: 2, a: 3, b: 4} 复制代码
...
删除属性值
利用 ...
来删除对象中的某一个属性
let { x: deleted, ...y } = { x: 1, y: 2, a: 3, b: 4 }; console.log(y); // {y: 2, a: 3, b: 4} 复制代码
...
复制对象
在 JavaScript 中,有一个常见赋值语法如下
var cat = { age: 4 }; var kitten = cat; kitten.age = 1; 复制代码
此时, cat
和 kitten
引用同一个对象,如果修改了 kitten
的属性,相应的 cat
也会发生变化。
console.log(kitten.age); // 1 console.log(cat.age); // 1 <-- problem! 复制代码
使用 Spread Operator 可以轻松地创建一个具有现有对象的所有相同属性的新对象。
const cat = { age: 4 }; const kitten = { ...cat }; // <-- changed kitten.age = 1; console.log(kitten.age); // 1 console.log(cat.age); // 4 <-- fixed! 复制代码
但是,利用 Spread Operator 去赋值对象,只能完成 浅复制 ,也就是说利用 ...
去复制对象时,并不能递归地复制所有层级。
const cat = { age: 4, toys: ["mouse", "catnip"] }; const kitten = { ...cat }; // const kitten = Object.assign({}, cat); <-- same result kitten.toys[1] = "yarn"; console.log(kitten.toys); // ["mouse", "yarn"] console.log(cat.toys); // ["mouse", "yarn"] <-- problem! 复制代码
...
扩展对象
利用 ...
来拓展对象,就是将 新属性 添加到使用 Spread Operator 创建的对象上
const cat = { legs: 4 }; const dog = { ...cat, sound: "woof" }; console.log(cat); // { legs: 4 } console.log(dog); // { legs: 4, sound: "woof" } 复制代码
同样,可以看到 cat
对象未被更改,但新 dog
对象具有来自 cat
的 legs
属性以及新 sound
属性,如果 sound
已经存在的话,则会覆盖。
const cat = { legs: 4, sound: "meow" }; const dog = { ...cat, sound: "woof" }; console.log(cat); // { legs: 4, sound: "meow" } console.log(dog); // { legs: 4, sound: "woof" } 复制代码
但是,使用 ...
拓展对象时,要注意 行顺序 ,也就是
const cat = { legs: 4, sound: "meow" }; const dog = { sound: "woof", ...cat }; console.log(cat); // { legs: 4, sound: "meow" } console.log(dog); // { legs: 4, sound: "meow" } 复制代码
上述 ...cat
将 sound: "woof"
改写为 sound: "meow"
。
...
与 Object.assign
的区别
在上述利用 ...
处理对象的过程中,会发现 ...
有些时候与 Object.assgin
的操作近乎与等价的,那么他们具体的区别是什么。
Object.assign()
函数会触发setters,而展开语法则不会 *,具体的代码如下
const cat = { set feature(value) { console.log('set', value) this.features.push(value) }, features: [] }; cat.feature = 'cute'; // log set cute const dog = { feature: 'kind' }; const monster = Object.assign(cat, dog); // 由于触发setters,则 log kind const anotherMonster = { ...cat, ...dog }; // 无log 复制代码
上述代码中 monster
为
anotherMonster
为
setters
做处理,只是作为普通属性进行赋值。
参考
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 这些vue技巧你肯定不知道
- Python实用技巧,你不知道的7个好玩的Python技巧
- 关于编码你必须知道的知识和技巧
- 你很可能需要知道这个调试小技巧
- 你不知道的 Git 使用技巧
- [译] 你可能不知道的 Python 技巧
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Agile Web Application Development with Yii 1.1 and PHP5
Jeffrey Winesett / Packt Publishing / 2010-08-27
In order to understand the framework in the context of a real-world application, we need to build something that will more closely resemble the types of applications web developers actually have to bu......一起来看看 《Agile Web Application Development with Yii 1.1 and PHP5》 这本书的介绍吧!