• 简介
  • 正文
  • 思考

    简介

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

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

    正文

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

    1. let foo = 'bar'
    2. let baz = {foo}
    3. // 等同于
    4. 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 }
    4. Object.assign(target, source1, source2);
    5. target // {a:1, b:2, c:3}

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

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

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

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

    1. +0 === -0 //true
    2. NaN === NaN // false
    3. Object.is(+0, -0) // false
    4. 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}
    3. const obj = {
    4. [keyA]: 'aaa',
    5. [keyB]: 'bbb'
    6. }

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


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

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