JS对象的基本用法

69 阅读3分钟

声明对象的两种语法

对象是无序的数据集合或键值对的集合;声明对象和多种方式,常见的方式有以下两种:

let obj01 = {'name':'xiaoming','age':18}
let obj02 = new Object({'name':'xiaoming','age':18})

注意有几个细节:

  • 对象的键名是字符串,不是标识符,所以可以包含任意字符。
  • 引号可以省略,但是省略之后只能写标识符。
  • 就算引号省略了,键名还是字符串。
let a =Symbol()
let obj02 = {[a]:"xxxx"}
obj02
//输出结果{Symbol(): 'xxxx'}

变量作为属性名

如果变量不加 [] 的属性名就会自动变成字符串;加了 [] 则会当成变量求值;当值如果不是字符串,则会将其转变成字符串。

let p = 'name'
let obj03 = {p:'xiaoming'}      //这样属性名为 'p'
let obj04 = {[p]:'xiaoming'}    //这样属性名为 'name'

对象的隐藏属性

JavaScript中每个对象都有一个隐藏属性,这个隐藏属性存储其共有属性组成的对象的地址,这个共有属性组成的对象就是原型。也就是隐藏属性存储着原型的地址

let obj05 = {}
obj05.toString()
//帧时因为obj05的吟唱属性对应的对象上有 toString(),所以才没报错。

如何删除对象的属性

可以通过 delete 方法,删除某个对象的属性。

let obj06 = {
    'name':'xiaoming',
    'age':18
}
delete obj06.name  //删除属性,返回值为布尔值
console.log(typeof obj06.name)

但是,需要注意区分不含属性名和有属性名但是值为 undefined,如果上age的value值变为undefined。

'name' in obj06 ===false
'age' in obj06 && obj06.age ===undefined
//假设有xxx属性
obj06.xxx === undefined  //并不能断定 'xxx' 是否为obj的属性。

如何查看对象的属性

查看对象的属性,属性分为私有属性和共有属性.

Object.keys(obj06)
console.log(obj06)
obj06.hasOwnProperty('toString')    //判断属性是私有还是共有

原型,存放着对象的共有属性,obj.proto 存放着这个对象的地址。对象的原型也有原型,即obj = {} 的原型也有原型,这个原型包含所有对象的共有属性,称为对象的根。当然这个对象也有原型,是null。

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

修改和增加对象属性

修改对象的属性可以直接赋值和批量赋值。

let obj = {name:'xiaoming'}
obj.name = 'xiaoming'
obj['name'] = 'xiaoming'
obj['na' + 'me'] = 'xiaoming'
let key = 'name';obj[key] = 'xiaoming'
//批量赋值
Object.assign(obj,{age:18, gender:'man'})

由于每个对象都有共有属性,无法通过自身修改或增加共有属性

let obj = {},obj2 ={}
obj.toString = "XXXX"
//obj2.toString依然在原型上,因为上面的只修改了obj的自身属性。
//如果确实想要修改原型上的属性
obj.__proto.toString = 'xxx'   //这个不推荐
Object.prototype.toString = 'xxx' //一般不建议修改原型

增加对象属性的方法和修改自身属性的方法一样,已经有的属性修改,没有就增加属性。

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

两者的区别在于,前一个判断 obj 对象是否有这个属性,不论这个属性是私有还是共有属性;后者则是判断这个属性是否为私有属性。

let obj06 = {
    'name':'xiaoming',
    'age':18
};
'name' in obj06                   //返回true
'toString' in obj06               //返回的也是true
obj06.hasOwnProperty('name')      //返回的true
obj06.hasOwnProperty('toString')  //返回的flase