今天总结一下关于JS的一座大山,那就是JS的对象(object)。
对象的定义是可以是:
- 无序的数据集合
- 键值对的集合
声明对象的写法
声明对象的写法可以是:
let obj = { 'name':'frank','age': 18 }; //习惯写法
let obj = new Object({'name':'frank'}); //标准写法
console.log({'name':'frank','age': 18 })
其中,'name':'frank'为对象obj的属性,name为对象的key,即属性名(property);frank为对象的value,即属性值。
另有一些细节值得注意:
- 键名是字符串,不是标识符,可以包含任意字符;
- 引号可以省略,但是省略之后只能写标识符,且省略后键名依旧是字符串。
当使用变量作属性名时,要使用[]括起来才能当作是变量求值作属性名,不然属性名会自动变成字符串,例如:
let p1 = 'name';
let obj = {p1 : 'frank'} //这样写属性名为'p1';
let obj = {[p1]:'frank'} //这样写属性名为'name'
删除对象属性写法
想要删除对象属性,可以使用:
delete obj.xxx或delete obj['xxx'] //可删除obj的xxx属性
obj.xxx = undefined //只删除xxx的属性值
使用delete会直接删除对象的整个xxx属性,包括属性名和属性值。
想要查看xxx属性是否在对象中,可以执行:
'xxx' in obj; //xxx属性在对象中
'xxx' in obj&&obj.xxx === undefined //对象中含有属性名,但值为undefined
然后查看返回值是true还是false来判断是否在对象中,但不能判断属性是在对象中还是在对象的隐藏属性中,想要准确判断,需要执行下列代码:
obj.hasOwnProperty('xxx')
查看对象属性写法
想要查看对象的属性,可以使用:
Object.keys(obj) //查看自身所有属性
console.dir(obj) //查看自身所有属性+共有属性
obj.hasOwnProperty('toString') //判断属性是属于自身有还是共有
其中需要特别特别特别注意的是,obj.name等价于obj['name'],而obj.name不等价于obj[name]。因为obj.name中的name表示的是字符串,而obj[name]中的[name]表示的是name这个变量。
修改或增加对象属性写法
修改和增加属性在命令上是一致的,修改只是一个重写的过程,具体写法如下:
let obj = {name: 'frank'} //name是字符串
obj.name = 'frank' //name是字符串
obj['name'] = 'frank' //name是字符串
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'})
同时,JS也可以修改共有属性,但无法通过自身修改或增加共有属性:
let obj = {},obj2 = {} //共有toString
obj.toString = 'xxx' //只会修改obj的自身属性
obj2.toString //obj2的toString还是在其原型上
如果一定要修改或者增加原型上的属性的话,推荐使用:
let common = {'a':1}
let obj = Object.create(common)
obj.name = 'frank'
let obj2 = Object.create(common)
obj2.name = 'jack'
就会得到以下结果:
注意点
JS对象基本用法中,还有一个非常值得注意的点,那就是'name' in obj和obj.hasOwnProperty('name')的区别。
前者是用来判断对象obj中是否含有name属性.
后者用来判断对象中的name是属于对象本身还是属于对象的原型,如果不清楚的话可以画一画JS内存图来帮助理解。
以上就是本人目前掌握的JS对象基本用法的总结。