JS数据类型(2)

吐槽君 分类:javascript

JS数据类型一共有八种:数字 number、字符串 string、布尔 boolean、符号 symbol、空 undefined、空 null、bigint、对象object。

上次整理了前七种,今天来整理第八种对象object

对象

定义

  • 无序的数据集合

  • 键值对的集合

写法

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

细节

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

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

就算引号省略了,键名也还是字符串(没有数字键名)

属性名和属性值

每个key都是对象的属性名(property)

每个value都是对象的属性值

奇怪的属性名

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

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"]
 

细节

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

变量做属性名

如何用变量做属性名

这里的a是字符串,所以key是a,而不是变量a='xxx'

image-20210319215414306.png

那如何用变量做属性名呢?

ES6新增语法,可以用变量a做属性名,得出key是xxx

image-20210319215606670.png

对比

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

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

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

对象的隐藏属性

隐藏属性

JS中每一个对象都有一个隐藏属性,隐藏属性储存着其共有属性组成的对象的地址,这个共有属性组成的对象叫做原型,也就是说,隐藏属性储存着原型的地址。

代码示例

因为obj的隐藏属性对应的对象上有 toString

 var obj = {}
 obj.toString()//不报错
 

image-20210320214340822.png

超纲知识

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

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

这有什么用呢?

在学习[迭代]时会用到

对象的增删改查

删除属性

delete obj.xxxdelete obj['xxx']

undefined删除的是属性值,而delete删除的是属性名和属性值

image-20210320215730549.png

image-20210320215907437.png

不含属性名

可以用'字符串' in obj来检查是否已删除,注意上面的写法是错误的

image-20210320220400328.png

含有属性名,但是值为undefined

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

注意 obj.xxx === undefined

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

读属性

查看所有属性

查看自身所有属性
`Object.keys(obj)`

三种方式——
 

image-20210320225001377.png

查看自身+共有属性
`console.dir(obj)`

或者

自己依次用`Object.keys`打印出`obj.__proto__`

*推荐第一种*
 

image-20210320225752196.png

判断一个属性是自身的还是共有的
`obj.hasOwnProperty('toString')`

比如,toString是共有的,返回false;name是自身的,返回true——
 

image-20210320225950923.png

原型

每个对象都有原型
原型里存着对象的共有属性,比如obj的原型就是一个对象,`obj.__proto__`存着这个对象的地址,这个对象里有toString/constructor/valueOf等属性
 
对象的原型也是对象
所以对象的原型也有原型,`obj={}`的原型即为所有对象的原型,这个原型包含所有对象的共有属性,是**对象的根**,这个原型也有原型,是null
 

查看属性

两种方法查看属性
  • 中括号语法:obj['key']

  • 点语法:obj.key

  • 坑人语法:obj[key]//变量key,不是字符串'key'

注意!!
obj.name等价于obj['name']
  `obj.name`不等价于`obj[name]`

  因为`obj.name`里的name是字符串,不是变量。
 
let name = 'frank'
  `obj[name]`等价于`obj['frank']`

  而不是`obj['name']`和`obj.name`
 
```javascript
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__???__)
}
```

选择哪项,可使person的所有属性被打印出来?

A. `console.log(person.name)`

B.`console.log(person[name])`

**B选项name相当于变量,而不是字符串,可以替代字符串'name','age','gender'**
 

增改属性

修改或增加属性(写属性)

直接赋值
```javascript
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']
```
 
批量赋值
`Object.assign(obj,{age:18,gender:'man'})`
 

修改或增加共有属性

无法通过自身修改或增加共有属性
`let obj = {},obj2 = {}`//共有 toString

`obj.toString = 'xxx'`只会改obj的自身属性

`obj2.toString`还是在原型上
 

image-20210321005127595.png

偏要修改或增加原型上的属性
`obj.__proto__.toString = 'xxx'`//不推荐用`__proto__`

`Object.prototype.toString = 'xxx'`

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

修改隐藏属性

不推荐使用__proto__
```javascript
let obj = {name:'frank'}
let obj2 = {name: 'jack'}
let common = {kind: 'human'}
obj.__proto__ = common
obj2.__proto__ = common
```

原型链
 

image-20210321011434741.png

推荐使用Object.create
```javascript
let obj = Object.create(common)
obj.name = 'frank'
let obj2 = Object.create(common)
obj2.name = 'jack'
```

规范大概的意思是,要改就一开始改,不要后来再改
 

回复

我来回复
  • 暂无回复内容