ES6 物件概述
ES6, 全稱 ECMAScript 6.0 ,是 JavaScript 的下一個版本標準,2015.06 發版。ES6 主要是為了解決 ES5 的先天不足,比如 JavaScript 裡並沒有類的概念。 |
ES6允許物件的屬性直接寫變數,這時候屬性名是變數名,屬性值是變數值。
const age = 12; const name = "Amy"; const person = {age, name}; person //{age: 12, name: "Amy"} //等同於 const person = {age: age, name: name}
const person = { sayHi(){ console.log("Hi"); } } person.sayHi(); //"Hi" //等同於 const person = { sayHi:function(){ console.log("Hi"); } } person.sayHi();//"Hi"
如果是Generator 函式,則要在前面加一個星號:
const obj = { * myGenerator() { yield 'hello world'; } }; //等同於 const obj = { myGenerator: function* () { yield 'hello world'; } };
ES6允許用表示式作為屬性名,但是一定要將表示式放在方括號內。
const obj = { ["he"+"llo"](){ return "Hi"; } } obj.hello(); //"Hi"
注意點:屬性的簡潔表示法和屬性名錶達式不能同時使用,否則會報錯。
const hello = "Hello"; const obj = { [hello] }; obj //SyntaxError: Unexpected token } const hello = "Hello"; const obj = { [hello+"2"]:"world" }; obj //{Hello2: "world"}
擴充運算子(...)用於取出引數物件所有可遍歷屬性然後複製到當前物件。
let person = {name: "Amy", age: 15}; let someone = { ...person }; someone; //{name: "Amy", age: 15}
let age = {age: 15}; let name = {name: "Amy"}; let person = {...age, ...name}; person; //{age: 15, name: "Amy"}
自定義的屬性和擴充運算子物件裡面屬性的相同的時候:自定義的屬性在擴充運算子後面,則擴充運算子物件內部同名的屬性將被覆蓋掉。
let person = {name: "Amy", age: 15}; let someone = { ...person, name: "Mike", age: 17}; someone; //{name: "Mike", age: 17}
自定義的屬性在擴充運算度前面,則變成設定新物件預設屬性值。
let person = {name: "Amy", age: 15}; let someone = {name: "Mike", age: 17, ...person}; someone; //{name: "Amy", age: 15}
擴充運算子後面是空物件,沒有任何效果也不會報錯。
let a = {...{}, a: 1, b: 2}; a; //{a: 1, b: 2}
擴充運算子後面是null或者undefined,沒有效果也不會報錯。
let b = {...null, ...undefined, a: 1, b: 2}; b; //{a: 1, b: 2}
用於將源物件的所有可列舉屬性複製到目標物件中。
基本用法
let target = {a: 1}; let object2 = {b: 2}; let object3 = {c: 3}; Object.assign(target,object2,object3); // 第一個引數是目標物件,後面的引數是源物件 target; // {a: 1, b: 2, c: 3
- 如果目標物件和源物件有同名屬性,或者多個源物件有同名屬性,則後面的屬性會覆蓋前面的屬性。
如果該函式只有一個引數,當引數為物件時,直接返回該物件;當引數不是物件時,會先將引數轉為物件然後返回。
Object.assign(3); // Number {3}
typeof Object.assign(3); // "object"
因為 null 和 undefined 不能轉化為物件,所以會報錯:
Object.assign(null); // TypeError: Cannot convert undefined or null to object Object.assign(undefined); // TypeError: Cannot convert undefined or null to object 當引數不止一個時,null 和 undefined 不放第一個,即不為目標物件時,會跳過 null 和 undefined ,不報錯 Object.assign(1,undefined); // Number {1} Object.assign({a: 1},null); // {a: 1} Object.assign(undefined,{a: 1}); // TypeError: Cannot convert undefined or null to object
注意點
assign 的屬性複製是淺複製:
let sourceObj = { a: { b: 1}}; let targetObj = {c: 3}; Object.assign(targetObj, sourceObj); targetObj.a.b = 2; sourceObj.a.b; // 2
同名屬性替換
targetObj = { a: { b: 1, c:2}}; sourceObj = { a: { b: "hh"}}; Object.assign(targetObj, sourceObj); targetObj; // {a: {b: "hh"}}
陣列的處理
Object.assign([2,3], [5]); // [5,3]
會將陣列處理成物件,所以先將 [2,3] 轉為 {0:2,1:3} ,然後再進行屬性複製,所以源物件的 0 號屬性覆蓋了目標物件的 0。
用來比較兩個值是否嚴格相等,與(===)基本類似。
基本用法
Object.is("q","q"); // true Object.is(1,1); // true Object.is([1],[1]); // false Object.is({q:1},{q:1}); // false
與(===)的區別
//一是+0不等於-0 Object.is(+0,-0); //false +0 === -0 //true //二是NaN等於本身 Object.is(NaN,NaN); //true NaN === NaN //false
原文來自:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2700599/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- JavaScript物件概述JavaScript物件
- XMLHttpRequest 物件概述XMLHTTP物件
- ES6 - 物件物件
- ES6知識點概述
- ES6——Promise 物件Promise物件
- CSS規則物件概述CSS物件
- Java 物件導向概述Java物件
- ES6的Promise物件Promise物件
- JavaScript ES6 Promiss物件JavaScript物件
- ES6遍歷物件物件
- XML DOM Parse Error 物件概述XMLError物件
- 深入理解ES6 --- 物件物件
- ES6中的Promise物件Promise物件
- ES6語法——Promise物件Promise物件
- ES6語法(三) 物件物件
- 【深入淺出ES6】物件物件
- uniCloud雲函式概述---雲物件Cloud函式物件
- java 物件導向必懂概述Java物件
- ES6解構巢狀物件巢狀物件
- ES6 物件的擴充套件物件套件
- ES6的Promise物件的使用Promise物件
- ES6中物件新增的方法物件
- 物件導向(軟體開發概述)物件
- ES6 中 Promise物件使用學習Promise物件
- ES6 判斷是否為空物件物件
- 原生es6封裝一個Promise物件封裝Promise物件
- es6完全深複製一個物件物件
- JavaScript物件導向—深入ES6的classJavaScript物件
- ES學習筆記(11)--ES6中物件筆記物件
- ES6新增的陣列方法和物件方法陣列物件
- ES6學習筆記(三)【函式,物件】筆記函式物件
- ES6 物件和陣列解構小記物件陣列
- ES6中的class物件和它的家人們物件
- JavaScript中的物件學習筆記(概述和建立)JavaScript物件筆記
- ES6物件的擴充套件及新增方法。物件套件
- 測試 ES6 Promise 物件的鏈式傳值Promise物件
- 【JavaScript】ES5/ES6 建立物件與繼承JavaScript物件繼承
- OOP物件導向程式設計(Object-Oriented Programming)概述OOP物件程式設計Object