屬性的見(jiàn)解表示法

ES6 允許直接寫入變量和函數(shù)，作為對(duì)象的屬性和方法。這樣的書寫更加簡(jiǎn)潔。

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

上面代碼表明，ES6 允許在對(duì)象之中，直接寫變量。這時(shí)，屬性名為變量名, 屬性值為變量的值。下面是另一個(gè)例子。

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

// 等同于

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

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

除了屬性簡(jiǎn)寫，方法也可以簡(jiǎn)寫。

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

// 等同于

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

屬性名表達(dá)式

JavaScript 定義對(duì)象的屬性，有兩種方法。

// 方法一
obj.foo = true;

// 方法二
obj['a' + 'bc'] = 123;

ES6 允許字面量定義對(duì)象時(shí)，用方法二（表達(dá)式）作為對(duì)象的屬性名，即把表達(dá)式放在方括號(hào)內(nèi)。

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

方法的name屬性

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

const person = {
  sayName() {
    console.log('hello!');
  },
};

person.sayName.name   // "sayName"

Objects.is()

Object.is用來(lái)表示兩個(gè)值是否嚴(yán)格相等。與嚴(yán)格運(yùn)算符（===）的行為基本一致。

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

不同之處只有兩個(gè)：一是+0不等于-0，二是NaN等于自身。

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

ES5 可以通過(guò)下面的代碼，部署Object.is。

Object.defineProperty(Object, 'is', {
  value: function(x, y) {
    if (x === y) {
      // 針對(duì)+0 不等于 -0的情況
      return x !== 0 || 1 / x === 1 / y;
    }
    // 針對(duì)NaN的情況
    return x !== x && y !== y;
  },
  configurable: true,
  enumerable: false,
  writable: true
});

Object.assgin()

Object.assgin方法用來(lái)將對(duì)象（source）的所有可枚舉屬性復(fù)制到目標(biāo)對(duì)象（target）。它至少需要兩個(gè)對(duì)象作為參數(shù)，第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面的參數(shù)都是源對(duì)象。

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

其他類型的值（即數(shù)值、字符串和布爾值）不在首參數(shù)，也不會(huì)報(bào)錯(cuò)。但是，除了字符串會(huì)以數(shù)組形式，拷貝入目標(biāo)對(duì)象，其他值都不會(huì)產(chǎn)生效果。因?yàn)橹挥凶址先肽繕?biāo)對(duì)象（以字符數(shù)組的形式），數(shù)值和布爾值都會(huì)被忽略。這是因?yàn)橹挥凶址陌b對(duì)象，會(huì)產(chǎn)生可枚舉屬性。

//有參數(shù)不為對(duì)象的情況
const target = { a: 0 };
const source1 = [1, 2];
const source2 = { c: 3 };

Object.assign(target, source1, source2);
console.log(target) // { '0': 1, '1': 2, a: 0, c: 3 }

Object(true) // {[[PrimitiveValue]]: true}
Object(10)  //  {[[PrimitiveValue]]: 10}
Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

如果既有數(shù)組又有字符串，則后面的會(huì)覆蓋前面的值

const v1 = ['h', 'e', 'l', 'l', 'o'];
const v2 = true;
const v3 = 10;
const v4 = 'abc';

const obj = Object.assign({}, v1, v2, v3, v4);
console.log(obj); // { '0': 'a', '1': 'b', '2': 'c', '3': 'l', '4': 'o' }

如果只有一個(gè)參數(shù)，Object.assign會(huì)直接返回該參數(shù)。

const target = { a: 0 };

Object.assign(target);
console.log(target) // { a: 0 }

如果目標(biāo)對(duì)象與源對(duì)象有同名屬性，或多個(gè)源對(duì)象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性。

const target = { a: 1, b: 1 };
const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

如果該參數(shù)不是對(duì)象，則會(huì)先轉(zhuǎn)成對(duì)象，然后返回。

由于undefined和null不能轉(zhuǎn)為對(duì)象，所以如果他們作為參數(shù)就會(huì)報(bào)錯(cuò)

