文档章节

ES6之Spread Operater拷贝对象

Fundebug
 Fundebug
发布于 2017/07/20 14:09
字数 800
阅读 18
收藏 0

译者按: 对象拷贝和合并使用展开运算符(Spread Operator)很方便!

原文: Master Javascript’s New, Cutting-Edge Object Spread Operator

译者: Fundebug

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

在Node v8.0.0中引入了对象展开运算符(object spread operator)(注:需要配合harmony标签使用),在此我用一篇博客来深入介绍一下。前端使用该语法需要引入babel 插件

展开运算符(Spread Operator)

展开运算符将所有可枚举的属性从一个对象展开到另一个对象去。我们来举一个例子:

const obj1 = { c: 3, d: 4 };
const obj2 = { a: 1, b: 2, ...obj1 };
console.log(obj2); // -> { a: 1, b: 2, c: 3, d: 4 }

obj1的所有属性被展开到obj2中去。

一个很好的使用场景就是深度拷贝一个对象:

const obj = { a: 123, b: 456 };
const objCopy = { ...obj };
console.log(objCopy); // -> { a: 123, b: 456 }

另一个使用场景是合并多个对象:

const obj1 = { a: 111, b: 222 };
const obj2 = { c: 333, d: 444 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // -> { a: 111, b: 222, c: 333, d: 444 }

注意: 如果属性值是一个对象,那么只会生成一个指向该对象的引用,而不会深度拷贝。也就是说,展开运算符不会递归地深度拷贝所有属性。并且,只有可枚举属性会被拷贝,原型链不会被拷贝。

属性冲突

当两个对象中有相同的属性名称的时候,对象的顺序其关键作用。后面对象的值被赋值给新建的对象。

const obj1 = { a: 'abc', b: 'def' };
const obj2 = { b: 123, c: 456, ...obj1};
console.log(obj2); // -> { a: 'abc', b: 'def', c: 456 }

如果我们先展开obj1:

const obj1 = { a: 'abc', b: 'def' };
const obj2 = { ...obj1, b: 123, c: 456 };
console.log(obj2); // -> { a: 'abc', b: 123, c: 456 }

对象默认值设置

对象属性值重写使对象默认赋值变得简单。比如我们想要制作一款应用需要用户输入基本信息,如果用户没有填写某些信息,我们会将默认值放置到那些属性上。

const enteredInfo = {
    name: 'John Doe',
    phoneNumber: '123-456-7890'
};
const defaultInfo = { 
    name: 'N/A',
    address: null,
    phoneNumber: null,
    email: null
};
const completeUserInfo = { ...defaultInfo, ...enteredInfo };

剩余操作符(Rest Operator)

既然讲解了对象展开运算符,那么也讲一讲剩余操作符。为了理解剩余操作符, 我们需要首先理解 ES6的对象解构

const obj1 = { 
    a: 'abc',
    b: 'def',
    c: 'ghi',
    d: 'jkl'
};
const { a, b } = obj1;
console.log(a, b); // -> 'abc', 'def'

通过对象解构,我们获取了obj1对象中的属性ab

现在,我们来使用剩余操作符。

const obj1 = { 
    a: 'abc',
    b: 'def',
    c: 'ghi',
    d: 'jkl'
};
const { a, b, ...remainingProperties } = obj1;
console.log(a, b); // -> 'abc', 'def'
console.log(remainingProperties); // -> { c: 'ghi', d: 'jkl' }

obj1中余下的属性值被打包起来构造一个新的对象赋值给了remainingProperties

版权声明: 转载时请注明作者Fundebug以及本文地址: https://blog.fundebug.com/2017/07/19/master_object_spread_operator/

© 著作权归作者所有

上一篇: JavaScript函数重载
下一篇: 10个JavaScript难点
Fundebug
粉丝 12
博文 305
码字总数 313608
作品 0
厦门
私信 提问
ES9已经来了 Are you ready?

ES9 前言 改篇文章主要是介绍了ES9新加的一些新特性。 1. 异步迭代 在的某些时刻,你可能尝试在同步循环中调用异步函数。例如: 这段代码不会正常运行,下面这段同样也不会: 这段代码中,循...

霖呆呆
2018/08/07
0
0
[译] Object.assign 和 Object Spread 之争, 用谁?

原文链接 thecodebarbarian.com/object-assi… 在 2018 年 Object Rest/Spread Proposal 达到了 stage 4,这意味着在未来它会将入到 ECMAScript 标准中。它也被加入到Node LTS. Node.js 8 以...

蓝色的秋风
02/08
0
0
ES6中常用的10个新特性讲解

ECMAScript 6(ES6) 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。 ...

木亦Sam
2018/06/10
0
0
Es6学习笔记(一)

1、关于let -- let变量必须先声明,后使用 -- 在同一作用域,let不能重复声明 -- let增加了块级作用域,从而从某种意义上取消了自我执行函数 2、关于const -- const只声明一个常量,一旦声明...

小旭依然
2017/05/17
0
0
【译】ES2018 新特性:Rest/Spread 特性

Sebastian Markbåge 提出的 Rest/Spread Properties 提案包括两部分: 用于对象解构的 rest 操作符(...)。目前,这个操作符只能在数组解构和参数定义中使用 对象字面量中的 spread 操作符(...

mogic
2018/07/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PhotoShop 色调:理解直方图/RGB通道信息

一、直方图:图表的形式,展示图像像素分布的情况 1.平均值:表示平均亮度 2.标准偏差值:表示亮度值范围内的中间值 3.像素: 表示用于计算直方图的像素总数 4.色阶:显示指针下面的区域亮度...

东方墨天
25分钟前
5
0
wildfly(JBoss AS)应用服务器快速入门

什么是wildfly JBoss AS 从8版本起名为wildfly。Wildfly是一个开源的基于JavaEE的轻量级应用服务器。可以在任何商业应用中免费使用。 WildFly是一个灵活的、轻量的、强大管理能力的应用程序服...

程序新视界
49分钟前
4
0
Java集合类常见面试知识点总结

Java集合类学习总结 这篇总结是基于之前博客内容的一个整理和回顾。 这里先简单地总结一下,更多详细内容请参考我的专栏:深入浅出Java核心技术 https://blog.csdn.net/column/details/21930...

Java技术江湖
52分钟前
6
0
怎么用for循环打出爱心

先上效果图: 这是用*组成的爱心,下面讲讲思路: 首先这个图形可以拆分成三部分:第一部分是上面三行的两个梯形,第二部分是中间三行的长方形,第三部分是最下面的倒三角形。 其实图形拆分好...

INEVITABLE
58分钟前
4
0
用HttpUrlConnection伪造成HttpClient

https://www.jianshu.com/p/27ad06cc39d2

shzwork
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部