JS 对象基本用法

118 阅读2分钟
声明对象的两种语法

第一种写法(更简单,用得多):

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

第二种写法:

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

注意:

  1. 对象都是以键值对的形式出现
  2. 键名是字符串,不是标识符,可以包含任意字符串
  3. 引号可以省略,省略之后只能按标识符的规则写(数字除外)
  4. 就算引号省略了,键名也还是字符串
  5. 当键名有空格,中文等特殊符号必须加引号,否则会出错
  6. 没有数字键名,也没有数字下标,因为浏览器会自动把数字转换成字符串
如何删除对象的属性
let obj = {
    name: 'meng',
    age: '18',
    gender: 'man'
}
obj.name = undefined // 把 name 属性设置为 undefined
delete obj.name // 删除属性

上述代码注意区分属性值为 undefined 和 不含属性名,把属性设置为 undefined 不是删除此属性,只是改变了属性的值,这个要和 delete 区分开。

如何查看对象的属性

查看所有属性

  • 查看自身所有属性
let obj = {
    name: 'meng',
    age: 18
}
Object.keys(obj) // 查看所有键
Object.values(obj) // 查看所有值
Object.entries(obj) // 查看键和值
  • 查看自身和共有属性
console.dir(obj)
Object.keys(obj.__proto__) // 不推荐
  • 判断一个属性是自身还是共有的
obj.hasOwnProperty('toString')

如果返回值为 false,那么这个属性就不是自身的属性;反之,返回 true 的话这个属性就是自身的属性。

查看单个属性

  • 中括号语法
obj['key']
  • 点语法
obj.key
  • 上两种方法的变体
let key = ‘xxx’
obj[key] // key 为变量
如何修改或增加对象的属性

直接赋值

let obj = {
    'name': 'frank'
}
obj.name = 'meng' // 修改属性
obj.age = 13 // 增加属性
// 如果对象有此属性就为修改,没有此属性就为增加

这是一个个赋值,有时候可能会很麻烦,新版 ES6 就提供了一个 API 用于添加多个属性。

批量赋值

let obj = {}
Object.assign( obj, {'name':'meng', 'age': '18'})
  1. 使用proto修改
var common = { '国籍':'中国',hairColor:'black'}
var person = {jj: '11'}
person.__proto__ = common // 把原型的地址改成 common 的地址
  1. 使用 ES6 新的 API 来修改原型(推荐)
var common = { '国籍':'中国',hairColor:'black'}
var person = Object.create(common)
let obj = Object.create(common) 
obj.name = 'frank' 
let obj2 = Object.create(common) 
obj2.name = 'jack'
无法通过自身修改或增加自有属性
let obj = {}
let obj2 = {}         //obj和obj2共有toString
obj.toString = 'xxx'  //只会修改Obj自身属性,obj2.toString还在原型上

偏要修改或增加原型上的属性
obj.__proto__.toString = 'xxx'  
Object.prototype.toString = 'xxx'

注意: 所有 "proto" 代码都是强烈不推荐写。

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

都是两种查看属性是不是在对象里的方法。

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