Object.assign(undefined) // TypeError: Cannot convert undefined or null to object
Object.assign(null) // TypeError: Cannot convert undefined or null to object

Object.assign只復(fù)制自身屬性，不可枚舉的屬性（enumerable）和繼承的屬性不會(huì)被復(fù)制。

Object.assign({b: 'c'},
  Object.defineProperty({}, 'invisible', {
    enumerable: false,
    value: 'hello'
  })
)
// { b: 'c' }

上面的代碼，Object.assign要復(fù)制的對(duì)象只有一個(gè)不可枚舉的屬性invisible，這個(gè)屬性并沒(méi)有被復(fù)制進(jìn)去。
屬性名未Symbol值得屬性，也會(huì)被Object.assign復(fù)制。

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }

常見(jiàn)用途

（1）為對(duì)象添加屬性

class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}

上面方法通過(guò)Object.assign方法，將x屬性和y屬性添加到Point類的對(duì)象實(shí)例。

（2）為對(duì)象添加方法

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});

// 等同于下面的寫法
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};

上面代碼使用了對(duì)象屬性的簡(jiǎn)潔表示法，直接將兩個(gè)函數(shù)放在大括號(hào)中，再使用assign方法添加到SomeClass.prototype之中。

（3）克隆對(duì)象

function clone(origin) {
  return Object.assign({}, origin);
}

上面代碼將原始對(duì)象拷貝到一個(gè)空對(duì)象，就得到了原始對(duì)象的克隆。

不過(guò)，采用這種方法克隆，只能克隆原始對(duì)象自身的值，不能克隆它繼承的值。如果想要保持繼承鏈，可以采用下面的代碼。

function clone(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}

（4）合并多個(gè)對(duì)象

將多個(gè)對(duì)象合并到某個(gè)對(duì)象。

const merge =
  (target, ...sources) => Object.assign(target, ...sources);

如果希望合并后返回一個(gè)新對(duì)象，可以改寫上面函數(shù)，對(duì)一個(gè)空對(duì)象合并。

const merge =
  (...sources) => Object.assign({}, ...sources);

（5）為屬性指定默認(rèn)值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};

function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

上面代碼中，DEFAULTS對(duì)象是默認(rèn)值，options對(duì)象是用戶提供的參數(shù)。Object.assign方法將DEFAULTS和options合并成一個(gè)新對(duì)象，如果兩者有同名屬性，則option的屬性值會(huì)覆蓋DEFAULTS的屬性值。

注意，由于存在淺拷貝的問(wèn)題，DEFAULTS對(duì)象和options對(duì)象的所有屬性的值，最好都是簡(jiǎn)單類型，不要指向另一個(gè)對(duì)象。否則，DEFAULTS對(duì)象的該屬性很可能不起作用。

const DEFAULTS = {
  url: {
    host: 'example.com',
    port: 7070
  },
};

processContent({ url: {port: 8000} })
// {
//   url: {port: 8000}
// }

上面代碼的原意是將url.port改成 8000，url.host不變。實(shí)際結(jié)果卻是options.url覆蓋掉DEFAULTS.url，所以u(píng)rl.host就不存在了。

屬性的可枚舉性

可枚舉性

對(duì)象的每個(gè)屬性都有一個(gè)描述對(duì)象（Descriptor），用來(lái)控制該屬性的行為。Object.getOwnPropertyDescriptor方法可以獲取該屬性的描述對(duì)象。該方法的引入目的，主要是為了解決Object.assign()無(wú)法正確拷貝get屬性和set屬性的問(wèn)題。

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 123, // value—表示屬性的值
//    writable: true, // writable—表示屬性的可書寫性
//    enumerable: true, // enumerable—表示屬性是否可枚舉。
//    configurable: true // configurable—表示屬性是否可編輯，默認(rèn)值為true，編輯內(nèi)容包括（1）能否使用delete刪除，（2）能否修改屬性特性，（3）能否修改訪問(wèn)器屬性
//  }

