從Object.assign()到ES6物件到擴充套件
阿新 • • 發佈:2019-01-23
背景
在上一個專案開發中,看到專案記憶體在很多Object.assign()
寫法的程式碼,由於之前沒有接觸過,感覺比較疑惑。通過網上查詢發現,這是ES6對物件進行的擴充套件之一,於是系統的瞭解了一下ES6中對物件進行的擴充套件。
學習
屬性的簡潔表示法
ES6 允許直接寫入變數(變數需要存在)和函式,作為物件的屬性和方法。
let birth = '2000/01/01'; const Person = { name: '張三', //等同於birth: birth birth, // 等同於hello: function ()... hello() { console.log('我的名字是', this
屬性名錶達式
ES6 允許字面量定義物件時,使用中括號+變數名作為物件的屬性名,即把表示式放在方括號內。
let lastWord = 'last word'; const a = { 'first word': 'hello', [lastWord]: 'world' }; a['first word'] // "hello" a[lastWord] // "world" a['last word'] // "world"
Object.is()
ES5 比較兩個值是否相等,只有兩個運算子:相等運算子(
==
)和嚴格相等運算子(===
)。它們都有缺點,前者會自動轉換資料型別,後者的NaN
+0
等於-0
。JavaScript 缺乏一種運算,在所有環境中,只要兩個值是一樣的,它們就應該相等。ES6 提出
“Same-value equality”
(同值相等)演算法,用來解決這個問題。Object.is
就是部署這個演算法的新方法。它用來比較兩個值是否嚴格相等,與嚴格比較運算子(===)的行為基本一致。不同之處只有兩個:一是
+0
不等於-0
,二是NaN
等於自身。+0 === -0 //true NaN === NaN // false Object.is(+0, -0) // false Object.is(NaN, NaN) // true
Object.assign()
Object.assign
Object.assign
方法的第一個引數是目標物件,後面的引數都是源物件。const target = { a: 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; Object.assign(target, source1, source2); target // {a:1, b:2, c:3}
注意:
- 如果目標物件與源物件有同名屬性,或多個源物件有同名屬性,則後面的屬性會覆蓋前面的屬性。
- 如果只有一個引數,
Object.assign
會直接返回該引數。 - 如果該引數不是物件,則會先轉成物件,然後返回。
- 由於
undefined
和null
無法轉成物件,所以如果它們作為引數,就會報錯。 - 如果非物件引數出現在源物件的位置(即非首引數),那麼處理規則有所不同。首先,這些引數都會轉成物件,如果無法轉成物件,就會跳過。這意味著,如果
undefined
和null
不在首引數,就不會報錯。 - 其他型別的值(即數值、字串和布林值)不在首引數,也不會報錯。但是,除了字串會以陣列形式,拷貝入目標物件,其他值都不會產生效果。
Object.assign
拷貝的屬性是有限制的,只拷貝源物件的自身屬性(不拷貝繼承屬性),也不拷貝不可列舉的屬性(enumerable: false
)。
常見用途:
為物件新增屬性
class Point { constructor(x, y) { Object.assign(this, {x, y}); } }
為物件新增方法
Object.assign(SomeClass.prototype, { someMethod(arg1, arg2) { ··· }, anotherMethod() { ··· } }); // 等同於下面的寫法 SomeClass.prototype.someMethod = function (arg1, arg2) { ··· }; SomeClass.prototype.anotherMethod = function () { ··· };
克隆物件
function clone(origin) { return Object.assign({}, origin); }
合併多個物件
const merge = (target, ...sources) => Object.assign(target, ...sources); const merge = (...sources) => Object.assign({}, ...sources);
為屬性指定預設值
Object.keys(),Object.values(),Object.entries()