JS对象基本用法

151 阅读3分钟

JS对象

JS对象定义:无序的数据集合,键值对的集合。

无序:就是没有固定顺序,不是按一二三四五六这种有规律的排法

键值对:

键由 key 翻译而来,值由 value 翻译而来。

说简单点就是:

键 → key → 属性名

值 → value → 属性值

另外对象是JS七种数据类型中唯一一种复杂类型,其他六种为简单类型。

因为对象可以包含其他六种类型的数据,甚至能包含自己,但是其他六种类型不行。

声明JS对象的语法

//最正规写法
let obj = new Object({'name':'Tom','age':18})

//常用的简约写法
//实际工作中,name和age往往省略了引号'',但这里即使不加,也要知道name和age是字符串!
let obj = {name:'Tom',age:18}

//上面两种都要新对象起名字,下面是匿名对象的写法
console.log({'name':'Tom','age':18})

如何删除对象的属性

let obj = {name:'Lily',age:18}
//Lily显然是一个女孩的名字,女生的年龄一般是不方便透露的,那么想把age属性删除掉,咋办?

//方法1:
obj.name = undefined

//方法2:
delete obj['name']

//方法2的简单写法:
delete obj.name

不严格的来说,两种方法都能达到效果,但是有所区别:

方法1只是把属性 age 的值变成了 undefined ,也就是把属性值给删除了,这个属性依然还在。

方法2是不仅把属性 age 的值,也就是 18 给删除了,同时也把属性名 age 给删除了(整个属性连根拔起)。

可以用这个方法来检验删除成功了没有:

'age' in obj

//注意'age'要带引号
//方法1返回true,因为age属性还在,只是值变成了undefined
//方法2返回false,因为整个age属性都被删除了

如何查看对象的属性

let obj = {name:'Tom',age:18}

//查看属性名
Object.keys(obj)
>["name","age"]

//查看属性值
Object.values(obj)
>["Tom",18]

//属性名和属性值一起查看
Object.entries(obj)
>(2)[Array(2),Array(2)]
 0:(2)["name","Tom"]
 1:(2)["age",18]
 
 //查看共有属性
 console.dir(obj)
 >age:18
 >name:'Tom'
 >__proto__:...
 //dir就是把所有属性,以目录的形式打出来
 //age和name是obj自身本来就有的,所以是自身属性
 //__proto__是每个对象都会有的一个隐藏属性,所以是共有属性
 
 //直接查看共有属性
 obj.__proto__
 //这样也能达到效果,但是不推荐
 //因为不同浏览器对共有属性对象的命名可能不一样,在chrome上叫__proto__在别的浏览器上就同了

如何修改或增加对象的属性

//直接赋值:
let obj = {name:'Tom'}
//这样就算给对象obj直接添加了name属性

//同样的方法,不同写法:
let obj = {}
obj['name'] = 'Tom'

let obj = {}
obj.name = 'Tom' 

//无聊抽风但是同样能达到效果的写法:
let obj = {}
obj[ 'na' + 'me' ] = 'Tom'
//这样写,JS引擎会先把'na'和'me'组成'name',再赋值
//但是一般不要这么写,会被打死的

//上面都是一个一个修改或增加属性的,如何批量修改呢:
let obj = {}
Object.assign(obj,{name:'Tom',age:18,gender:'boy'})

一些补充

讨论删除对象属性的时候,提到了检测删除成功与否的方法:

'age' in obj

但还有一种方法,也能用来检测删除属性成功与否:

obj.hasOwnProperty('age') 

那么两者有什么区别呢?

in 可以用来检测对象里是否存在某个属性,但是并不区分自身属性和共有属性,而 hasOwnProperty 是区分的:

let obj = {'name':'Tom','age':18}

'age' in obj //true
'toString' in obj //true

obj.hasOwnproperty('age') //true
obj.hasOwnproperty('toString') //false
//因为toString是obj对象共有属性中的一个属性,不是obj的自身本来设定的属性,所以返回false

PS:这里#409代表内存中的地址,实际可能是别的数字