ES6 新特性之对象的常用拓展

属性的简洁表示法

ES6 允许直接写入变量和函数,作为对象的属性和方法

let birth = '2000/01/01'
const person = {
  name: '张三',
  //等同于birth: birth
  birth,
  // 等同于hello: function ()...
  hello () { console.log('我的名字是', this.name) }
}

CommonJS 模块输出一组变量,也会用到简洁写法

function funA () {}
function funB () {}
function funC () {}
module.exports = { funA, funB, funC }
// 等同于
module.exports = {
  funA: funA,
  funB: funB,
  funC: funC
}

属性名表达式

ES5 只能通过下面几种方式定义对象属性

// 直接用标识符作为属性名
obj.foo = true

// 用表达式作为属性名
obj['a' + 'bc'] = 123

// 字面量
var obj = { foo: true, abc: 123 }

ES6 允许字面量定义对象时,用表达式作为对象属性

let propKey = 'foo'
let obj = {
  [propKey]: 'hello',
  ['a' + 'bc']: 123
}
obj[propKey] // hello
obj['foo'] // hello
obj['abc'] // 123

表达式还可以用于定义方法名

let obj = {
  ['h' + 'ello'] () {
    return 'hi'
  }
}
obj.hello() // hi

注意,属性名表达式与简洁表示法,不能同时使用,否则报错

对象的扩展运算符

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性

let z = { a: 3, b: 4 }
let n = { ...z }
n // { a: 3, b: 4 }

// 等同于
let n = Object.assign({}, z)

上面的例子只是拷贝了对象实例的属性,不会拷贝对象原型的属性

扩展运算符可以用于合并两个对象

let ab = { ...a, ...b }
// 等同于
let ab = Object.assign({}, a, b)

如果对象中使用了拓展运算符,前面的属性会被后面覆盖掉

let a = { x: 1, y: 2 }
let b = { y: 3, z: 4 }
let c = { w: 5, x: 6, ...a }
c // { w: 5, x: 1, y: 2 }
let d = { ...b, x: 7, y: 8 }
d // { y: 8, z: 4, x: 7 }
let f = { ...a, ...b }
f // { x: 1, y: 3, z: 4 }

扩展运算符结合解构赋值

对象的解构赋值用于从一个对象取值

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }
x // 1
y // 2
z // { a: 3, b: 4 }

解构赋值必须是最后一个参数,否则会报错

let { ...x, y, z } = obj // 句法错误
let { x, ...y, ...z } = obj // 句法错误

如果一个键的值是复合类型的值(数组、对象、函数)、那么解构赋值拷贝的是这个值的引用

let obj = { a: { b: 1 } }
let { ...x } = obj
obj.a.b = 2
x.a.b // 2

扩展运算符的解构赋值,不能复制继承自原型对象的属性

let o1 = { a: 1 }
let o2 = { b: 2 }
o2.__proto__ = o1
let { ...o3 } = o2
o3 // { b: 2 }

本文转载自 http://es6.ruanyifeng.com/#docs/object 并进行整理

除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1032.html
鄂ICP备17018604号-1  鄂公网安备42060702000030号