24. JS 对象

24. JS 对象

回顾：

js的有哪7种数据类型？

5个fasly值分别是什么？

对象Object是第七种数据类型，唯一一种复杂类型

对象的语法

定义

无序的数据集合

键值对的集合

写法

let obj = {'name': 'frank','age':18}
let obj = new Object({'name':'frank'})
console.log({'name':'frank','age':18})

细节

键名是字符串，不是标识符，可以包含任意字符

引号可省略，省略之后就只能写标识符

‼️就算引号省略了，键名也还是字符串(重要)，看下面的例子

let obj = {
'': 1
}

obj
> {"":1}

let obj = {
 2: '22222'
}

obj
>{2:"22222"}

Object.keys(obj)
>"2"

var obj = {}

var obj = {
  '    ':1,
  '       ':2
}

var obj = {
  '中文': 1,
  ' 💌   ':2
}

什么是标识符，标识符是不能以数字开头

奇怪的属性名

所有属性名会自动变成字符串

let obj = {
 1: 'a',
 3.2:'b',
 1e2:true,//1e2=> 1 * 10^2 = 100 然后变成"100"
 1e-2:true,
 .234:true,
 0xFF:true//0xFF 会变成255，16进制转10进制
};
Object.keys(obj) => ['1', '100', '255', '3.2', '0.01', '0.234']

细节

Object.keys(obj)可以得到obj的所有key

变量作属性名

如何用变量做属性名

之前都是用常量做属性名

let p1 = 'name'

let obj = {p1 : 'frank'}这样写，属性名为'p1'

let obj = {[p1]:'frank'}这样写，属性名为'name'。（ES6新出的）

为什么要设计成 {[p1]:'frank'}这样的初衷

var obj = {}
obj[a] = 1234
var obj ={
[a] : 1234
}

对比

不加[]的属性名会自动变成字符串

加了[]则会当作变量求值

值如果不是字符串，则会自动变成字符串

对象的隐藏属性

隐藏属性

• JS中每一个对象都有一个隐藏属性

• 这个隐藏属性存储着其共有属性组成的对象的地址

• 这个共有属性组成的对象叫做原型

• 也就是说，隐藏属性存储着原型的地址

超纲知识

除了字符串，symbol也能做属性名

let a = Symbol()
let obj = {[a]:'Hello'}

这有什么用呢？

目前屁用都没有，很久很久以后会有用

在学习迭代时会用到

删属性

delete obj.xxx或delete obj['xxx']即可删除obj的xxx属性

请区分属性值为undefined和不含属性名

var obj = {name:'frank', age:18}
obj.name = undefined
obj 
>{name:undefined, age:18}
var obj2 = {name:'frank',age:18}
delete obj.name
>true
obj
>{age:18}
delete obj['name']
>true//<======'name'这个属性被删除，js不会报错
'name' in obj <=======看name在不在obj中
>false
'age' in obj
>true
name in obj
>false<========name没有被声明过，是个空值，所以是false

不含属性名

'xxx' in obj === false

含有属性名，但是值为undefined

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

注意obj.xxx === undefined

不能断定'xxx'是否为obj的属性

类比

你有没有卫生纸？

A:没有/不含属性名

B:有，但是没带//含有属性名，但是值为undefined

读属性

读属性也叫查看所有属性

查看自身所有属性

Object.keys(obj)//查看所有keys
Object.values(obj)//查看所有values
Object.entries//茶蛋所有keys和values

查看自身+共有属性

console.dir(obj)
或者自己依次用Object.keys打印出obj.__proto__

判断一个属性是自身的还是共有的

'toString' in obj //true in不管是自己的还是共有的
obj.hasOwnProperty('toString')//false

原型

每个对象都有原型

• 原型里存着对象的共有属性

• 比如obj的原型就是一个对象

• obj.__proto__存着这个对象的地址

• 这个对象里有toString/constructor/valueOf等属性

对象的原型也是对象

• 所以对象的原型也有原型

• obj={}的原型即为所有对象的原型

• 这个原型包含所有对象的共有属性，是对象的根

• 这个原型也有原型，是null

obj[console.log('name')]//undefined .log返回的是undefined

查看属性

两种方法查看属性

• 中括号语法:obj['key']

• 点语法:obj.key

• 坑新人语法：obj[key]

请优先使用中括号语法

• 点语法会误导你，让你以为key不是字符串

• 等你确定不会弄混两种语法，再改用点语法

obj.name等价于obj['name']
obj.name不等价于obj[name]
//简单来说，这里的name是字符串，而不是变量
let name = 'frank'
obj[name]等价于obj['frank']
//而不是obj['name']和obj.name

考题

看你分清变量name和常量字符串'name'没有

⚠️必须搞清楚这一题

代码

使得person的所有属性被打印出来

let list = ['name', 'age','gender']
let person = {
name:'frank',age:18,gender:'man'
}
for(let i = 0; i < list.length; i++){
let name = list[i]
console.log(person__???__)
}

选项

console.log(person.name) //1

console.log(person[name])//2 正确答案

什么时候想通这一题，什么时候睡觉，就是这么刚。

区分name和'name'为什么这么重要？

因为如果你现在不搞清楚，那么你在学Vue的时候，会更加迷惑

写属性

修改或增加属性（写属性）

直接赋值

let obj = {name: 'frank'}//name是字符串
obj.name = 'frank' //name 是字符串
obj['name'] = 'frank'
obj[name] = 'frank' //错， 因name值不确定
obj['na' + 'me'] = 'frank'
let key = 'name'; obj[key] = 'frank'
let key = 'name'; obj.key = 'frank' //错
因为obj.key等价于obj['key']

批量赋值

批量赋值是ES6新出的语法

Object.assign(obj,{age:18, gender:'man'})
//这段代码的意思是把{age:18, gender:'man'}赋值给obj

修改或增加共有属性

无法通过自身修改或增加共有属性

let obj = {}, obj2 = {}//共有toString
obj.toString = 'xxx'只会在改obj自身属性
obj2.toString还是在原型上

我偏要修改或增加原型上的属性

obj.__proto__.toString = 'xxx'//不推荐用__proto__
Object.prototype.toString = 'xxx'

上面这两个指向同一个地址

一般来说，不要修改原型，会引起很多问题

修改隐藏属性

不推荐使用__proto__

let obj = {name:'frank'}
let obj2 = {name:'jack'}
let common = {kind:'human'}
obj.__proto__ = common
obj2.__proto__ = common

推荐使用Object.create

let obj = Object.create(common)
obj.name = 'frank'
let obj2 = Object.create(common)
obj2.name = 'jack'

规范大概的意思是，要改就已开始就改，别后来再改

总结

删

delete obj['name']
'name' in obj//false
obj.hasOwnProperty('name')//false

查

Object.keys(obj)
console.dir(obj)
obj['name']
obj.name//记住这里的name是字符串
obj[name]//记住这里的name是变量

改

• 改自身obj['name'] = 'jack'

• 批量改自身Object.assign(obj,{age:18,...})

• 改共有属性obj.__proto__['toString']='xxx'

• 改共有属性Object.prototype['toString']='xxx'

• 改原型obj.__proto__=comon

• 改原型let obj = Object.create(common)

• 注：所有__proto__代码都是强烈不推荐写的

增

基本同上：已有属性则改，没有属性则增

答疑：原型包含了共有属性

答疑：obj.xxx === undefined

var obj = {}
var obj2 = {x: undefined}
obj.x === undefined
>true
obj2.x === undefined
>true
'x' in obj
>false
'x' in obj2
>true