ES6学习 - 对象的扩展运算符

这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战

前言

前两篇文章对 Proxy 的使用进行了学习,以及对对象的扩展进行了初步学习-对象属性的简写. 本文继续来学习 ES6 的重要的知识点: 关于对 对象的扩展运算符

熟练使用 ES6 及更高版本对于我们在项目开发中可提高开发效率! 前面文章学习了 JavaScript 中操作数组的一些方法(Array.splice()/slice()/map()/reduce()等高阶函数), JavaScript 并不完美但是不影响其运行, 这里学习其中的一些神奇"bug"直达列表

ES6 - 对象的扩展

ES6 对对象扩展了许多方法, 这些方法不仅方便了我们书写, 有对有些数据处理进行了优化, 更加便捷地方便我们处理数据逻辑等.

对象的扩展运算符

在前文学习过的 解构赋值 中, 也是ES6 对于数组的扩展, 类似 "扩展运算符（...）"也是特别方便.

如下: 数组也是特殊的对象, 所以对象的扩展运算符也是可以用于数组的:

let arrToObj = { ...['str1', 'str2', 'str3'] };
arrToObj
// arrToObj 则是通过数组下标作为键名, 数组元素的值作为键值对 的对象
// {0: "str1", 1: "str2", 2: "str3"}

对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

let aa = { a: 1, b: 2 };
let newaa = { ...aa };

newaa // { a: 1, b: 2 }

// 如果扩展运算符后面是一个空对象，则没有任何效果。 如果后面跟的不是对象, 将会转换为对象

{...{}, a: 1 } // { a: 1 }

{...1} // {}

对象的扩展运算符的应用:

1. 可以用来修改现有对象部分的属性

   新建一个 newPerson 对象自定义了 name属性, 其他属性全部复制自 person 对象。

let newPerson = {
  ...person,
  name: 'New Name' // 会重写(覆盖)person 内部的 name 书写

2. 对象的扩展运算符等同于使用Object.assign()方法, 书写更简洁

如下只是拷贝了对象实例的属性，如果想完整克隆一个对象，还拷贝对象原型的属性，可以采用下面的写法。

let objClone = { ...obj };
// 同下
let objClone = Object.assign({}, obj);

3. 可以用来合并两个对象

let xy = { ...x, ...y };

// 同下
let xy = Object.assign({}, x, y);

当然扩展运算符还有很多功能, 需要我们慢慢学习应用理解消化.

相关阅读文章列表

• JavaScript 学习-函数剩余参数
• JS 小问题学习-函数可选参数
• JS 学习-for 循环
• JS 不完美亦可运行-自动加分号(;)问题、
• JS 不完美亦可运行-数组对象相加问题、
• JS 并不完美之箭头函数相关(二)、
• JS 并不完美~(一)浮点数
• JavaScript 高阶函数(一)
• JavaScript 高阶函数之 reduce
• 数组扁平化 Array.prototype.flat()
• 灵活操作数组数据 slice()
• 灵活操作数组-数组中间插入数据 splice()

学习 ES6系列:

1. ES6-解构赋值
2. ES6-数组扩展方法-find()/findIndex()
3. ES6-数组扩展方法-Array.from()处理数组
4. ES6 学习理解-Array 扩展方法 includes()
5. ES6 学习理解-Array 扩展 sort()排序的稳定性
6. ES6 学习理解-Proxy(一)
7. ES6 学习理解-Proxy的使用(二)
8. ES6 对对象的扩展方法-属性简写

学习参考文档

• MDN | ES6-Object