JS對象的基本用法之增刪改查

概念理解

對象的定義：

• 無序的數據集合
• 鍵值對的集合

 

寫法：

let obj = {'name':'bubu_sourire','age':18}

let obj = new Object({'name':'bubu_sourire'})

console.log({'name':'bubu_sourire','age':18})

 

注意：

• 鍵是字符串，不是標識符，鍵中能夠包含任意字符
• 鍵的引號能夠省略，省略以後只能寫標識符，但即使省略引號，鍵也依舊是字符串。

 

關於屬性名（key/property）和屬性值（value）

• 每一個key都是對象的屬性名
• 每一個value都是對象的屬性值

 

屬性名示例：

let obj = {
    1:'a',
    3.2:'b',
    1e2:true,
    1e-2:true,
    .234:true,
    0xFF:true    
}

Object.keys(obj) //能夠獲得obj全部的key

= ["1", "100", "255", "3.2", "0.01", "0.234"]

 

變量作屬性名 與 常量作屬性名：

let per = 'name'

let obj1 = {per:'bubu_sourire'} //此處屬性名是 "per"

let obj2 = {[per]:'bubu_sourire'} //此處屬性名是 "name"

 

注意：

• 不加[]的屬性名會自動變成字符串
• 加了[]則會當作變量求值；值若是不是字符串，會自動變成字符串

 

對象的隱藏屬性

公用屬性與原型鏈

 

對象屬性的增刪改查

刪除屬性

• 刪除obj的xxx屬性

delete obj.xxx

delete obj.['xxx']

• 不含屬性名

'xxx' in obj === false

• 含有屬性名，可是指爲undefined

'xxx' in obj && obj.xxx = undefined

 

注意：

obj.xxx === undefined 不能判定'xxx'是否爲obj的屬性

 

 

 

查看屬性

兩種方法查看屬性

obj.key //點語法

obj.['key'] //中括號語法


obj.[key] //這個是獲取對象的變量key值，區別這種語法（！！！易踩坑，請慎重！！！）

 

注意：

• obj.name 等價於 obj.['name']（字符串）；
• obj.name 不等價於 obj.[name]（變量值）；
• 這裏的name是字符串，不是變量。
• let name = 'bubu_sourire'   =>  obj.[name] 等價於 obj.['frank']

 

對比示例

person.name

 

person[name]

 

 

 

 

• 查看自身全部屬性

Object.keys(obj)

• 查看自身及共有屬性

console.dir(obj)

或依次用Object.keys打印出obj.__proto__

• 判斷一個屬性是自身的仍是共有的

let obj = {'aaa':111}

obj.hasOwnProperty('aaa') //true
obj.hasOwnProperty('toString')  //false

 

修改或增長屬性

直接賦值

let obj = {name:'aaa'} //name是字符串
obj.name = 'bbb' //name是字符串
obj['name'] = 'ccc'
obj['na'+'me'] = 'ddd'

obj[name] = 'eee' //!!錯誤!! name值不肯定


let key = 'name'
obj.[key] = 'ddd' //等價於 obj['name']

obj.key = 'ddd' //!!錯誤!! 此處的obj.key等價於 obj.['key'] 

 

批量賦值

Object.assign(obj,{age:18,gender:'man'})

 

修改或增長共有屬性

沒法經過自身修改或增長共有屬性，改也只是改自身的屬性

 

 

能夠使用 obj.__proto__.toString = 'xxx' 修改共有屬性，可是不推薦

 

 

推薦使用Object.create

let obj = Object.create(common)

let obj = Object.create(common,{key1:{value:'value1'},key2:{value:'value2'}})