天天看点

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'           

复制