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

栏目: JavaScript · 发布时间: 6年前

内容简介:今天看到了在 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

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

参考


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

查看所有标签

猜你喜欢:

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

计算机网络(第7版)

计算机网络(第7版)

谢希仁 / 电子工业出版社 / 2017-1 / 45.00

本书自1989年首次出版以来,曾于1994年、1999年、2003年、2008年和2013年分别出了修订版。在2006年本书通过了教育部的评审,被纳入普通高等教育“十一五”国家级规划教材;2008年出版的第5版获得了教育部2009年精品教材称号。2013年出版的第6版是“十二五”普通高等教育本科国家级规划教材。 目前2017年发行的第7版又在第6版的基础上进行了一些修订。 全书分为9章,比较......一起来看看 《计算机网络(第7版)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具