天天看點

20·靈魂前端工程師養成-JavaScript對象

  • JS對象基本用法
  • JS對象的增删改查
-曾老濕, 江湖人稱曾老大。

-多年網際網路運維工作經驗,曾負責過大規模叢集架構自動化運維管理工作。

-擅長Web叢集架構與自動化運維,曾負責國内某大型金融公司運維工作。

-devops項目經理兼DBA。

-開發過一套自動化運維平台(功能如下):

1)整合了各個公有雲API,自主建立雲主機。

2)ELK自動化收集日志功能。

3)Saltstack自動化運維統一配置管理工具。

4)Git、Jenkins自動化代碼上線及自動化測試平台。

5)堡壘機,連接配接Linux、Windows平台及日志審計。

6)SQL執行及審批流程。

7)慢查詢日志分析web界面。

JS對象基本用法

JS對象

定義:無序的資料集合,鍵值對的集合

寫法:

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

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

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

複制

奇怪的屬性名:

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

Object.keys(obj)
["1","100","255","3.2","0.01","0.234"]           

複制

使用變量做屬性名:

var a = 'xxxx'

var obj = {
    
    [a]: 1
}

obj
{xxxx: 1}           

複制

20·靈魂前端工程師養成-JavaScript對象

var obj = {
    [1+2+3+4]: '十'
}

obj
{10: "十"}

Object.keys(obj)
["10"]           

複制

20·靈魂前端工程師養成-JavaScript對象

JS對象的增删改查

删除屬性
// 方法1
var obj = {name: 'zls', age: 18}

delete obj.name
true

obj
{age: 18}

// 方法2
var obj3 = {name: 'zls', age: 18}

delete obj['name']
true

// 方法3
var obj2 = {name: 'zls', age: 18}

obj.name = undefined

obj
{age: 18, name: undefined}           

複制

delete 删除key 和 value

undefined 隻删除 value

20·靈魂前端工程師養成-JavaScript對象

判斷是否删除成功:

// 判斷key在不在對象中
'name' in obj
false

'age' in  obj

true


// 判斷key在不在對象中,如果在,值是不是undefined
var obj4 = {name: 'zls', age: 18}

obj.name = undefined

'name' in obj && obj.name === undefined
true           

複制

20·靈魂前端工程師養成-JavaScript對象

檢視屬性(讀屬性)
// 定義對象
var obj = {name: 'zls', age: 18}

// 檢視對象的key
Object.keys(obj)
(2) ["name", "age"]


// 檢視對象的value
Object.values(obj)
(2) ["zls", 18]

// 既檢視key 又檢視value
obj
{name: "zls", age: 18}

Object.entries(obj4)
(2) [Array(2), Array(2)]
0: (2) ["name", "zls"]
1: (2) ["age", 18]

// 檢視自身屬性+共有屬性
console.dir(obj)
VM1405:1 Objectname: "zls"age: 18__proto__: Object


obj.__proto__  // 這種方式不推薦
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

// 判斷是否含有某屬性
'toString' in obj
true

// 判斷這個屬性是自身的 還是共有的

obj.hasOwnProperty('toString')
false

obj.hasOwnProperty('name')
true           

複制

必須搞清楚的一道題:

let list = ['name','age','gender']
let person = {
  name: 'zls',age: 18,gender: 'male'
}

for(let i=0;i<list.length;i++){
  let name = list[i]
}

// 如何列印出person的所有屬性?
console.log(person.name)
console.log(person['name'])
console.log(person[name])           

複制

增加、修改屬性(寫屬性)
//直接指派
let obj = {name: 'zls'} //name是字元串
obj.name = 'zls' //name是字元串
obj['name'] = 'zls'

obj[name] = 'zls' //錯,因為name值不确定

obj['na'+'me'] = 'zls'

let key = 'name';obj[key] = 'zls'

let key = 'name';obj.key = 'zls' //錯,因為obj.key 等價于 obj['key']

//批量指派
Object.assing(obj,{age: 18,gender: 'male'})           

複制

var obj = {name: 'zls'}

obj.name = 'drz'
"drz"

obj.age = 80
80

obj
{name: "drz", age: 80}

obj.gender = 'male'
"male"

obj
{name: "drz", age: 80, gender: "male"}

Object.assign(obj,{height: 182,weight: 120})
{name: "drz", age: 80, gender: "male", height: 182, weight: 120}           

複制

20·靈魂前端工程師養成-JavaScript對象

修改或增加共有屬性

1、無法通過自身修改或增加共有屬性

let obj = {} obj2 = {} //共有 toString
obj.toString = 'xxx' // 隻會修改在obj自身屬性
obj2.toString // 還是在原型上           

複制

2.偏要修改或增加原型上的屬性

obj.__proto__.toString = 'xxx' //不推薦使用__proto__

Object.prototype.toString = 'xxx' // 但是一般來說不要修改原型,會引起很多問題           

複制

20·靈魂前端工程師養成-JavaScript對象

修改隐藏屬性

1、不推薦使用

__proto__

let oobj = {name: 'zls'}
let obj2 = {name: 'drz'}
let common = {kind: 'human'}

obj.__proto__ = common
obj2.__proto = common           

複制

2、推薦使用

Object.create

let obj = Object.create(common)
obj.name = 'zls'

let obj2 = Object.create(common)
obj2.name = 'drz'           

複制