JS 对象基本用法

153 阅读4分钟

1. 声明对象的两种语法

在 JavaScript 中,对象是一个键值对的集合,同时也是一个无序的数据集合。键( key )和值( value )一般成对出现,键名就是对象的属性名,键值就是对象的属性值

声明对象有两种语法,一种是直接赋值,另一种是通过 new 进行声明。一般我们会使用第一种声明方式,比较方便

let obj = { 'name': 'someone', 'age': 20 }
let obj = new Object({ 'name': 'someone', 'age': 20 })

注意:

  • 键名是字符串,不是标识符,可以包含任意字符
  • 引号可以省略,但是省略之后只能写标识符
  • 如果引号省略了,键名还是字符串

2. 属性名(键名)

所有的属性名都会自动变成字符串

let obj = {
    1: 'a',
    1.1: 'b',
    1e1: 'c',
    1e-1: 'd',
    .234: 'e',
    0xFF: 'f'
}
Object.keys(obj)    //结果为 ["1","1.1","10","0.1","0.234","255"]

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

如果我们想要让一个属性不是常量而是一个变量,我们可以通过使用 [] 来声明对象

let n = 'name'
let obj = { n: 'someone' }      //此时 obj 的属性名为 'n'
let obj = { [n]: 'someone' }    //此时 obj 的属性名为 'name'

JavaScript 中每一个对象都有一个隐藏属性,这个隐藏属性存储着其共有属性组成的对象的地址,这个共有属性组成的对象叫做原型(_ _ proto _ _),我们平时使用到的 toStirng 方法等,都是存储在原型里面的

2. 如何删除对象的属性

删除对象的属性可以使用delete obj.keydelete obj['key']

那么可能有人会问使用 obj.key = undefined 可不可以用来删除对象的属性,答案是否定的。这个操作只是将对象的键值赋值为 undefined 而已,并不是将对象的属性删掉

如果你使用 obj.key === undefined 来判断 key 是否为 obj 的属性时也有可能出错,因为我们可以让某个属性的值为 undefined ,那么让你用 obj.key === undefined 进行判断时会得到 true ,但是实际上该属性是存在的,这就产生了矛盾

删除了属性后我们可以通过 'key' in obj 来判断 key 是否还在 obj 中,false 表示 key 不在 obj 中,true 表示 key 在 obj 中

3. 如何查看对象的属性

查看对象自身所有属性可以通过 Object.keys(obj) 进行查看

查看对象自身属性加上共有属性可以通过 console.dir(obj) 来进行查看

判断一个属性是自身的还是共有的可以通过 obj.hasOwnProperty('要判断的属性') 进行判断

查看属性的值有两种方法,一种是 obj['key'] ,另一种是 obj.key ,需要注意的是第一种方法在使用时不要丢掉了中括号中的引号,否则中括号中的属性就变成了一个变量

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

修改和增加对象的属性的操作一样,如果对象已经有该属性,则该操作是对其进行修改;如果对象还没有该属性,则该操作是将该属性增加到对象中

需要修改或增加的属性不多时可以直接赋值,增加或修改的属性比较多时可以批量赋值

let obj = { name: 'someone' }
obj.name = 'other'
obj['name'] = 'haha'
obj[name] = 'hehe'  //这是一个错误的写法,这里面的 name 是一个变量而不是字符串
obj['na'+'me'] = 'xixi'

//批量赋值
Object.assign(obj, {age: 20, gender: 'male'})

我们也可以通过上面的方式来修改或增加共有属性,但是没什么特别的需求不建议这么做,修改了共有属性可能会给你在后续的写代码过程中埋下许多问题。如果一定要修改的话,可以参照下面的写法

let obj = {}
obj.__proto__.toString = 'something'
Object.prototype.toString = 'something'          

如果要直接修改原型本身,可以参照下面的写法

let obj = { name: 'haha'}
let common = { gender: 'male' }
obj.__proto__ = common
//上面是第一种写法,不推荐使用__proto__
let obj2 = Object.create(common)
obj2.name = 'hehe'
//这是第二种写法,与第一种写法的区别在于最开始就规定然后添加了共有属性,这样就不容易混乱

5. 'key' in obj 和 obj.hasOwnProperty('key') 的区别

'key' in obj 用来查看一个属性是否在 obj 中,包括 obj 自身的属性和共有属性;obj.hasOwnProperty('key') 用来查看一个属性是否为 obj 独有的属性

let obj = { name:'haha' }
'name' in obj                   //true
'toString' in obj               //true
obj.hasOwnProperty('name')      //true
obj.hasOwnProperty('toString')  //false