JS 对象的基本用法

一、什么是对象

1. 定义

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

2. 声明对象的两种写法

let obj = {'name': 'frank', 'age':18} // 第一种
let obj = new Object({'name': 'farnk'}) // 第二种
console.log({ 'name':'frank','age':18}) // 匿名对象

3. 细节

• 键名是字符串，不是标识符，可以包含任意字符
• 引号可以省略，省略之后只能写标识符
• 就算引号省略了，键名也还是字符串（重要）

4. 属性名和属性值

• 每个 key 都是对象的属性名（property）
• 每个 value 都是对象的属性值

5. 属性名的特别之处

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

let obj = {
    1: 'a',
    3.2: 'b',
    1e2: true,
    1e-2: true,
    .234: true,
    0xFF: true
}
Object.keys(obj) // ["1", "100", "255", "3.2", "0.01", "0.234"]

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

6. 变量作属性名

• 用变量名作属性名的方法（之前都是常量作属性名）

let p1 = 'name'
let obj = { p1 : 'frank'} // 这样写，属性名为 'p1'
let obj = { [p1] : 'frank' } // 这样写，属性名为 'name'

• 对比
  • 不加 [ ] 的属性名会自动变成字符串
  • 加了 [ ] 则会当做变量求值
  • 值如果不是字符串，则会自动变成字符串

二、对象的隐藏属性

• JS 中每一个对象都有一个隐藏属性
• 这个隐藏属性储存着其共有属性组成的对象的地址
• 这个共有属性组成的对象叫做原型
• 也就是说，隐藏属性储存着原型的地址

var obj = {}
obj.toString() // 居然不报错
// 因为 obj 的隐藏属性对应的对象上有 toString()

三、对象的增删改查

1. 如何删除对象的属性

• delete obj.xxx 或 delete obj['xxx']
  • 即可删除 obj 的 xxx 属性
  • 请区分「属性值为 undefined」和「不含属性名」
• 不含属性名
  • 'xxx' in obj === false
• 含有属性名，但是值为 undefined
  • 'xxx' in obj && obj.xxx === undefined
• 注意 obj.xxx === undefined
  • 不能断定 'xxx' 是否为 obj 的属性

2. 如何查看对象的属性

2.1 查看所有属性（读属性）

• 查看自身所有属性

Object.keys(obj)

• 查看自身+共有属性

console.dir(obj)

• 判断一个属性是自身还是共有的

obj.hasOwnProperty('toString')

或者自己依次用 Object.keys 打印出 obj.__proto__

2.2 查看属性

• 两种查看方法
  • 中括号语法 obj['key']
  • 点语法 obj.key; 这里的 key 实际为字符串
  • 坑新人语法：obj[key] // 变量 key 值一般不为 'key'

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

3.1 写属性

• 直接赋值

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

• 批量赋值

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

3.2 修改或增加共有属性

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

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

• 一定要修改或增加原型上的属性

obj.__proto__.toString = 'xxx' // 不推荐用 __proto__
Object.prototype.toString = 'xxx' 
// 一般来说，不要修改原型，会引起很多问题

3.3 修改隐藏属性

• 不推荐使用 __proto__

let obj = {name:'frank'}
let obj2 = {name: 'jack'}
let common = {kind: 'human'}
obj.__proto__ = common
obj2.__proto__ = common

• 推荐使用 Object.create

et obj = Object.create(common)
obj.name = 'frank'
let obj2 = Object.create(common)
obj2.name = 'jack'
// 规范大概的意思是，要改就一开始就改，别后来再改

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

• 'name' in obj 只能判断是否具有该属性
• obj.hasOwnProperty('name') 能够判断该属性是否为自身属性

四、总结

删

delete obj['name']
'name' in obj // false
obj.hasOwnProperty('name')  // false

查

Object.keys(obj)
console.dir(obj)
obj['name']
obj.name // 记住这里的 name 是字符串
obj[name]  // 记住这里的 name 是变量

改

改自身 obj['name'] = 'jack'
批量改自身 Object.assign(obj, {age:18, ...})
改共有属性 obj.__proto__['toString'] = 'xxx'
改共有属性 Object.prototype['toString'] = 'xxx'
改原型 obj.__proto__ = common
改原型 let obj = Object.create(common)
注：所有 __proto__ 代码都是强烈不推荐写的

增

基本同上：已有属性则改；没有属性则增。