作者：米書林
參考文章：《菜鳥教程》、《 ECMAScript 6 入門》（阮一峰）

1.屬性的簡潔表示法

簡介：ES6允許對象的屬性直接寫變量，這時候?qū)傩悦亲兞棵?，屬性值是變量值?/p>

let name = "小明",
    age = 12;
let student = {name,age};
console.log(student);  // {name: "小明", age: 12}
// 相當(dāng)于
let student = {name:name,age:age};

變量的值發(fā)生改變不會影響到對象，即上面修改age = 13,student.age仍然等于12

2.方法的簡潔表示法

ES5中給對象定義方法，需要先定義一個函數(shù)，再把函數(shù)賦值給對象的屬性；ES6可以把函數(shù)聲明function去除，直接定義一個方法

let sex = "男"
let person = {
  name:"小明",
   age:12
}
let student = {
    ...person,
    sex,
    study(a){
        return `你好，我是${this.name}，今年${this.age}歲，我正在學(xué)習(xí)${a}`
    }
}
console.log(student);  // {name: "小明", age: 12, sex: "男", study: ?}

student.study("語文")    // "你好，我是小明，今年12歲，我正在學(xué)習(xí)語文"

// 等同于
let student = {
    name:"小明",
    age:12,
    sex:"男",
    study:function(a){
        return "你好，我是"+this.name+"，今年"+this.age+"歲，我正在學(xué)習(xí)"+a;
    }
}

如果是Generator 函數(shù)，則要在前面加一個星號

const obj = {
  * myGenerator() {
    yield 'hello world';
  }
};
//等同于
const obj = {
  myGenerator: function* () {
    yield 'hello world';
  }
};

用途

1.返回函數(shù)的結(jié)果

function f(x, y) {
  return {x, y};
}

// 等同于

function f(x, y) {
  return {x: x, y: y};
}

f(1, 2) // Object {x: 1, y: 2}

2.CommonJS 模塊輸出一組變量

let ms = {};

function getItem (key) {
  return key in ms ? ms[key] : null;
}

function setItem (key, value) {
  ms[key] = value;
}

function clear () {
  ms = {};
}

module.exports = { getItem, setItem, clear };

3.屬性名表達器

js屬性表達的方式

第一種:.
第二種:[""]

let obj = {name:"小明"};
obj.name;    //  "小明"
obj["name"]  // 小明

屬性名表達式

簡介:ES6允許用表達式作為屬性名，但是一定要將表達式放在方括號內(nèi)

const obj = {
 ["he"+"llo"](){
   return "Hi";
  }
}
obj.hello();  //"Hi"

let lastWord = 'last word';

const a = {
  'first word': 'hello',
  [lastWord]: 'world'
};

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

4.對象的拓展運算符

1.解構(gòu)賦值

基本用法

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 ,c:5};
console.log(z); //   a: 3, b: 4 ,c:5

注意事項：

1.等號右邊是一個對象

let { ...a } = null;  // 報錯
let { ...a } = true;  // {}
let { ...a } = undefined;  // 報錯
let { ...a } = NaN;   // {}
let { ...a } = 1;   // {}
let { ...a } = "12";   // {0: "1", 1: "2"}

2.解構(gòu)賦值必須是最后一個參數(shù)，否則會報錯。

let { ...x, y, z } = { a:0,x: 1, y: 2, z: 3}; // 句法錯誤 Rest element must be last element
let { x, ...y, ...z } = { a:0,x: 1, y: 2, z: 3}; // 句法錯誤  Rest element must be last element

3.解構(gòu)賦值的拷貝是淺拷貝

let obj = {name:"張三",hobby:{h1:"籃球",h2:"排球"}}
let {...obj1} = obj;
obj.hobby.h1 = "乒乓球";
obj1;
// {name: "張三", hobby: {h1: "乒乓球", h2: "排球"}}

4.擴展運算符的解構(gòu)賦值，不能復(fù)制繼承自原型對象的屬性

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

4.對象方法的name屬性

函數(shù)的name屬性，返回函數(shù)名。對象方法也是函數(shù)，因此也有name屬性

let obj = {
  name:"張三",
  smoking(){
    return `大家好,我是${this.name}，我不會抽煙`
    }
}
obj.smoking.name  // "smoking"

如果對象的方法使用了取值函數(shù)（getter）和存值函數(shù)（setter），則name屬性不是在該方法上面，而是該方法的屬性的描述對象的get和set屬性上面，返回值是方法名前加上get和set。

const obj = {
  get foo() {},
  set foo(x) {}
};

obj.foo.name
// TypeError: Cannot read property 'name' of undefined

const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');

descriptor.get.name // "get foo"
descriptor.set.name // "set foo"

有兩種特殊情況：bind方法創(chuàng)造的函數(shù)，name屬性返回bound加上原函數(shù)的名字；Function構(gòu)造函數(shù)創(chuàng)造的函數(shù)，name屬性返回anonymous。

(new Function()).name // "anonymous"

var doSomething = function() {
  // ...
};
doSomething.bind().name // "bound doSomething"

如果對象的方法是一個 Symbol 值，那么name屬性返回的是這個Symbol 值的描述。

const key1 = Symbol('description');
const key2 = Symbol();
let obj = {
  [key1]() {},
  [key2]() {},
};
obj[key1].name // "[description]"
obj[key2].name // 

屬性的遍歷

（1）for...in

遍歷對象自身的和繼承的可枚舉屬性（不含 Symbol 屬性)的key值

（2）Object.keys(obj)

遍歷對象自身的（不含繼承的）所有可枚舉屬性（不含 Symbol 屬性）的鍵名，返回一個數(shù)組

（3）Object.getOwnPropertyNames(obj)

遍歷對象自身的所有屬性（不含 Symbol 屬性，但是包括不可枚舉屬性）的鍵名，返回一個數(shù)組

（4）Object.getOwnPropertySymbols(obj)

遍歷對象自身的所有 Symbol 屬性的鍵名，返回一個數(shù)組

（5）Reflect.ownKeys(obj)

遍歷對象自身的所有鍵名，不管鍵名是 Symbol 或字符串，也不管是否可枚舉，返回一個數(shù)組。

let sy = Symbol("h");
let obj = {name:"abc",[sy]:"dd",arr:[1,2,3],};

// for...in遍歷
for(key in obj){
  console.log(key);
}
// name
// arr

Object.keys(obj)
// ["name", "arr"]

Object.getOwnPropertyNames(obj)
// ["name", "arr"]

Object.getOwnPropertySymbols(obj)
// [Symbol(h)]

Reflect.ownKeys(obj)
// ["name", "arr", Symbol(h)]

對象的super關(guān)鍵字

this關(guān)鍵字指向函數(shù)所在的當(dāng)前對象，super關(guān)鍵字指向當(dāng)前對象的原型對象

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

super關(guān)鍵字表示原型對象時，只能用在對象的簡寫方法之中，用在其他地方都會報錯。

// 報錯
const obj = {
  foo: super.foo
}

// 報錯
const obj = {
  foo: () => super.foo
}

// 報錯
const obj = {
  foo: function () {
    return super.foo
  }
}