如果描述對(duì)象的enumerable屬性為false，就表示某些操作會(huì)忽略當(dāng)前屬性。

ES5有3個(gè)操作會(huì)忽略enumerable為false的屬性。

for...in循環(huán)：只遍歷對(duì)象自身的和繼承的可枚舉的屬性。
Object.keys()：返回對(duì)象自身的所有可枚舉的屬性的鍵名。
JSON.stringify()：只串行化對(duì)象自身的可枚舉的屬性。

ES6有1個(gè)操作會(huì)忽略enumerable為false的屬性。

Object.assign()： 忽略enumerable為false的屬性，只拷貝對(duì)象自身的可枚舉的屬性。

只有for...in會(huì)返回繼承的屬性，其他三個(gè)方法都會(huì)忽略繼承的屬性，只處理對(duì)象自身的屬性。實(shí)際上，引入“可枚舉”（enumerable）這個(gè)概念的最初目的，就是讓某些屬性可以規(guī)避掉for...in操作，不然所有內(nèi)部屬性和方法都會(huì)被遍歷到。比如，對(duì)象原型的toString方法，以及數(shù)組的length屬性，就通過(guò)“可枚舉性”，從而避免被for...in遍歷到。所以，盡量不要用for...in循環(huán)，而用Object.keys()代替。

屬性的遍歷

ES6 一共有 5 種方法可以遍歷對(duì)象的屬性。

（1）for...in

for...in循環(huán)遍歷對(duì)象自身的和繼承的可枚舉屬性（不含 Symbol 屬性）。

（2）Object.keys(obj)

Object.keys返回一個(gè)數(shù)組，包括對(duì)象自身的（不含繼承的）所有可枚舉屬性（不含 Symbol 屬性）的鍵名。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一個(gè)數(shù)組，包含對(duì)象自身的所有屬性（不含 Symbol 屬性，但是包括不可枚舉屬性）的鍵名。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一個(gè)數(shù)組，包含對(duì)象自身的所有 Symbol 屬性的鍵名。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一個(gè)數(shù)組，包含對(duì)象自身的所有鍵名，不管鍵名是 Symbol 或字符串，也不管是否可枚舉。

以上的 5 種方法遍歷對(duì)象的鍵名，都遵守同樣的屬性遍歷的次序規(guī)則。

首先遍歷所有數(shù)值鍵，按照數(shù)值升序排列。
其次遍歷所有字符串鍵，按照加入時(shí)間升序排列。
最后遍歷所有 Symbol 鍵，按照加入時(shí)間升序排列。

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

上面代碼中，Reflect.ownKeys方法返回一個(gè)數(shù)組，包含了參數(shù)對(duì)象的所有屬性。這個(gè)數(shù)組的屬性次序是這樣的，首先是數(shù)值屬性2和10，其次是字符串屬性b和a，最后是 Symbol 屬性。

__ proto__屬性

// es5 的寫法
const obj = {
  method: function() { ... }
};
obj.__proto__ = someOtherObj;

// es6 的寫法
var obj = Object.create(someOtherObj);
obj.method = function() { ... };

無(wú)論從語(yǔ)義的角度，還是從兼容性的角度，都不要使用這個(gè)屬性，而是使用下面的Object.setPrototypeOf()（寫操作）、Object.getPrototypeOf()（讀操作）、Object.create()（生成操作）代替。
實(shí)現(xiàn)上， __ proto __ 調(diào)用的是Object.prototype.__ proto __，具體實(shí)現(xiàn)如下。

Object.defineProperty(Object.prototype, '__proto__', {
  get() {
    let _thisObj = Object(this);
    return Object.getPrototypeOf(_thisObj);
  },
  set(proto) {
    if (this === undefined || this === null) {
      throw new TypeError();
    }
    if (!isObject(this)) {
      return undefined;
    }
    if (!isObject(proto)) {
      return undefined;
    }
    let status = Reflect.setPrototypeOf(this, proto);
    if (!status) {
      throw new TypeError();
    }
  },
});

