對象的擴展 · 前端筆記

[TOC] ## 屬性的簡潔表示法 E6允許直接寫入變量和函數作為對象的屬性和方法。 ``` var foo = 'bar' var baz = {foo} baz // {foo: 'bar'} ``` ES6允許在對象中只寫屬性名，不寫屬性值。這時，屬性值等于屬性名所代表的變量。 ``` function f(x, y) { return {x, y} } //等同于 function f(x, y) { return {x:x, y:y} } ``` 除了屬性簡寫外，方法也可以簡寫。 ``` var o = { method() { return 'Hello!' } } // 等同于 var o { method: function() { return 'Hello!' } } ``` ## 屬性名表達式 JavaScript有兩種方法定義對象的屬性。 ``` // 方法一 obj.foo = true // 方法二 obj['a' + 'b'] = 123 ``` 如果使用對象字面量定義對象，ES5只允許使用方法一。 ``` var obj = { foo: true abc: 123 } ``` ES6允許字面量定義對象時使用方法二。 ``` let key = 'foo' let obj = { [key]: rue, ['a' + 'b']: 123 } ``` ## Object.is\(\) 用來比較兩個值是否嚴格相等。有嚴格比較運算符===基本一致，不同之處有兩個： * +0不等于-0 * NaN等于自身 ``` +0 === -0 // true NaN === NaN // false Object.is(+0, -0) // false Object.is(NaN, NaN) // true ``` ## Object.assign\(\) 將源對象的所以可枚舉屬性復制到目標對象。至少需要兩個對象作為參數。 ``` var target = {a: 1} var source1 = {b: 2} var source2 = {c: 3} Object.assign(target, source1, source2) target // {a:1, b:2, c:3} ``` 如果目標對象和源對象有同名屬性，或多個源對象有同名屬性，后面的屬性會覆蓋前面的屬性。 Object.assign只復制自身屬性，不可枚舉的屬性和繼承的屬性不會復制。對于嵌套的屬性，會替換而不是添加。 ``` var target = {a: {b: 'c', d: 'e'}} var source = {a: {b: 'hello'}} Object.assgin(target, source) //{a: {b: 'hello'}} ``` ## 屬性的可枚舉性 Object.getOwnPropertyDescriptor可獲取屬性的描述對象。enumrable屬性是可枚舉性，若值為false，表示某些操作會忽略當前屬性。 ES5有3個操作會忽略enumrable為false的屬性。 * for ... in 循環 * Object.keys\(\) * JSON.stringify\(\) ES6新增了2個操作。 * Object.assign\(\) * Reflect.enumerate\(\) ES6規定，所以Class的原型的方法都是不可枚舉的。 ## 屬性的遍歷 ES6有6種方法可以遍歷對象的屬性。 for...in Object.keys\(obj\) Object.getOwnPropertyNames\(obj\) Object.getOwnPropertySymbols\(obj\) Reflect.ownKeys\(obj\) Reflect.enumerate\(obj\) 它們遵循同樣的屬性遍歷次序規則。 * 首先遍歷所有屬性名為數值的屬性，按照數字排序 * 其次遍歷所有屬性名為字符串的屬性，按照生成時間排序 * 最后遍歷所有屬性名為Symbol值的屬性，按照生成時間排序 ## \_\_proto\_\_屬性，Object.setPrototypeOf\(\)，Object.getPrototypeOf\(\) Object.setPrototypeOf方法的作用與 \_\_proto\_\_相同，用于設置一個對象的prototype對象。它是ES6正式推薦的設置原型對象的方法。 ``` var o = Object.setPrototypeOf({}, null) ``` Object.getPrototypeOf用于讀取一個對象的prototype對象。 ## 對象的擴展運算符 ~~~ const [a, ...b] = [1, 2, 3]; a // 1 b // [2, 3] ~~~ ES2017 將這個運算符引入了對象。（1）解構賦值對象的解構賦值用于從一個對象取值，相當于將所有可遍歷的、但尚未被讀取的屬性，分配到指定的對象上面。所有的鍵和它們的值，都會拷貝到新對象上面。 ~~~ let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 } ~~~ 上面代碼中，變量z是解構賦值所在的對象。它獲取等號右邊的所有尚未讀取的鍵（a和b），將它們連同值一起拷貝過來。由于解構賦值要求等號右邊是一個對象，所以如果等號右邊是undefined或null，就會報錯，因為它們無法轉為對象。 ~~~ let { x, y, ...z } = null; // 運行時錯誤 let { x, y, ...z } = undefined; // 運行時錯誤 ~~~ 解構賦值必須是最后一個參數，否則會報錯。 ~~~ let { ...x, y, z } = obj; // 句法錯誤 let { x, ...y, ...z } = obj; // 句法錯誤 ~~~ 上面代碼中，解構賦值不是最后一個參數，所以會報錯。注意，解構賦值的拷貝是淺拷貝，即如果一個鍵的值是復合類型的值（數組、對象、函數）、那么解構賦值拷貝的是這個值的引用，而不是這個值的副本。 ~~~ let obj = { a: { b: 1 } }; let { ...x } = obj; obj.a.b = 2; x.a.b // 2 ~~~ 上面代碼中，x是解構賦值所在的對象，拷貝了對象obj的a屬性。a屬性引用了一個對象，修改這個對象的值，會影響到解構賦值對它的引用。另外，擴展運算符的解構賦值，不能復制繼承自原型對象的屬性。 ~~~ let o1 = { a: 1 }; let o2 = { b: 2 }; o2.__proto__ = o1; let { ...o3 } = o2; o3 // { b: 2 } o3.a // undefined ~~~ 上面代碼中，對象o3復制了o2，但是只復制了o2自身的屬性，沒有復制它的原型對象o1的屬性。下面是另一個例子。 ~~~ const o = Object.create({ x: 1, y: 2 }); o.z = 3; let { x, ...{ y, z } } = o; x // 1 y // undefined z // 3 ~~~ 上面代碼中，變量x是單純的解構賦值，所以可以讀取對象o繼承的屬性；變量y和z是擴展運算符的解構賦值，只能讀取對象o自身的屬性，所以變量z可以賦值成功，變量y取不到值。解構賦值的一個用處，是擴展某個函數的參數，引入其他操作。 ~~~ function baseFunction({ a, b }) { // ... } function wrapperFunction({ x, y, ...restConfig }) { // 使用x和y參數進行操作 // 其余參數傳給原始函數 return baseFunction(restConfig); } ~~~ 上面代碼中，原始函數baseFunction接受a和b作為參數，函數wrapperFunction在baseFunction的基礎上進行了擴展，能夠接受多余的參數，并且保留原始函數的行為。（2）擴展運算符擴展運算符（...）用于取出參數對象的所有可遍歷屬性，拷貝到當前對象之中。 ~~~ let z = { a: 3, b: 4 }; let n = { ...z }; n // { a: 3, b: 4 } ~~~ 這等同于使用Object.assign方法。 ~~~ let aClone = { ...a }; // 等同于 let aClone = Object.assign({}, a); ~~~ 上面的例子只是拷貝了對象實例的屬性，如果想完整克隆一個對象，還拷貝對象原型的屬性，可以采用下面的寫法。 ~~~ // 寫法一 const clone1 = { __proto__: Object.getPrototypeOf(obj), ...obj }; // 寫法二 const clone2 = Object.assign( Object.create(Object.getPrototypeOf(obj)), obj ); // 寫法三 const clone3 = Object.create( Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj) ) ~~~ 上面代碼中，寫法一的__proto__屬性在非瀏覽器的環境不一定部署，因此推薦使用寫法二和寫法三。擴展運算符可以用于合并兩個對象。 ~~~ let ab = { ...a, ...b }; // 等同于 let ab = Object.assign({}, a, b); ~~~ 如果用戶自定義的屬性，放在擴展運算符后面，則擴展運算符內部的同名屬性會被覆蓋掉。 ~~~ let aWithOverrides = { ...a, x: 1, y: 2 }; // 等同于 let aWithOverrides = { ...a, ...{ x: 1, y: 2 } }; // 等同于 let x = 1, y = 2, aWithOverrides = { ...a, x, y }; // 等同于 let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 }); ~~~ 上面代碼中，a對象的x屬性和y屬性，拷貝到新對象后會被覆蓋掉。這用來修改現有對象部分的屬性就很方便了。 ~~~ let newVersion = { ...previousVersion, name: 'New Name' // Override the name property }; ~~~ 上面代碼中，newVersion對象自定義了name屬性，其他屬性全部復制自previousVersion對象。如果把自定義屬性放在擴展運算符前面，就變成了設置新對象的默認屬性值。 ~~~ let aWithDefaults = { x: 1, y: 2, ...a }; // 等同于 let aWithDefaults = Object.assign({}, { x: 1, y: 2 }, a); // 等同于 let aWithDefaults = Object.assign({ x: 1, y: 2 }, a); ~~~ 與數組的擴展運算符一樣，對象的擴展運算符后面可以跟表達式。 ~~~ const obj = { ...(x > 1 ? {a: 1} : {}), b: 2, }; ~~~ 如果擴展運算符后面是一個空對象，則沒有任何效果。 ~~~ {...{}, a: 1} // { a: 1 } ~~~ 如果擴展運算符的參數是null或undefined，這兩個值會被忽略，不會報錯。 ~~~ let emptyObject = { ...null, ...undefined }; // 不報錯擴展運算符的參數對象之中，如果有取值函數get，這個函數是會執行的。 // 并不會拋出錯誤，因為 x 屬性只是被定義，但沒執行 let aWithXGetter = { ...a, get x() { throw new Error('not throw yet'); } }; // 會拋出錯誤，因為 x 屬性被執行了 let runtimeError = { ...a, ...{ get x() { throw new Error('throw now'); } } }; ~~~