物件的新增方法 ES6重刷10

2021-09-28 10:56:41 字數 3944 閱讀 7223

在這裡我會寫些自己認為es6此書中常用的物件方法及注意事項

一、object.assign(target, source)

作用:將所有可列舉屬性的值從乙個或多個源物件【source】複製到目標物件【target】。

target:可以是物件也可以是陣列

source:可以是物件、陣列、字串【允許多個】

基本用法

const obj1 =

const obj2 =

// 情況一

console.

log(object.

assign(,

))// source可以為乙個

console.

log(object.

assign

(, obj1, obj2 )

)// source也可以為多個

// 情況二

console.

log(object.

assign(,

['a'])

)//

// 情況三

console.

log(object.

assign(,

'a')

)//

// 情況四

console.

log(object.

assign([

], obj1, obj2)

)// [a: "a", b: "b"]類map資料結構

// 情況五

console.

log(object.

assign([

],['a'])

)// ["a"]

// 情況六

console.

log(object.

assign([

],'a')

)// ["a"]

注意事項

1、在作用於陣列或則物件的拷貝複製時

資料來源source中,若其內部子元素或則屬性值為基本型別時,object.assign()的拷貝為深拷貝;若其內部存在引用型別的子元素或則屬性值時,object.assign()的拷貝為淺拷貝。

let obj =,}

let arr =

['a'

,'b',[

'c',

'd']

]const copyobj = object.

assign

(, obj)

const copyarr = object.

assign([

], arr)

obj.c.foo =

'onchange'

arr[2]

= object.

assign

(arr[2]

,['3',

'4']

)console.

log(copyobj)

// }

console.

log(copyarr)

// ["a", "b", ["3", "4"]]

2、source的賦值存在替換規則

let obj =

let arr =

['a'

,'b'

]const copyobj = object.

assign

(, obj)

const copyarr = object.

assign([

1,2]

, arr)

console.

log(copyobj)

// console.

log(copyarr)

// ["a", "b"]

適用場景

1、為物件新增屬性

object.

assign(,

)

2、為物件新增方法

object.

assign(,

})

3、轉殖物件或則陣列【注意:其上述的注意事項一】

let obj =

let arr =

['a'

,'b'

]const copyobj = object.

assign

(, obj)

const copyarr = object.

assign([

], arr)

console.

log(copyobj)

// console.

log(copyarr)

// ["a", "b"]

4、合併多個物件【建議使用擴充套件運算子進行合併,只是單純的個人喜好】

object.

assign

(, obj1, obj2)

二、object.defineproperty(objectname, attrname, config…)

作用:重新定義某個屬性的屬性特性

適用場景:為物件的某些特定屬性修改原先的屬性特性,比如可列舉性,可重寫性,可配置性

注意事項:所對應的attrname的configurable必須為true,否則報錯

三、object.prototype.hasownproperty(attrname)

作用:判斷目標物件是否具有此屬性名,返回值為boolean型

適用場景:檢測目標物件是否具有此屬性名

const obj =

console.

log(obj.

hasownproperty

('a'))

// true

四、object.is(arg1, arg2)

作用:比較兩個值(物件)是否嚴格相等,返回值為boolean型

適用場景:判斷兩個值是否嚴格相等,包括可以比較nan與nan,+0與-0

object.is(

nan,

nan)

// true

object.is(

+0,-

0)// false

五、object.keys()、object.values()、object.entries()、object.fromentries()

**原因:因為這四個是對物件的鍵值對配套的操作方法

object.keys():以陣列形式返回鍵名

object.values():以陣列形式返回鍵值

object.entries():以map形式返回鍵值對

object.fromentries():將map形式資料轉化為物件

const

= object

const obj =

const mapstruct =

entries

(obj)

console.

log(

keys

(obj)

)// ["a", "b"]

console.

log(

values

(obj)

)// ["value_a", "value_b"]

console.

log(mapstruct)

// [["a", "value_a"], ["b", "value_b"]] map資料結構

console.

log(

fromentries

(mapstruct)

)//

詳細mdn文件

物件的擴充套件 ES6重刷09

物件擴充套件 一 屬性簡潔表示 const a a constb b const obj console.log obj 二 屬性名表示式 let obj const variable b obj.a a obj variable b console.log obj 三 屬性特性 可配置性 conf...

變數的解構 ES6重刷02

解構 解構分為兩中,一種為解,另外一種為構 通俗易懂的講就是解包 打包 原始包 const obj 解包 const obj 打包 const test test 解包的情形及注意點 陣列的解包,佔位一一對應,超出則為undefined let a,b d 1,2 3 4 a 1 b 2 d 4物件...

陣列的擴充套件 ES6重刷08

在此我會著重講擴充套件運算子 三點運算子 結合對於陣列的一些便捷操作及深拷貝 其次講講array例項的某些新的方法及注意事項 略帶iterator介面個返回值為iterator遍歷器物件的genrator函式function 最後講講哪些資料結構存在內建部署的iterator介面,而對於沒有內建部署...