ES6学习教程之对象的扩展详解

概述

ES6 前，对象的属性名都是字符串。ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。ES6 引入了一种新的数据结构Map。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。ES6 引入了一种新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

属性名表示法

ES6允许字面量定义对象时，用表达式作为对象的属性名，即把表达式放在方括号内

const obj = {
  [name]: 'Tom',
  ['age']: 18
}

其中name变量和'age'字符串都被当作属性名，用方括号括起来。注意：表达式作为属性名时，要用到方括号。

方法的 name 属性

函数的name属性，返回该函数的函数名。对象方法也是函数，因此也有name属性。

const obj = {
  sayName() {
    console.log('My name is Tom')
  }
}

obj.sayName.name  // "sayName"

Object.assign()

Object.assign方法用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。

const obj1 = {
  name: 'Tom',
  age: 18
}
const obj2 = {
  gender: 'male',
  hometown: 'Beijing'
}
const obj3 = Object.assign({}, obj1, obj2)

console.log(obj3)
// {name: "Tom", age: 18, gender: "male", hometown: "Beijing"}

对象的扩展运算符

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

const obj1 = {
  name: 'Tom',
  age: 18
}
const obj2 = {
  gender: 'male',
  hometown: 'Beijing'
}
const obj3 = {
  ...obj1,
  ...obj2
}

console.log(obj3)
// {name: "Tom", age: 18, gender: "male", hometown: "Beijing"}

以上为ES6学习教程之对象的扩展详解完整攻略，其中包含了属性名表示法、方法的name属性、Object.assign()以及对象的扩展运算符的介绍和示例。