JS 对象基本用法

280 阅读4分钟

声明对象的两种语法

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

let obj = new Object({'name': 'frank'})
// 第二种语法正规,但第一种语法更常用

如何删除对象的属性

delete obj.xxx 或 delete obj['xxx']

var obj = {name: 'frank', age: 18}
// 终端输出 undefined

var obj2 = {name: 'frank', age: 18}
// 终端输出 undefined

delete obj.name
// 终端输出 true
obj
// 终端输出 {age: 18}

delete obj2['name']
// 终端输出 true
'name' in obj2
// 终端输出 false
'age' in obj2
// 终端输出 true

如何查看对象的属性

  • 查看自身所有属性 object.keys(obj)

  • 查看自身+共有属性 console.dir(obj) 或者自己依次用 Object.keys 打印出 obj.__proto__

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

var obj2 = {name: 'frank', age: 18}
// 终端输出 undefined
Object.keys(obj2)
// 终端输出 (2) ["name", "age"]
Object.values(obj2)
// 终端输出 (2) ["frank", 18]
obj2
// 终端输出 {name: "frank", age: 18}
Object.entries(obj2)
// 终端输出 
// (2) [Array(2), Array(2)]
//  0: (2) ["name", "frank"]
//  1: (2) ["age", 18]
//   length: 2
//   __proto__: Array(0)
console.dir(obj2)
// 终端输出 Object
// age: 18
// name: "frank"
// __proto__:
//  constructor: ƒ Object()
//  hasOwnProperty: ƒ hasOwnProperty()
//  isPrototypeOf: ƒ isPrototypeOf()
//  propertyIsEnumerable: ƒ propertyIsEnumerable()
//  toLocaleString: ƒ toLocaleString()
//  toString: ƒ toString()
//  valueOf: ƒ valueOf()
//  __defineGetter__: ƒ __defineGetter__()
//  __defineSetter__: ƒ __defineSetter__()
//  __lookupGetter__: ƒ __lookupGetter__()
//  __lookupSetter__: ƒ __lookupSetter__()
//  get __proto__: ƒ __proto__()
//  set __proto__: ƒ __proto__()
obj2.__proto__
// 终端输出
// {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
'toString' in obj2
// 终端输出 true
obj2.hasOwnProperty('toString')
// 终端输出 false
obj2.hasOwnProperty('name')
// 终端输出 true

原型
每个对象都有原型

  • 原型里存着对象的共有属性
  • 比如 obj 的原型就算一个对象
  • obj.__proto__ 存着这个对象的地址
  • 这个对象里有 toString / constructor / valueOf 等属性

对象的原型也是对象

  • 所以对象的原型也有原型
  • obj={} 的原型即为所有对象的原型
  • 这个原型包含所有对象的共有属性,是对象的根
  • 这个原型也有原型,是 null

查看属性
两种方法查看属性

  • 中括号语法:obj['key']
  • 点语法: obj.key
  • 坑新人语法: obj[key] // 变量 key 值一般部位 'key'

请优先使用中括号语法

  • 点语法会误导你,让你以为 key 不是字符串
  • 等你确定不会弄混两种语法,再改用点语法
var obj = {name: 'frank', age: 18}
// 终端输出 undefined
obj['name']
// 终端输出 "frank"
obj.name
// 终端输出 "frank"
obj[name]
// 终端输出 undefined
name
// 终端输出 ""
window.name = 'age'
// 终端输出 "age"
obj[name]
// 终端输出 18
obj['na' + 'me']
// 终端输出 "frank"
obj[console.log('name')]
// 终端打印 name
// 终端输出 undefined
obj['undefined']
// 终端输出 undefined
obj.name
// 等价于
obj['name']

obj.name
// 不等价于
obj[name]

// 简单来说,这里的 name 是字符串,而不是变量


let name = 'frank'
obj[name]
// 等价于
obj['frank']

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

直接赋值

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'})

修改或增加共有属性

  • 无法通过自身修改或增加共有属性
let obj = {}, obj2 = {} // 共有 toString

obj.toString = 'xxx' // 只会在改 obj 自身属性

obj2.toString // 还是在原型上
  • 我偏要修改或增加原型上的属性
obj.__proto__.toString = 'xxx' // 不推荐用 __proto__

Object.prototype.toString = 'xxx'
// 一般来说,不要修改原型,会引起很多问题
let obj = {}, obj2 = {}
obj.__proto__.toString = 'xxx'
// 终端上输出 "xxx"
obj2.toString
// 终端上输出 "xxx"

// 这样做修改原型,比较危险,会让原型混乱

修改隐藏属性

  • 不推荐使用 __proto__
let obj = {name: 'frank'}
let obj2 = {name: 'jack'}
let common = {kind: 'human'}
obj.__proto__ = common
obj2.__proto__ = common
  • 推荐使用 Object.create
let obj = Object.create(common)
obj.name = 'frank'

let obj2 = Object.create(common)
obj2.name = 'jack'
// 规范大概的意思是,要改就一开始就改,别后来再改
obj = {name: 'jack', age:  18, gender: '男'}
// 终端上输出 {name: "jack", age: 18, gender: "男"}
obj.__proto__ = null
// 终端上输出 null
obj
// 终端上输出
// {name: "jack", age: 18, gender: "男"}
//   age: 18
//   gender: "男"
//   name: "jack"

// obj 没有了 __proto__

obj.valueOf
// 终端上输出 undefined

总结:

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__ 代码都是强烈不推荐写的

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

var obj = {}
// 终端上输出 undefined
obj.name = 'frank'
// 终端上输出 "frank"
'name' in obj
// 终端上输出 true
obj.hasOwnProperty('name')
// 终端上输出 true
'toString' in obj
// 终端上输出 true
obj.hasOwnProperty('toString')
// 终端上输出 false

in 语法是判断属性是否在自身属性或共有属性上
hasOwnProperty 是只有在自身属性上时候,才返回 true