JS对象基本用法

267 阅读3分钟

今天总结一下关于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.xxxdelete 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'

就会得到以下结果:

image.png

注意点

JS对象基本用法中,还有一个非常值得注意的点,那就是'name' in objobj.hasOwnProperty('name')的区别。

前者是用来判断对象obj中是否含有name属性.

image.png

后者用来判断对象中的name是属于对象本身还是属于对象的原型,如果不清楚的话可以画一画JS内存图来帮助理解。

image.png

以上就是本人目前掌握的JS对象基本用法的总结。

©本总结教程版权归作者所有,转载需注明出处