<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                # 對象的擴展 ## 屬性的簡潔表示法 ES6允許直接寫入變量和函數,作為對象的屬性和方法。這樣的書寫更加簡潔。 ~~~ var foo = 'bar'; var baz = {foo}; baz // {foo: "bar"} // 等同于 var baz = {foo: foo}; ~~~ 上面代碼表明,ES6允許在對象之中,只寫屬性名,不寫屬性值。這時,屬性值等于屬性名所代表的變量。下面是另一個例子。 ~~~ function f(x, y) { return {x, y}; } // 等同于 function f(x, y) { return {x: x, y: y}; } f(1, 2) // Object {x: 1, y: 2} ~~~ 除了屬性簡寫,方法也可以簡寫。 ~~~ var o = { method() { return "Hello!"; } }; // 等同于 var o = { method: function() { return "Hello!"; } }; ~~~ 下面是一個實際的例子。 ~~~ var birth = '2000/01/01'; var Person = { name: '張三', //等同于birth: birth birth, // 等同于hello: function ()... hello() { console.log('我的名字是', this.name); } }; ~~~ 這種寫法用于函數的返回值,將會非常方便。 ~~~ function getPoint() { var x = 1; var y = 10; return {x, y}; } getPoint() // {x:1, y:10} ~~~ CommonJS模塊輸出變量,就非常合適使用簡潔寫法。 ~~~ var 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 }; ~~~ 屬性的賦值器(setter)和取值器(getter),事實上也是采用這種寫法。 ~~~ var cart = { _wheels: 4, get wheels () { return this._wheels; }, set wheels (value) { if (value < this._wheels) { throw new Error('數值太小了!'); } this._wheels = value; } } ~~~ 注意,簡潔寫法的屬性名總是字符串,這會導致一些看上去比較奇怪的結果。 ~~~ var obj = { class () {} }; // 等同于 var obj = { 'class': function() {} }; ~~~ 上面代碼中,`class`是字符串,所以不會因為它屬于關鍵字,而導致語法解析報錯。 如果某個方法的值是一個Generator函數,前面需要加上星號。 ~~~ var obj = { * m(){ yield 'hello world'; } }; ~~~ ## 屬性名表達式 JavaScript語言定義對象的屬性,有兩種方法。 ~~~ // 方法一 obj.foo = true; // 方法二 obj['a' + 'bc'] = 123; ~~~ 上面代碼的方法一是直接用標識符作為屬性名,方法二是用表達式作為屬性名,這時要將表達式放在方括號之內。 但是,如果使用字面量方式定義對象(使用大括號),在ES5中只能使用方法一(標識符)定義屬性。 ~~~ var obj = { foo: true, abc: 123 }; ~~~ ES6允許字面量定義對象時,用方法二(表達式)作為對象的屬性名,即把表達式放在方括號內。 ~~~ let propKey = 'foo'; let obj = { [propKey]: true, ['a' + 'bc']: 123 }; ~~~ 下面是另一個例子。 ~~~ var lastWord = 'last word'; var a = { 'first word': 'hello', [lastWord]: 'world' }; a['first word'] // "hello" a[lastWord] // "world" a['last word'] // "world" ~~~ 表達式還可以用于定義方法名。 ~~~ let obj = { ['h'+'ello']() { return 'hi'; } }; obj.hello() // hi ~~~ 注意,屬性名表達式與簡潔表示法,不能同時使用,會報錯。 ~~~ // 報錯 var foo = 'bar'; var bar = 'abc'; var baz = { [foo] }; // 正確 var foo = 'bar'; var baz = { [foo]: 'abc'}; ~~~ ## 方法的name屬性 函數的`name`屬性,返回函數名。對象方法也是函數,因此也有`name`屬性。 ~~~ var person = { sayName() { console.log(this.name); }, get firstName() { return "Nicholas"; } }; person.sayName.name // "sayName" person.firstName.name // "get firstName" ~~~ 上面代碼中,方法的`name`屬性返回函數名(即方法名)。如果使用了取值函數,則會在方法名前加上`get`。如果是存值函數,方法名的前面會加上`set`。 有兩種特殊情況:`bind`方法創造的函數,`name`屬性返回“bound”加上原函數的名字;`Function`構造函數創造的函數,`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 // "" ~~~ 上面代碼中,`key1`對應的Symbol值有描述,`key2`沒有。 ## Object.is() ES5比較兩個值是否相等,只有兩個運算符:相等運算符(`==`)和嚴格相等運算符(`===`)。它們都有缺點,前者會自動轉換數據類型,后者的`NaN`不等于自身,以及`+0`等于`-0`。JavaScript缺乏一種運算,在所有環境中,只要兩個值是一樣的,它們就應該相等。 ES6提出“Same-value equality”(同值相等)算法,用來解決這個問題。`Object.is`就是部署這個算法的新方法。它用來比較兩個值是否嚴格相等,與嚴格比較運算符(===)的行為基本一致。 ~~~ Object.is('foo', 'foo') // true Object.is({}, {}) // false ~~~ 不同之處只有兩個:一是`+0`不等于`-0`,二是`NaN`等于自身。 ~~~ +0 === -0 //true NaN === NaN // false Object.is(+0, -0) // false Object.is(NaN, NaN) // true ~~~ ES5可以通過下面的代碼,部署`Object.is`。 ~~~ Object.defineProperty(Object, 'is', { value: function(x, y) { if (x === y) { // 針對+0 不等于 -0的情況 return x !== 0 || 1 / x === 1 / y; } // 針對NaN的情況 return x !== x && y !== y; }, configurable: true, enumerable: false, writable: true }); ~~~ ## Object.assign() ### 基本用法 `Object.assign`方法用于對象的合并,將源對象(source)的所有可枚舉屬性,復制到目標對象(target)。 ~~~ 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: 1, b: 1 }; var source1 = { b: 2, c: 2 }; var source2 = { c: 3 }; Object.assign(target, source1, source2); target // {a:1, b:2, c:3} ~~~ 如果只有一個參數,`Object.assign`會直接返回該參數。 ~~~ var obj = {a: 1}; Object.assign(obj) === obj // true ~~~ 如果該參數不是對象,則會先轉成對象,然后返回。 ~~~ typeof Object.assign(2) // "object" ~~~ 由于`undefined`和`null`無法轉成對象,所以如果它們作為參數,就會報錯。 ~~~ Object.assign(undefined) // 報錯 Object.assign(null) // 報錯 ~~~ 如果非對象參數出現在源對象的位置(即非首參數),那么處理規則有所不同。首先,這些參數都會轉成對象,如果無法轉成對象,就會跳過。這意味著,如果`undefined`和`null`不在首參數,就不會報錯。 ~~~ let obj = {a: 1}; Object.assign(obj, undefined) === obj // true Object.assign(obj, null) === obj // true ~~~ 其他類型的值(即數值、字符串和布爾值)不在首參數,也不會報錯。但是,除了字符串會以數組形式,拷貝入目標對象,其他值都不會產生效果。 ~~~ var v1 = 'abc'; var v2 = true; var v3 = 10; var obj = Object.assign({}, v1, v2, v3); console.log(obj); // { "0": "a", "1": "b", "2": "c" } ~~~ 上面代碼中,`v1`、`v2`、`v3`分別是字符串、布爾值和數值,結果只有字符串合入目標對象(以字符數組的形式),數值和布爾值都會被忽略。這是因為只有字符串的包裝對象,會產生可枚舉屬性。 ~~~ Object(true) // {[[PrimitiveValue]]: true} Object(10) // {[[PrimitiveValue]]: 10} Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"} ~~~ 上面代碼中,布爾值、數值、字符串分別轉成對應的包裝對象,可以看到它們的原始值都在包裝對象的內部屬性`[[PrimitiveValue]]`上面,這個屬性是不會被`Object.assign`拷貝的。只有字符串的包裝對象,會產生可枚舉的實義屬性,那些屬性則會被拷貝。 `Object.assign`拷貝的屬性是有限制的,只拷貝源對象的自身屬性(不拷貝繼承屬性),也不拷貝不可枚舉的屬性(`enumerable: false`)。 ~~~ Object.assign({b: 'c'}, Object.defineProperty({}, 'invisible', { enumerable: false, value: 'hello' }) ) // { b: 'c' } ~~~ 上面代碼中,`Object.assign`要拷貝的對象只有一個不可枚舉屬性`invisible`,這個屬性并沒有被拷貝進去。 屬性名為Symbol值的屬性,也會被`Object.assign`拷貝。 ~~~ Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' }) // { a: 'b', Symbol(c): 'd' } ~~~ ### 注意點 `Object.assign`方法實行的是淺拷貝,而不是深拷貝。也就是說,如果源對象某個屬性的值是對象,那么目標對象拷貝得到的是這個對象的引用。 ~~~ var obj1 = {a: {b: 1}}; var obj2 = Object.assign({}, obj1); obj1.a.b = 2; obj2.a.b // 2 ~~~ 上面代碼中,源對象`obj1`的`a`屬性的值是一個對象,`Object.assign`拷貝得到的是這個對象的引用。這個對象的任何變化,都會反映到目標對象上面。 對于這種嵌套的對象,一旦遇到同名屬性,`Object.assign`的處理方法是替換,而不是添加。 ~~~ var target = { a: { b: 'c', d: 'e' } } var source = { a: { b: 'hello' } } Object.assign(target, source) // { a: { b: 'hello' } } ~~~ 上面代碼中,`target`對象的`a`屬性被`source`對象的`a`屬性整個替換掉了,而不會得到`{ a: { b: 'hello', d: 'e' } }`的結果。這通常不是開發者想要的,需要特別小心。 有一些函數庫提供`Object.assign`的定制版本(比如Lodash的`_.defaultsDeep`方法),可以解決淺拷貝的問題,得到深拷貝的合并。 注意,`Object.assign`可以用來處理數組,但是會把數組視為對象。 ~~~ Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3] ~~~ 上面代碼中,`Object.assign`把數組視為屬性名為0、1、2的對象,因此目標數組的0號屬性`4`覆蓋了原數組的0號屬性`1`。 ### 常見用途 `Object.assign`方法有很多用處。 **(1)為對象添加屬性** ~~~ class Point { constructor(x, y) { Object.assign(this, {x, y}); } } ~~~ 上面方法通過`Object.assign`方法,將`x`屬性和`y`屬性添加到`Point`類的對象實例。 **(2)為對象添加方法** ~~~ Object.assign(SomeClass.prototype, { someMethod(arg1, arg2) { ··· }, anotherMethod() { ··· } }); // 等同于下面的寫法 SomeClass.prototype.someMethod = function (arg1, arg2) { ··· }; SomeClass.prototype.anotherMethod = function () { ··· }; ~~~ 上面代碼使用了對象屬性的簡潔表示法,直接將兩個函數放在大括號中,再使用assign方法添加到SomeClass.prototype之中。 **(3)克隆對象** ~~~ function clone(origin) { return Object.assign({}, origin); } ~~~ 上面代碼將原始對象拷貝到一個空對象,就得到了原始對象的克隆。 不過,采用這種方法克隆,只能克隆原始對象自身的值,不能克隆它繼承的值。如果想要保持繼承鏈,可以采用下面的代碼。 ~~~ function clone(origin) { let originProto = Object.getPrototypeOf(origin); return Object.assign(Object.create(originProto), origin); } ~~~ **(4)合并多個對象** 將多個對象合并到某個對象。 ~~~ const merge = (target, ...sources) => Object.assign(target, ...sources); ~~~ 如果希望合并后返回一個新對象,可以改寫上面函數,對一個空對象合并。 ~~~ const merge = (...sources) => Object.assign({}, ...sources); ~~~ **(5)為屬性指定默認值** ~~~ const DEFAULTS = { logLevel: 0, outputFormat: 'html' }; function processContent(options) { options = Object.assign({}, DEFAULTS, options); } ~~~ 上面代碼中,`DEFAULTS`對象是默認值,`options`對象是用戶提供的參數。`Object.assign`方法將`DEFAULTS`和`options`合并成一個新對象,如果兩者有同名屬性,則`option`的屬性值會覆蓋`DEFAULTS`的屬性值。 注意,由于存在深拷貝的問題,`DEFAULTS`對象和`options`對象的所有屬性的值,都只能是簡單類型,而不能指向另一個對象。否則,將導致`DEFAULTS`對象的該屬性不起作用。 ## 屬性的可枚舉性 對象的每個屬性都有一個描述對象(Descriptor),用來控制該屬性的行為。`Object.getOwnPropertyDescriptor`方法可以獲取該屬性的描述對象。 ~~~ let obj = { foo: 123 }; Object.getOwnPropertyDescriptor(obj, 'foo') // { // value: 123, // writable: true, // enumerable: true, // configurable: true // } ~~~ 描述對象的`enumerable`屬性,稱為”可枚舉性“,如果該屬性為`false`,就表示某些操作會忽略當前屬性。 ES5有三個操作會忽略`enumerable`為`false`的屬性。 * `for...in`循環:只遍歷對象自身的和繼承的可枚舉的屬性 * `Object.keys()`:返回對象自身的所有可枚舉的屬性的鍵名 * `JSON.stringify()`:只串行化對象自身的可枚舉的屬性 ES6新增了一個操作`Object.assign()`,會忽略`enumerable`為`false`的屬性,只拷貝對象自身的可枚舉的屬性。 這四個操作之中,只有`for...in`會返回繼承的屬性。實際上,引入`enumerable`的最初目的,就是讓某些屬性可以規避掉`for...in`操作。比如,對象原型的`toString`方法,以及數組的`length`屬性,就通過這種手段,不會被`for...in`遍歷到。 ~~~ Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable // false Object.getOwnPropertyDescriptor([], 'length').enumerable // false ~~~ 上面代碼中,`toString`和`length`屬性的`enumerable`都是`false`,因此`for...in`不會遍歷到這兩個繼承自原型的屬性。 另外,ES6規定,所有Class的原型的方法都是不可枚舉的。 ~~~ Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable // false ~~~ 總的來說,操作中引入繼承的屬性會讓問題復雜化,大多數時候,我們只關心對象自身的屬性。所以,盡量不要用`for...in`循環,而用`Object.keys()`代替。 ## 屬性的遍歷 ES6一共有5種方法可以遍歷對象的屬性。 **(1)for...in** `for...in`循環遍歷對象自身的和繼承的可枚舉屬性(不含Symbol屬性)。 **(2)Object.keys(obj)** `Object.keys`返回一個數組,包括對象自身的(不含繼承的)所有可枚舉屬性(不含Symbol屬性)。 **(3)Object.getOwnPropertyNames(obj)** `Object.getOwnPropertyNames`返回一個數組,包含對象自身的所有屬性(不含Symbol屬性,但是包括不可枚舉屬性)。 **(4)Object.getOwnPropertySymbols(obj)** `Object.getOwnPropertySymbols`返回一個數組,包含對象自身的所有Symbol屬性。 **(5)Reflect.ownKeys(obj)** `Reflect.ownKeys`返回一個數組,包含對象自身的所有屬性,不管是屬性名是Symbol或字符串,也不管是否可枚舉。 以上的5種方法遍歷對象的屬性,都遵守同樣的屬性遍歷的次序規則。 * 首先遍歷所有屬性名為數值的屬性,按照數字排序。 * 其次遍歷所有屬性名為字符串的屬性,按照生成時間排序。 * 最后遍歷所有屬性名為Symbol值的屬性,按照生成時間排序。 ~~~ Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 }) // ['2', '10', 'b', 'a', Symbol()] ~~~ 上面代碼中,`Reflect.ownKeys`方法返回一個數組,包含了參數對象的所有屬性。這個數組的屬性次序是這樣的,首先是數值屬性`2`和`10`,其次是字符串屬性`b`和`a`,最后是Symbol屬性。 ## `__proto__`屬性,Object.setPrototypeOf(),Object.getPrototypeOf() **(1)`__proto__`屬性** `__proto__`屬性(前后各兩個下劃線),用來讀取或設置當前對象的`prototype`對象。目前,所有瀏覽器(包括IE11)都部署了這個屬性。 ~~~ // es6的寫法 var obj = { method: function() { ... } }; obj.__proto__ = someOtherObj; // es5的寫法 var obj = Object.create(someOtherObj); obj.method = function() { ... }; ~~~ 該屬性沒有寫入ES6的正文,而是寫入了附錄,原因是`__proto__`前后的雙下劃線,說明它本質上是一個內部屬性,而不是一個正式的對外的API,只是由于瀏覽器廣泛支持,才被加入了ES6。標準明確規定,只有瀏覽器必須部署這個屬性,其他運行環境不一定需要部署,而且新的代碼最好認為這個屬性是不存在的。因此,無論從語義的角度,還是從兼容性的角度,都不要使用這個屬性,而是使用下面的`Object.setPrototypeOf()`(寫操作)、`Object.getPrototypeOf()`(讀操作)、`Object.create()`(生成操作)代替。 在實現上,`__proto__`調用的是`Object.prototype.__proto__`,具體實現如下。 ~~~ 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; } ~~~ 如果一個對象本身部署了`__proto__`屬性,則該屬性的值就是對象的原型。 ~~~ Object.getPrototypeOf({ __proto__: null }) // null ~~~ **(2)Object.setPrototypeOf()** `Object.setPrototypeOf`方法的作用與`__proto__`相同,用來設置一個對象的`prototype`對象。它是ES6正式推薦的設置原型對象的方法。 ~~~ // 格式 Object.setPrototypeOf(object, prototype) // 用法 var o = Object.setPrototypeOf({}, null); ~~~ 該方法等同于下面的函數。 ~~~ function (obj, proto) { obj.__proto__ = proto; return obj; } ~~~ 下面是一個例子。 ~~~ 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對象設為obj對象的原型,所以從obj對象可以讀取proto對象的屬性。 **(3)Object.getPrototypeOf()** 該方法與setPrototypeOf方法配套,用于讀取一個對象的prototype對象。 ~~~ Object.getPrototypeOf(obj); ~~~ 下面是一個例子。 ~~~ function Rectangle() { } var rec = new Rectangle(); Object.getPrototypeOf(rec) === Rectangle.prototype // true Object.setPrototypeOf(rec, Object.prototype); Object.getPrototypeOf(rec) === Rectangle.prototype // false ~~~ ## Object.values(),Object.entries() ### Object.keys() ES5引入了`Object.keys`方法,返回一個數組,成員是參數對象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵名。 ~~~ var obj = { foo: "bar", baz: 42 }; Object.keys(obj) // ["foo", "baz"] ~~~ 目前,ES7有一個[提案](https://github.com/tc39/proposal-object-values-entries),引入了跟`Object.keys`配套的`Object.values`和`Object.entries`。 ~~~ 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`方法返回一個數組,成員是參數對象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵值。 ~~~ var obj = { foo: "bar", baz: 42 }; Object.values(obj) // ["bar", 42] ~~~ 返回數組的成員順序,與本章的《屬性的遍歷》部分介紹的排列規則一致。 ~~~ var obj = { 100: 'a', 2: 'b', 7: 'c' }; Object.values(obj) // ["b", "c", "a"] ~~~ 上面代碼中,屬性名為數值的屬性,是按照數值大小,從小到大遍歷的,因此返回的順序是`b`、`c`、`a`。 `Object.values`只返回對象自身的可遍歷屬性。 ~~~ var obj = Object.create({}, {p: {value: 42}}); Object.values(obj) // [] ~~~ 上面代碼中,`Object.create`方法的第二個參數添加的對象屬性(屬性`p`),如果不顯式聲明,默認是不可遍歷的。`Object.values`不會返回這個屬性。 `Object.values`會過濾屬性名為Symbol值的屬性。 ~~~ Object.values({ [Symbol()]: 123, foo: 'abc' }); // ['abc'] ~~~ 如果`Object.values`方法的參數是一個字符串,會返回各個字符組成的一個數組。 ~~~ Object.values('foo') // ['f', 'o', 'o'] ~~~ 上面代碼中,字符串會先轉成一個類似數組的對象。字符串的每個字符,就是該對象的一個屬性。因此,`Object.values`返回每個屬性的鍵值,就是各個字符組成的一個數組。 如果參數不是對象,`Object.values`會先將其轉為對象。由于數值和布爾值的包裝對象,都不會為實例添加非繼承的屬性。所以,`Object.values`會返回空數組。 ~~~ Object.values(42) // [] Object.values(true) // [] ~~~ ### Object.entries `Object.entries`方法返回一個數組,成員是參數對象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵值對數組。 ~~~ var obj = { foo: 'bar', baz: 42 }; Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ] ~~~ 除了返回值不一樣,該方法的行為與`Object.values`基本一致。 如果原對象的屬性名是一個Symbol值,該屬性會被省略。 ~~~ Object.entries({ [Symbol()]: 123, foo: 'abc' }); // [ [ 'foo', 'abc' ] ] ~~~ 上面代碼中,原對象有兩個屬性,`Object.entries`只輸出屬性名非Symbol值的屬性。將來可能會有`Reflect.ownEntries()`方法,返回對象自身的所有屬性。 `Object.entries`的基本用途是遍歷對象的屬性。 ~~~ let obj = { one: 1, two: 2 }; for (let [k, v] of Object.entries(obj)) { console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`); } // "one": 1 // "two": 2 ~~~ `Object.entries`方法的一個用處是,將對象轉為真正的`Map`結構。 ~~~ var obj = { foo: 'bar', baz: 42 }; var map = new Map(Object.entries(obj)); map // Map { foo: "bar", baz: 42 } ~~~ 自己實現`Object.entries`方法,非常簡單。 ~~~ // Generator函數的版本 function* entries(obj) { for (let key of Object.keys(obj)) { yield [key, obj[key]]; } } // 非Generator函數的版本 function entries(obj) { let arr = []; for (let key of Object.keys(obj)) { arr.push([key, obj[key]]); } return arr; } ~~~ ## 對象的擴展運算符 目前,ES7有一個[提案](https://github.com/sebmarkbage/ecmascript-rest-spread),將Rest解構賦值/擴展運算符(...)引入對象。Babel轉碼器已經支持這項功能。 **(1)Rest解構賦值** 對象的Rest解構賦值用于從一個對象取值,相當于將所有可遍歷的、但尚未被讀取的屬性,分配到指定的對象上面。所有的鍵和它們的值,都會拷貝到新對象上面。 ~~~ let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 } ~~~ 上面代碼中,變量`z`是Rest解構賦值所在的對象。它獲取等號右邊的所有尚未讀取的鍵(`a`和`b`),將它們和它們的值拷貝過來。 由于Rest解構賦值要求等號右邊是一個對象,所以如果等號右邊是`undefined`或`null`,就會報錯,因為它們無法轉為對象。 ~~~ let { x, y, ...z } = null; // 運行時錯誤 let { x, y, ...z } = undefined; // 運行時錯誤 ~~~ Rest解構賦值必須是最后一個參數,否則會報錯。 ~~~ let { ...x, y, z } = obj; // 句法錯誤 let { x, ...y, ...z } = obj; // 句法錯誤 ~~~ 上面代碼中,Rest解構賦值不是最后一個參數,所以會報錯。 注意,Rest解構賦值的拷貝是淺拷貝,即如果一個鍵的值是復合類型的值(數組、對象、函數)、那么Rest解構賦值拷貝的是這個值的引用,而不是這個值的副本。 ~~~ let obj = { a: { b: 1 } }; let { ...x } = obj; obj.a.b = 2; x.a.b // 2 ~~~ 上面代碼中,`x`是Rest解構賦值所在的對象,拷貝了對象`obj`的`a`屬性。`a`屬性引用了一個對象,修改這個對象的值,會影響到Rest解構賦值對它的引用。 另外,Rest解構賦值不會拷貝繼承自原型對象的屬性。 ~~~ let o1 = { a: 1 }; let o2 = { b: 2 }; o2.__proto__ = o1; let o3 = { ...o2 }; o3 // { b: 2 } ~~~ 上面代碼中,對象`o3`是`o2`的拷貝,但是只復制了`o2`自身的屬性,沒有復制它的原型對象`o1`的屬性。 下面是另一個例子。 ~~~ var o = Object.create({ x: 1, y: 2 }); o.z = 3; let { x, ...{ y, z } } = o; x // 1 y // undefined z // 3 ~~~ 上面代碼中,變量`x`是單純的解構賦值,所以可以讀取繼承的屬性;Rest解構賦值產生的變量`y`和`z`,只能讀取對象自身的屬性,所以只有變量`z`可以賦值成功。 Rest解構賦值的一個用處,是擴展某個函數的參數,引入其他操作。 ~~~ 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); ~~~ 擴展運算符可以用于合并兩個對象。 ~~~ 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); ~~~ 擴展運算符的參數對象之中,如果有取值函數`get`,這個函數是會執行的。 ~~~ // 并不會拋出錯誤,因為x屬性只是被定義,但沒執行 let aWithXGetter = { ...a, get x() { throws new Error('not thrown yet'); } }; // 會拋出錯誤,因為x屬性被執行了 let runtimeError = { ...a, ...{ get x() { throws new Error('thrown now'); } } }; ~~~ 如果擴展運算符的參數是`null`或`undefined`,這個兩個值會被忽略,不會報錯。 ~~~ let emptyObject = { ...null, ...undefined }; // 不報錯 ~~~ ## Object.getOwnPropertyDescriptors() ES5有一個`Object.getOwnPropertyDescriptor`方法,返回某個對象屬性的描述對象(descriptor)。 ~~~ var obj = { p: 'a' }; Object.getOwnPropertyDescriptor(obj, 'p') // Object { value: "a", // writable: true, // enumerable: true, // configurable: true // } ~~~ ES7有一個提案,提出了`Object.getOwnPropertyDescriptors`方法,返回指定對象所有自身屬性(非繼承屬性)的描述對象。 ~~~ const obj = { foo: 123, get bar() { return 'abc' } }; Object.getOwnPropertyDescriptors(obj) // { foo: // { value: 123, // writable: true, // enumerable: true, // configurable: true }, // bar: // { get: [Function: bar], // set: undefined, // enumerable: true, // configurable: true } } ~~~ `Object.getOwnPropertyDescriptors`方法返回一個對象,所有原對象的屬性名都是該對象的屬性名,對應的屬性值就是該屬性的描述對象。 該方法的實現非常容易。 ~~~ function getOwnPropertyDescriptors(obj) { const result = {}; for (let key of Reflect.ownKeys(obj)) { result[key] = Object.getOwnPropertyDescriptor(obj, key); } return result; } ~~~ 該方法的提出目的,主要是為了解決`Object.assign()`無法正確拷貝`get`屬性和`set`屬性的問題。 ~~~ const source = { set foo(value) { console.log(value); } }; const target1 = {}; Object.assign(target1, source); Object.getOwnPropertyDescriptor(target1, 'foo') // { value: undefined, // writable: true, // enumerable: true, // configurable: true } ~~~ 上面代碼中,`source`對象的`foo`屬性的值是一個賦值函數,`Object.assign`方法將這個屬性拷貝給`target1`對象,結果該屬性的值變成了`undefined`。這是因為`Object.assign`方法總是拷貝一個屬性的值,而不會拷貝它背后的賦值方法或取值方法。 這時,`Object.getOwnPropertyDescriptors`方法配合`Object.defineProperties`方法,就可以實現正確拷貝。 ~~~ const source = { set foo(value) { console.log(value); } }; const target2 = {}; Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source)); Object.getOwnPropertyDescriptor(target2, 'foo') // { get: undefined, // set: [Function: foo], // enumerable: true, // configurable: true } ~~~ 上面代碼中,將兩個對象合并的邏輯提煉出來,就是下面這樣。 ~~~ const shallowMerge = (target, source) => Object.defineProperties( target, Object.getOwnPropertyDescriptors(source) ); ~~~ `Object.getOwnPropertyDescriptors`方法的另一個用處,是配合`Object.create`方法,將對象屬性克隆到一個新對象。這屬于淺拷貝。 ~~~ const clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj)); // 或者 const shallowClone = (obj) => Object.create( Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj) ); ~~~ 上面代碼會克隆對象`obj`。 另外,`Object.getOwnPropertyDescriptors`方法可以實現,一個對象繼承另一個對象。以前,繼承另一個對象,常常寫成下面這樣。 ~~~ const obj = { __proto__: prot, foo: 123, }; ~~~ ES6規定`__proto__`只有瀏覽器要部署,其他環境不用部署。如果去除`__proto__`,上面代碼就要改成下面這樣。 ~~~ const obj = Object.create(prot); obj.foo = 123; // 或者 const obj = Object.assign( Object.create(prot), { foo: 123, } ); ~~~ 有了`Object.getOwnPropertyDescriptors`,我們就有了另一種寫法。 ~~~ const obj = Object.create( prot, Object.getOwnPropertyDescriptors({ foo: 123, }) ); ~~~ `Object.getOwnPropertyDescriptors`也可以用來實現Mixin(混入)模式。 ~~~ let mix = (object) => ({ with: (...mixins) => mixins.reduce( (c, mixin) => Object.create( c, Object.getOwnPropertyDescriptors(mixin) ), object) }); // multiple mixins example let a = {a: 'a'}; let b = {b: 'b'}; let c = {c: 'c'}; let d = mix(c).with(a, b); ~~~ 上面代碼中,對象`a`和`b`被混入了對象`c`。 出于完整性的考慮,`Object.getOwnPropertyDescriptors`進入標準以后,還會有`Reflect.getOwnPropertyDescriptors`方法。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看