这篇文章,我们专门来介绍看看 JS 对象的使用
对象 Object 是一个无序的数据类型集合,它是由键值对组成的集合。
语法
声明对象的语法一共有两种
let obj = {'name': 'xxx', 'age': 18}
let obj = new Object({'name': 'xxx'})
第一种方法实际上是第二种方法的简写,另外,我们还可以声明一个匿名对象console.log({'name':'xxx','age':18})
这里的 name
就是属性名 key
,每个 key
都是对象的属性名(property
)。这里 name
对应的 'xxx'
,就是对象的属性值 value
,每个 value
都是对象的属性值。
这里需要注意一个细节,键名是字符串,不是标识符。引号可以省略,省略以后就只能写标识符,也可以写数字。引号省略了,键名还是一个字符串。
接下来我们来看一组奇怪的属性名:
let obj = {
1: 'a',
3.2: 'b',
le2: true,
le-2: true,
.234: true,
0xFF: true
}
我们先来看一下打印出来的键名:
Object.keys(obj)
// ['1', '100', '255', '3.2', '0.01', '0.234']
由于没有引号,JS 会先对数字进行科学运算,转换成十进制数之后,再加上引号,此时才是真正的属性名。
我们还可以用变量作属性名:
let p1 = 'name'
var obj = {p1: 'xxx'} // 属性名为'p1'
var obj = {[p1]: 'xxx'} // 属性名为'name'
从这里我们可以看出,不加 []
的属性名会自动转换成字符串,加了 []
则会当作变量求值,值如果不是字符串,就会自动变成字符串。
所以我们通过这个规则可以再出一个例子:
var obj = {
[1+2+3+4]: "十"
}
// obj{'10': "十"}
然后我们看下对象的增删改查的属性
删除属性
删除属性的语法为:delete obj.xxx
或 delete obj['xxx']
,这样我们就可以删除 obj
的 xxx
属性。
注意:在 JS 中,删除不存在的属性,JS 不会报错。
**区分 "属性值为undefined" 和 “不含属性名” 这两个概念**
'xxx' in obj === false // 不含属性名
'xxx' in obj && obj.xxx === undefined // 含有属性名,但是属性值为 undefined
查看属性
- 查看自身属性
Object.Keys(obj)
- 查看自身 + 共有属性
console.log(obj)
- 判断一个属性是自身的还是共有的
obj.hasOwnProperty('toString')
- 查看值
Object.values(obj)
- 查看每一组键值
Object.entries(obj)
**
** 注意: 'name' in obj 和 obj.hasOwnProperty('name') 的区别。 'name' in obj 不会判断属性是自身的还是共有的
修改或增加属性
- 直接赋值
let obj = {name: 'xxx'}
obj.name = 'yyy'
obj['name'] = 'yyy'
obj['na' + 'me'] = 'yyy'
**
- 批量赋值
Object.assign(obj, {age: 18, gender: 'man'})
注意:如果对象不包含 name 属性,那么就创建 name 并设置属性值,否则直接修改 name 的属性值。 ** 本次关于 JS 对象的基本用法暂时告一段落,之后会对属性的修改和新增再进行内容补充。