• 简介
  • 正文
  • 思考

    简介

    ES6对于对象的扩展不多，只有一些常用的简洁写法和一些新增API

    在ES8中新增了对象的扩展运算符 ... 不过我们可以在Babel转译后使用它

    正文

    ES6中，对象的属性可以使用简洁表示法来简写

    1. let foo = 'bar'
    3. let baz = {foo}
    4. // 等同于
    5. let baz = {foo: foo}
    1. let obj = {
    2.   method () {}
    3. }
    4. // 等同于
    5. let obj = {
    6.   method: () => {}
    7. }

    上面例子表明，在对象中，可以直接写变量，属性名为变量名, 属性值为变量的值，方法也同理

    ES6中，对象的属性名可以使用表达式

    1. let obj = {
    2.   ['a' + 'bc']: 123,
    3.   ['h' + 'ello']() {
    4.     return 'hello world!';
    5.   }
    6. }
    7. console.log(obj.abc)
    8. // 123
    9. console.log(obj.hello())
    10. // hello world!

    很好理解，js解析器会先执行属性名表达式，得到的结果作为真正的属性名，这个表达式必须用方括号包裹

    ES6对象中新增了一些API，正常工作中用到的很少，这里只介绍两个最常见的

    Object.assign 方法用于对象的合并，接收的参数是任意个对象，会依次把第2，3，4…个对象

    合并到第一个对象上，如果有重复的属性名，后来的会覆盖先前的。

    1. let target = { a: 1, b: 1 }
    2. let source1 = { b: 2, c: 2 }
    3. let source2 = { c: 3 }
    5. Object.assign(target, source1, source2);
    6. target // {a:1, b:2, c:3}

    Object.is 方法用于判断两个值是否相等

    以前我们判断两个值相等可以用==和===

    不过==会发生隐式转换，===无法判断NaN

    Object.is与===不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

    1. +0 === -0 //true
    2. NaN === NaN // false
    4. Object.is(+0, -0) // false
    5. Object.is(NaN, NaN) // true

    ES8中将会支持对象的扩展运算符，这是一个还未发布的版本

    不过我们早已可以使用Babel转译来使用它，并且在工作中也经常用到

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

    注意这段代码无法在浏览器运行，目前没有浏览器支持ES8

    对象的扩展运算符通常和解构赋值配合使用，关于解构赋值，我们会在后面的章节介绍

    思考

    这部分内容希望你都可以手动敲一遍，独立思考

    1. const keyA = {a: 1}
    2. const keyB = {b: 2}
    4. const obj = {
    5.   [keyA]: 'aaa',
    6.   [keyB]: 'bbb'
    7. }

    输出一下obj，并试着解释这个结果

    Object.assign可以拷贝原型链上继承来的属性吗？可以拷贝不可枚举的属性吗？

    for...in可以遍历原型链上继承来的属性吗？可以遍历不可枚举的属性吗？