function isObject(value) {
  return Object(value) === value;
}

如果一個(gè)對(duì)象本身部署了__ proto __屬性，該屬性的值就是對(duì)象的原型。

Object.setPrototypeOf()

Object.setPrototypeOf方法的作用與__ proto __相同，用來(lái)設(shè)置一個(gè)對(duì)象的prototype對(duì)象，返回參數(shù)對(duì)象本身。它是 ES6 正式推薦的設(shè)置原型對(duì)象的方法。

// 格式
Object.setPrototypeOf(object, prototype)

// 用法
const o = Object.setPrototypeOf({}, null);

下面是一個(gè)例子。

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x // 10
obj.y // 20
obj.z // 40

上面代碼將proto對(duì)象設(shè)為obj對(duì)象的原型，所以從obj對(duì)象可以讀取proto對(duì)象的屬性。

如果第一個(gè)參數(shù)不是對(duì)象，會(huì)自動(dòng)轉(zhuǎn)為對(duì)象。但是由于返回的還是第一個(gè)參數(shù)，所以這個(gè)操作不會(huì)產(chǎn)生任何效果。

Object.setPrototypeOf(1, {}) === 1 // true
Object.setPrototypeOf('foo', {}) === 'foo' // true
Object.setPrototypeOf(true, {}) === true // true

由于undefined和null無(wú)法轉(zhuǎn)為對(duì)象，所以如果第一個(gè)參數(shù)是undefined或null，就會(huì)報(bào)錯(cuò)。

Object.setPrototypeOf(undefined, {})
// TypeError: Object.setPrototypeOf called on null or undefined

Object.setPrototypeOf(null, {})
// TypeError: Object.setPrototypeOf called on null or undefined

Object.getPrototypeOf()

該方法與Object.setPrototypeOf方法配套，用于讀取一個(gè)對(duì)象的原型對(duì)象。

Object.getPrototypeOf(obj);
// 下面是一個(gè)例子
function Rectangle() {
  // ...
}

const rec = new Rectangle();

Object.getPrototypeOf(rec) === Rectangle.prototype
// true

Object.setPrototypeOf(rec, Object.prototype);
Object.getPrototypeOf(rec) === Rectangle.prototype
// false

Object.keys()

ES5 引入了Object.keys方法，返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵名。

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]

ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作為遍歷一個(gè)對(duì)象的補(bǔ)充手段，供for...of循環(huán)使用。

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}

for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}

for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

Object.values()

Object.values方法返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值。

const obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]

Object.values只返回對(duì)象自身的可遍歷屬性。

const obj = Object.create({}, {p: {value: 42}});
Object.values(obj) // []

上面代碼中，Object.create方法的第二個(gè)參數(shù)添加的對(duì)象屬性（屬性p），如果不顯式聲明，默認(rèn)是不可遍歷的，因?yàn)閜的屬性描述對(duì)象的enumerable默認(rèn)是false，Object.values不會(huì)返回這個(gè)屬性。只要把enumerable改成true，Object.values就會(huì)返回屬性p的值。

const obj = Object.create({}, {p:
  {
    value: 42,
    enumerable: true
  }
});

Object.values(obj) // [42]

Object.values會(huì)過(guò)濾屬性名為 Symbol 值的屬性。

Object.values({ [Symbol()]: 123, foo: 'abc' });
// ['abc']

如果Object.values方法的參數(shù)是一個(gè)字符串，會(huì)返回各個(gè)字符組成的一個(gè)數(shù)組。

Object.values('foo')
// ['f', 'o', 'o']

Object.entries()

Object.entries方法返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值對(duì)數(shù)組。

const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

除了返回值不一樣，該方法的行為與Object.values基本一致。

對(duì)象的擴(kuò)展運(yùn)算符

對(duì)象的擴(kuò)展運(yùn)算符（...）用于取出參數(shù)對(duì)象的所有可遍歷屬性，拷貝到當(dāng)前對(duì)象之中。

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

這等同于使用Object.assign方法。

let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);