js-ES6學習筆記-對象的擴展


1、ES6允許直接寫入變量和函數,作為對象的屬性和方法。這種寫法用於函數的返回值,將會非常方便。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
};

2、ES6 允許字面量定義對象時,用表達式作為對象的屬性名,即把表達式放在方括號內。

let propKey = 'foo';

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

3、ES5比較兩個值是否相等,只有兩個運算符:相等運算符(==)和嚴格相等運算符(===)。它們都有缺點,前者會自動轉換數據類型,后者的NaN不等於自身,以及+0等於-0

ES6提出“Same-value equality”(同值相等)算法,用來解決這個問題。Object.is就是部署這個算法的新方法。它用來比較兩個值是否嚴格相等,與嚴格比較運算符(===)的行為基本一致。

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

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

4、Object.assign方法用於對象的合並,將源對象(source)的所有可枚舉屬性,復制到目標對象(target)。注意,如果目標對象與源對象有同名屬性,或多個源對象有同名屬性,則后面的屬性會覆蓋前面的屬性。

Object.assign方法實行的是淺拷貝,而不是深拷貝。也就是說,如果源對象某個屬性的值是對象,那么目標對象拷貝得到的是這個對象的引用

對於這種嵌套的對象,一旦遇到同名屬性,Object.assign的處理方法是替換,而不是添加。

注意,Object.assign可以用來處理數組,但是會把數組視為對象。

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

//上面代碼中,Object.assign把數組視為屬性名為0、1、2的對象,因此源數組的0號屬性4覆蓋了目標數組的0號屬性1。

5、ES5有三個操作會忽略enumerablefalse的屬性。

  • for...in循環:只遍歷對象自身的和繼承的可枚舉的屬性
  • Object.keys():返回對象自身的所有可枚舉的屬性的鍵名
  • JSON.stringify():只串行化對象自身的可枚舉的屬性
  • ES6新增了一個操作Object.assign(),會忽略enumerablefalse的屬性,只拷貝對象自身的可枚舉的屬性。

總的來說,操作中引入繼承的屬性會讓問題復雜化,大多數時候,我們只關心對象自身的屬性。所以,盡量不要用for...in循環,而用Object.keys()代替

6、屬性的遍歷:

  1. for...in——遍歷對象自身的和繼承的可枚舉屬性(不含Symbol屬性)。
  2. Object.keys(obj)——返回一個數組,包括對象自身的(不含繼承的)所有可枚舉屬性(不含Symbol屬性)。
  3. Object.getOwnPropertyNames(obj)——返回一個數組,包含對象自身的所有屬性(不含Symbol屬性,但是包括不可枚舉屬性)。
  4. Object.getOwnPropertySymbols(obj)——返回一個數組,包含對象自身的所有Symbol屬性。
  5. Reflect.ownKeys(obj)——返回一個數組,包含對象自身的所有屬性,不管是屬性名是Symbol或字符串,也不管是否可枚舉。

以上的5種方法遍歷對象的屬性,都遵守同樣的屬性遍歷的次序規則。

  • 首先遍歷所有屬性名為數值的屬性,按照數字排序。
  • 其次遍歷所有屬性名為字符串的屬性,按照生成時間排序。
  • 最后遍歷所有屬性名為Symbol值的屬性,按照生成時間排序。

7、ES5 引入了Object.keys方法,返回一個數組,成員是參數對象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵名。ES2017 引入了跟Object.keys配套的Object.valuesObject.entries,作為遍歷一個對象的補充手段,供for...of循環使用。

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

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

上面代碼中,Object.create方法的第二個參數添加的對象屬性(屬性p),如果不顯式聲明,默認是不可遍歷的,因為p的屬性描述對象的enumerable默認是falseObject.values不會返回這個屬性。只要把enumerable改成trueObject.values就會返回屬性p的值。

8、現在有一個提案,引入了“Null 傳導運算符”(null propagation operator)?.

“Null 傳導運算符”有四種用法。

  • obj?.prop // 讀取對象屬性
  • obj?.[expr] // 同上
  • func?.(...args) // 函數或對象方法的調用
  • new C?.(...args) // 構造函數的調用

?.運算符,只要其中一個返回nullundefined,就不再往下運算,而是返回undefined


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM