ECMAScript 6（13）对象的扩展

妖狐艹你老母 2021-09-19 15:30 304阅读 0赞

**目录**

1.  简要概括

2.  简洁写法

2.1  属性名缩写, 与函数缩写

2.2  setter和getter的简洁写法

3.  属性名表达式

3.1  表达式作为属性名

3.2  不能使用

3.3  不要用对象作属性的key

4.  name 属性

5.  属性的可枚举性

5.1  设置可枚举

5.2  查看是否可枚举

6.  属性的遍历

7. super 关键字

8.  扩展运算符 ...

8.1  解构赋值 (...在等号左边)

8.2  取出可遍历属性 (...在等号右边)

--------------------

## 1.  简要概括 ##

1.  属性名, 以及属性的函数简洁的写法,  代码看起清爽干净。
2.  属性名可以用变量, 字符串拼接 .(属性名不能是对象)
3.  属性中函数也有name属性, 返回函数名(方法名), 同时函数中 get, set 有更简洁的写法
4.  当属性在原型链上，或者不可枚举时，会被很多方法忽视
5.  super 关键字指向当前对象的原型对象
6.  扩展运算符…和解构赋值结合使用, 便于对象赋值

## 2.  简洁写法 ##

### 2.1  属性名缩写, 与函数缩写 ###

属性名的缩写

var foo = "abc";
    var test = [];
    var bar = {
        foo, test
    }
    //相当于
    var bar = {
        foo: foo,
        test: test
    }

方法的缩写

const o = {
      method() {
        return "Hello!";
      }
    };
    
    // 等同于
    
    const o = {
      method: function() {
        return "Hello!";
      }
    };

ps :   如果不是属性方法, 简写会报错, 就是说这种简写只能写在对象中 .

###  2.2  setter和getter的简洁写法 ###

等价于

对比一下, 上面的简洁写法不要太爽 ~

## 3.  属性名表达式 ##

### 3.1  表达式作为属性名 ###

这种方式要把表达式放在括号里面

###  3.2  不能使用 ###

属性名表达式与简洁表示法，不能同时使用，会报错

// 报错
    const foo = 'bar';
    const baz = { [foo] };  // 这种写法就是 const baz = { "bar": ? }; 只有属性名是怎么回事

### 3.3  不要用对象作属性的key ###

原因是会被toString隐式转换为字符串，默认情况下，隐式转换后的结果为：字符串 `"[object Object]"`

const keyA = {a: 1};
    const keyB = {b: 2};
    
    const myObject = {
      [keyA]: 'valueA',
      [keyB]: 'valueB'
    };
    
    myObject // Object {[object Object]: "valueB"}

上面代码中，`[keyA]`和`[keyB]`得到的都是`[object Object]`，所以`[keyB]`会把`[keyA]`覆盖掉，而`myObject`最后只有一个`[object Object]`属性。

## 4.  name 属性 ##

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

var foo = {
        bar(){}
    }
    foo.bar.name;   //"bar"，函数名

## 5.  属性的可枚举性 ##

### 5.1  设置可枚举 ###

> Object.defineProperty(obj, prop, descriptor)  
> Object.defineProperties(obj, props)

第一个设置单个属性的，第二个可以同时设置多个属性。

通过设置属性的enumerable属性来设置其是否可枚举，true可枚举，false不可枚举。

在未锁定前可以设置，锁定后不可修改（并且会报错）

### 5.2  查看是否可枚举 ###

> Object.getOwnPropertyDescriptor(obj, prop)  
> Object.getOwnPropertyDescriptors(obj) //需要es7，IE11不支持

## 6.  属性的遍历 ##

遍历可被枚举的属性, 有以下方法可以表示

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>原型链继承 (原型链上的属性)</th> 
   <th>call继承 (在实例上的属性)</th> 
   <th>普通属性,但enumerable为false</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>for...in</td> 
   <td>显示</td> 
   <td>显示</td> 
   <td>不显示</td> 
  </tr> 
  <tr> 
   <td>Object.keys()</td> 
   <td>不显示</td> 
   <td>显示</td> 
   <td>不显示</td> 
  </tr> 
  <tr> 
   <td>JSON.stringify()</td> 
   <td>不显示</td> 
   <td>显示</td> 
   <td>不显示</td> 
  </tr> 
  <tr> 
   <td>Object.getOwnPropertyNames()</td> 
   <td>不显示</td> 
   <td>显示</td> 
   <td>显示</td> 
  </tr> 
  <tr> 
   <td>Reflect.ownKeys()</td> 
   <td>不显示</td> 
   <td>显示</td> 
   <td>显示</td> 
  </tr> 
  <tr> 
   <td>Object.getOwnPropertySymbols()</td> 
   <td>不显示</td> 
   <td>不显示</td> 
   <td>不显示</td> 
  </tr> 
 </tbody> 
</table>

总结一下 :

<table> 
 <tbody> 
  <tr> 
   <td>要求</td> 
   <td>方法</td> 
  </tr> 
  <tr> 
   <td>普通的情况</td> 
   <td>Object.keys()</td> 
  </tr> 
  <tr> 
   <td>本身 + 原型链</td> 
   <td> <p>for...in</p> </td> 
  </tr> 
  <tr> 
   <td>本身, 且包括枚举属性被设置为false 的key</td> 
   <td>Object.getOwnPropertyNames()<br> Reflect.ownKeys()</td> 
  </tr> 
  <tr> 
   <td>兼容低版本IE</td> 
   <td>for ... in</td> 
  </tr> 
  <tr> 
   <td>只获取不能枚举的属性</td> 
   <td>Object.getOwnPropertyNames()获取全部<br> 再排除Object.keys()</td> 
  </tr> 
  <tr> 
   <td>只获取原型链上(不包括自己)</td> 
   <td>for..in先获取<br> 再排除掉普通的</td> 
  </tr> 
  <tr> 
   <td>原型上包括不可枚举的</td> 
   <td>手动递归__proto__属性<br> 然后每一层Object.getOwnPropertyNames()获取</td> 
  </tr> 
  <tr> 
   <td>原型链上, 只要不可枚举的</td> 
   <td>手动递归__proto__属性<br> 然后每一层先获取全部再排除普通</td> 
  </tr> 
 </tbody> 
</table>

只是检查属性是否在对象上(不检查原型链)

> obj.hasOwnProperty(key);
> 
> var obj = \{a: 1\};  
> obj.hasOwnProperty("a");    //true  
> obj.hasOwnProperty("b");    //false

## 7. super 关键字 ##

> this 关键字总是指向函数所在的当前对象，
> 
> ES6 又新增了另一个类似的 关键字`super`，指向当前对象的原型对象。

>     Object.setPrototypeOf(obj, prototype)
> 
>   obj : 要设置其原型的对象
> 
>   prototype : 该对象的新原型 ( 一个对象 或 null )

再看阮老师的另一个demo 帮助理解

## 8.  扩展运算符 ... ##

### 8.1  解构赋值 (...在等号左边) ###

简单说, 就是指在解构赋值时，让所有未被辅助的对象，被解构赋值到某个属性上。

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

** 注意 :**

1. 右边是`undefined`或`null`不能赋值