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)，遍历对象自身的所有属性，返回键名数组，包括不可枚举属性。