你要知道的 - 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;
复制代码

此时, catkitten 引用同一个对象,如果修改了 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 对象具有来自 catlegs 属性以及新 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" }
复制代码

上述 ...catsound: "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

你要知道的 - Spread Operator for objects 技巧

anotherMonster

你要知道的 - Spread Operator for objects 技巧
显然 Spread Operator 没有对 setters

做处理,只是作为普通属性进行赋值。

参考


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

高效团队开发

高效团队开发

[日] 池田尚史、[日] 藤仓和明、[日] 井上史彰 / 严圣逸 / 人民邮电出版社 / 2015-7 / 49.00

本书以团队开发中所必需的工具的导入方法和使用方法为核心,对团队开发的整体结构进行概括性的说明。内容涉及团队开发中发生的问题、版本管理系统、缺陷管理系统、持续集成、持续交付以及回归测试,并且对“为什么用那个工具”“为什么要这样使用”等开发现场常有的问题进行举例说明。 本书适合初次接手开发团队的项目经理,计划开始新项目的项目经理、Scrum Master,以及现有项目中返工、延期问题频发的开发人......一起来看看 《高效团队开发》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

html转js在线工具
html转js在线工具

html转js在线工具