JS 对象基本用法

170 阅读3分钟

本文内容:

  1. 声明对象的两种语法
  2. 如何删除对象的属性
  3. 如何查看对象的属性
  4. 如何修改或增加对象的属性
  5. 'name' in obj和obj.hasOwnProperty('name') 的区别

JS一共有7种基本类型,包括String,Number,Symbol,Bool,Undefined,Null 和Object。前六种都是简单的类型,只有对象是复杂类型。它的特点有:

  1. 他是无序的数据集合。无序是指里面的属性排列没有先后之分
  2. 也可以简单的理解为是键值对的集合

一、声明对象的两种写法

第一种:

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

第二种:

let obj = new Object({'name':'juejin','age':18})

第一种写法是最常用的写法,也是一种省略的写法。

第二种写法是正规的写法,这种写法可以看出它的原型是谁。

对象是键值对,键(keys)就是属性名,值就是属性值。如上面声明的对象obj,它的键(keys)为:'name','age'。它的值(values)为:'juejin',18

键名(keys)在任何时候都是字符串,不管有没有加''

如果不加'',那么如果是特殊的数值,js会自动先求值,再转换为字符串。 如:

     1e2:555  // 结果是'100':555
     11:333  // 结果是'0.11':333

所以打键名的时候,最好把''加上。

如果要把变量当作key,那么需要用[]包起来。 如:

    let a='xxx'
    let obj={ [a]:yyy}
    obj // ’xxx':'yyy'

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

二、如何删除对象的属性

第一种(点语法):

delete obj.xxx

第二种:

delete obj ['xxx']

可以通过输入以下代码来查询是否删除成功

'xxx' in obj

如果返回false,那么就删除成功了。

要注意区分 obj.xxx=undefined

上面那个代码只能删除属性的值,不能删除键。

三、如何查看对象的属性

3.1 查看自身所有的属性

查看自身属性的键:

Object.keys(obj)

会返回一个数组,数组里面的元素是键名的字符串。

查看自身属性的值:

Object.values(obj)

会返回一个数组,数组里面的元素是各个值。

查看自身属性的键和值:

Object.entries(obj)

会返回一个数组,数组里面的是由各个键值组成的数组。

3.2 查看自身属性加共有属性

console.dir(obj)

返回一个基本对象。

3.3 查看是自身属性还是共有属性

首先要确认对象是否有这个属性,用:

'xxx' in obj

返回true说明有这个属性,如果返回false说明没有这个属性。 再通过以下代码确认是否为自身属性:

obj.hasOwnProperty('xxx')

如果是自身属性,返回true,如果是共有属性,返回false。

3.4 只查一个属性的值

obj['xxx']

obj.xxx

拓展:

obj['xx'+'x']=obj['xxx']

易错点:

obj[xxx] 是错误的写法,这样的意思是查询xxx这个变量,不是一个字符串。

比如:

let obj={name:'xxx', age:22}
obj[name]

这时候会返回undefined,因为name是个全局变量,window.name的默认值为''(空字符串),空字符串的返回值为undefined。

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

4.1 直接赋值

let obj={name='xxx'}
obj.name='xxx'
obj['name']='xxx'
obj['na'+'me']='xxx'

4.2 批量赋值

Object.assign(obj,{name:'xxx',age:18})

4.3 修改共有属性

读的时候可以读到共有属性,但是写的时候只能写在自己身上。 实在想改,就要去原型上改:

obj.__proto__.toString='zzz'

或者:

Object.prototype.tiStroing='zzz'

五、'name' in obj和obj.hasOwnProperty('name') 的区别

两者都是查看属性

name' in obj没办法分清这个属性是自己的还是原型的

obj.hasOwnProperty('name')能判断出它是自己的。