ES6中對象的實用語法

ES6對象

對象極簡表達

主要應用在對象的屬性和方法中

使用時，把握好下列規則，即變量表達屬性名，屬性值為對應的變量值。

這里變量是提前聲明，賦值的。

var hello = 'hello world'

const test = {hello}
console.log(test)
// {hello: "hello world"}

對象內方法的簡寫，這種寫法vue中很常見啦！

const o = {
  method() {
    return "Hello!";
  }
};

// 等同於

const o = {
  method: function() {
    return "Hello!";
  }
};

使用場景

函數返回值

function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y}; // 關鍵
}

getPoint()
// {x:1, y:10}

function processInput(input) {
  return { left, right, top, bottom };
}

const { left, right } = processInput(input);

我們在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 }; // 關鍵
// 等同於
module.exports = {
  getItem: getItem,
  setItem: setItem,
  clear: clear
};

module.exports的寫法就是vue中常見的寫法。

屬性的可枚舉性和對象遍歷

enumberable

對象中的每個屬性都有一個描述對象（descriptor），來控制這個屬性的行為。

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//{
//    configurable: true
//    enumerable: true
//    value: 123
//    writable: true
//}

enumerable即為可枚舉性，如果該屬性為false，某些API操作會忽略這個對象屬性！目前有四種操作會忽略對象自身的不可枚舉屬性：

• for...in循環：只遍歷對象自身的和++繼承++的可枚舉的屬性。
• Object.keys()：返回對象自身的所有可枚舉的屬性的鍵名，不包含繼承的；
• JSON.stringify()：只串行化對象自身的可枚舉的屬性。
• Object.assign()： 忽略enumerable為false的屬性，只拷貝對象自身的可枚舉的屬性。

理解

有意思的是，JS設計了可枚舉屬性（enumberable）的出發點在於使某些在原型鏈上繼承下來的屬性或方法不會被遍歷到，因為大多數時候我們只關心對象自身的屬性。比如你遍歷任何一個對象或數組都不會打印出length和頭String和其他一大票。

相關API

• Object.getOwnPropertyDescriptor(obj, 'foo')：返回對象描述符對象
• o.propertyIsEnumerable('a');：某個對象的屬性是否可枚舉
• Object.defineProperty(o, "a", {...屬性描述符});，在對象上定義或修改某個屬性。值得注意的是，定義Boolean的屬性描述符默認值都是false！
• Object.getOwnPropertyNames(obj)，遍歷對象自身的所有屬性，返回鍵名數組，包括不可枚舉屬性。