重走es6之es6物件

看到這裡突然就想到，你有物件嗎？我沒有(哭的超大聲)

es6中規定可以直接在物件中寫入變數和函式作為物件的屬性和方法，此時屬性名為變數名，屬性值為變數的值。物件的簡寫在專案中使用頻率極其高。

let name=
"zhangsan"
let age=
18let obj=
}console.
log(obj)
//結果為
obj.
sayname()
//結果為my name is zhangsan

es6中對於object的拓展主要是靜態方法的拓展。

console.
log(
1===1)
;//true
console.
log(object.is(
1,1)
);//true
object.is(
"q",
"q")
;// true
object.is(
1,1)
;// true
object.is(
[1],
[1])
;// false
object.is(
,);// false
//一是+0不等於-0
object.is(
+0,-
0);//false+0
===-
0//true
//二是nan等於本身
object.is(
nan,
nan)
;//true
nan===
nan//false

let target =
;let object2 =
;let object3 =
;object.
assign
(target,object2,object3)
;// 第乙個引數是目標物件，後面的引數是源物件
console.
log(target)
;//

object.
assign(3
);// number 
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 
object.
assign(,
null);
// 
object.
assign
(undefined,);
// typeerror: cannot convert undefined or null to object

注意點:

淺拷貝指的是複製物件時只是包含對該物件的引用

實現物件的淺複製，可以使用object.assign方法

// 物件的淺拷貝
let sourceobj =};
let targetobj =
;object.
assign
(targetobj, sourceobj)
;//當我們去修改targetobj.a.b=20000時，因為targetobj.a.b和sourceobj.a.b指向的同乙個引用位址，
//那麼我們變更targetobj.a.b的值，那麼sourceobj.a.b的值也會隨之改變，這就稱為淺拷貝
targetobj.a.b =
20000
;console.
log(targetobj.a.b)
//20000
console.
log(sourceobj.a.b)
//20000

不過對於深複製來說，object.assign方法無法實現

拓展點:深複製

在實際的開發專案中，前後端進行資料傳輸，主要是通過json實現的。

json物件下有兩個方法:

let obj =}}
;let copy =
json
.parse
(json
.stringify
(obj));
// 對obj物件無論怎麼修改，都不會影響到copy物件
obj.b.c =
'hello'
;obj.b.d.e =
'world'
;console.
log(copy)
;// }}

當然，使用這種方式實現深複製有乙個缺點就是必須給json.parse方法傳入的字串必須是合法的json，否則會丟擲錯誤

陣列的處理

object.
assign([
2,3]
,[5]
);// [5,3]

會將陣列處理成物件，所以先將 [2,3] 轉為，然後再進行屬性複製，所以源物件的 0 號屬性覆蓋了目標物件的 0

//原型方法
let obj =};
//設定obj的原型物件
let obj2 =};
object.
setprototypeof
(obj, obj2)
;//並沒用修改建構函式中指向的原來的原型物件
console.
log(obj.__proto__);//
console.
log(obj.constructor.prototype)
;//{}
console.
log(object.
getprototypeof
(obj));
//

//遍歷物件的方式  有三種
let obj =
//獲取所有屬性名組成的陣列
let keys = object.
keys
(obj)
;//獲取所有屬性值組成的陣列
let values = object.
values
(obj)
;//獲取所有鍵值對組成的陣列
let entries = object.
entries
(obj)
;console.
log(keys)
;console.
log(values)
;console.
log(entries)
;//遍歷物件，得到物件的屬性和屬性值
//遍歷物件可以使用for in
for(
let key in obj)
keys.
foreach
((item)
=>);
entries.
foreach
((item)
=>
)

拓展運算子（…）用於取出引數物件所有可遍歷屬性然後拷貝到當前物件。

基本用法:

let person =
;let someone =
;console.
log(someone)
;//

可用於合併兩個物件

let age =
;let name =
;let person =
;console.
log(person)
;//

注意點：自定義的屬性和拓展運算子物件裡面屬性相同的時候：自定義的屬性在拓展運算子後面，則拓展運算子物件內部同名的屬性將被覆蓋掉。

let person =
;let someone =
;console.
log(person)
;//

拓展運算子後面是空物件，沒有任何效果也不會報錯。

let a =
, a:
1, b:2}
;console.
log(a)
;//

拓展運算子後面是null或者undefined，沒有效果也不會報錯。

let b =
;console.
log(b)
;//

ES6 物件擴充套件

es6 允許直接寫入變數和函式，作為物件的屬性和方法 var key1 1 var bj var bz 方法的簡寫 var ob fn2 表示式還可以用於定義方法名。var lastword last word var a a first word hello a lastword world a ...

ES6物件擴充套件

es6允許直接寫入變數和函式，作為屬性名和方法 var a b var c c 如果屬性值與屬性名一樣，我們值寫屬性名就可以方法簡寫 add add function 定義物件屬性有兩種方法 obj.name lijixuan 2obj name lijixuan 我們原本只能用識別符號定義屬性，...

ES6 物件擴充套件

物件擴充套件主要從四個方面開展 1.簡潔表示法 2.屬性表示式 3.擴充套件運算子 4.object新增方法 let es6 console.log es5,es6 object object 在es5中，我們去定義物件，多使用鍵值對的方式來定義，在es6中，我們直接使用變數名稱來定義就可以了。是不...

重走es6之es6物件

ES6 物件擴充套件

ES6物件擴充套件

ES6 物件擴充套件

相關推薦