JS 对象基本用法

270 阅读3分钟

对象是JS的复杂类型,也是7种数据类型之一,下面就来介绍对象的创建以及对象的增删改查。

对象

定义

  • 无序的数据集合
  • 键值对的集合

写法

let obj = {'name': 'hong', 'age':18}(更简单)
let obj = new Object ({'name':'hong'})(更规范)
console.log({'name': 'hong', 'age':18})

注意细节:

  • 键名是字符串,不是标识符,可以包含任意字符(可以是空字符串,也可以是空格字符串)
  • 引号可以省略,省略后只能写标识符
  • 就算引号省略了,键名也还是字符串

对象属性

  • 属性名:每个key都是对象的属性名
  • 属性值:每个value都是对象的属性值
  • 所有属性名都会自动变成字符串

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

变量作属性名

之前都是用常量作属性名

let p1 = 'name'
let obj = {p1:'hong'},这样写属性名为p1
let obj = {[p1]:'hong'}这样写,属性名为'name'

对比

  • 不加[]的属性会自动变成字符串
  • 加了[]则会当成变量先求值
  • 值如果不是字符串,则会自动变成字符串

对象的隐藏属性

  • JS中每一个对象都有一个隐藏属性
  • 这个存储着其共有属性组成的对象的地址
  • 这个共有属性组成的对象叫做原型
  • 也就是说隐藏属性存储着原型的地址
var obj{}
obj.toString()//不报错
//因为obj的隐藏属性对应的对象上有toString

对象的增删改查操作

删除属性

  • delete obj.xxx或者delete obj.['xxx']即可删除obj的xxx属性

  • 不含属性名

'xxx' in obj===false
  • 含有属性名,但是值为undefined ```
'xxx' in obj&&obj.xxx===undefined

*注意 obj.xxx===undefined 不能判定'xxx'是否为obj的属性

查看所有属性(读属性)

  • 查看自身所有属性:
Object.keys(obj)
  • 查看自身+共有属性: console.dir(obj)

或者自己依次用Object.keys打印出 obj.__proto__(不推荐)

  • 判断一个属性是自身的还是共有的:
obj.hasOwnProperty('toString')

查看属性

两种方法查看属性

  • 中括号语法:obj['key']
  • 点语法:obj.key
  • 注意obj[key]//变量key值一般不为'key'

PS:优先使用中括号语法,点语法会误导你认为key不是字符串

增加或修改属性(写属性)

直接赋值

let obj = {name:'ben'}//name是字符串
obj.name = 'ben'//name是字符串
obj['name']='ben'
obj[name]='ben'//错因为name的值不确定
obj['na'+'me']='ben'
let key = 'name';obj[key] = 'ben'
let key = 'name';obj.key = 'ben'//错,因为obj.key等价于obj['key']

批量赋值

Object.assign(obj,{age:18,gender:'femal'})

修改或增加共有属性

无法通过自身修改或增加共有属性

let obj = {},obj2 ={}//共有toString
obj.toString = 'xxx'只会修改自身属性
obj2,toString还是在原型上

一般不要修改原型会产生问题,如果偏要修改Object.prototype.toString='xxx'

修改隐藏属性

使用Object.create

let obj = Object.create(common)

obj.name = 'hong'

规范如果要改就一开始改,不要后来再改

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

前者自身属性和共有属性都返回true,后者仅仅是自身属性才返回true