JavaScript 对象

148 阅读5分钟

1. JS 对象

1.1 定义

JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。

JavaScript 允许自定义对象。

JavaScript 对象是无序的数据集合。

JavaScript 对象是以键值对的集合。

1.2 声明对象

  • 写法1: (简单写法,普遍写法)
let obj = {'name': 'pan', 'age':'20'}
  • 写法2:(正规写法)
let obj = new Object({'name': 'pan', 'age':'20'})

1.3 键名可以是字符串或者变量

  • 键名(key)是字符串,就算没有引号,键名也是字符串。
  • 如果给键名是以其他方式(数字,十六进制数值,运算式等)命名,属性名都会自动变成字符串。
  • 变量可以作为键名。
let p = 'name'
let obj = {'p': 'pan'} // 此处的键名是字符串'p'
let obj = {[p]:'pan'} // 此处的键名是'name',因为[p]代表的是变量

1.4 对象的隐藏属性

JS 的每个对象都有一个隐藏属性。

这个隐藏属性储存着它的原型(共有属性组成的对象)的地址。

var obj = {}
obj.toString() // 不报错
"[object Object]" // 返回数组

上述代码不报错,因为 toString() 包含在了 obj 的隐藏属性__proto__中。

2. JS 对象的增删改查

2.1 删除属性

删除对象中的属性一般有两种写法: delete obj.xxx 或者 delete obj['xxx']

var obj = new Object({'name': 'pan', 'age':'20'}) //声明一个对象,有'name'和'age'两个属性
delete obj.age //删除'age'属性
obj //获取该对象
{name: "pan"} //没有了'age'属性
var obj = {'name': 'pan', 'age':'20'} //声明一个对象,有'name'和'age'两个属性
delete obj['name'] //删除'name'属性
obj //获取该对象
{age: "20"} //没有了'name'属性

注意:delete 只能删除对象的属性,不能删除对象。

2.2 查看属性

查看自身所有的属性名

var obj = {'name': 'pan', 'age':'20'} //声明一个对象,有'name'和'age'两个属性
Object.keys(obj) //语法是: Object.keys(对象名)
(2) ["name", "age"] // 得到的是该对象的两个属性名

查看自身所有的属性值

var obj = {'name': 'pan', 'age':'20'} //声明一个对象,有'name'和'age'两个属性
Object.values(obj) //语法是: Object.values(对象名)
(2) ["pan", "20"] // 得到的是该对象的两个属性值

查看自身属性 + 共有属性

var obj = {'name': 'pan', 'age':'20'} //声明一个对象,有'name'和'age'两个属性
console.dir(obj) //语法是:console.dir(对象名)
Object // 得到对象的自身属性
age: "20"
name: "pan"
__proto__: Object // 得到对象的共有属性

注意:想查看自身属性和共有属性还可以用 Object.keys(obj) 和 Object.proto 分别获得

查看属性的两种方法

var obj = {'name': 'pan', 'age':'20'} //声明一个对象,有'name'和'age'两个属性
obj.age // 第一种是 对象名.属性名 obj.key
"20"
var obj= {'name': 'pan', 'age':'20'} //声明一个对象,有'name'和'age'两个属性
obj.['age'] // 第二种是 对象名.['属性名'] obj.['key']
"20"

查看一个属性是自身属性还是共有属性

var obj = {'name': 'pan', 'age':'20'} //声明一个对象,有'name'和'age'两个属性
obj.hasOwnProperty(toString()) //语法是:对象名.hasOwnProperty(属性)
false // 返回 false 说明该属性不是该对象的自身属性
obj.hasOwnProperty('name')
true // 返回 true 说明该属性是该对象的自身属性

查看一个属性是否属于对象

var obj = {'name': 'pan', 'age':'20'} //声明一个对象,有'name'和'age'两个属性
'name' in obj // 语法是:'属性值' in 对象名
true // 返回 true 说明该属性属于该对象
'xx' in obj
false // 返回 false 说明该属性不属于对象

2.3 修改属性 和 增加属性

修改属性和增加属性类似,如果对象已经拥有了该属性,则会修改该属性;如果对象没有该属性,则会增加该属性。

直接赋值

var obj = {'name': 'pan', 'age':'20'} //声明一个对象,有'name'和'age'两个属性
var obj = {'name':'feng'} // 直接将 obj 变成一个新的对象
obj
{name: "feng"} 
var obj = {'name': 'pan', 'age':'20'} //声明一个对象,有'name'和'age'两个属性
obj.name = 'feng' // 将对象的 name 属性的属性值修改了
obj
{name: "feng", age: "20"} // 返回新的属性值
var obj = {'name': 'pan', 'age':'20'} //声明一个对象,有'name'和'age'两个属性
obj['name'] = 'feng' // 将对象的 name 属性的属性值修改了,如果 name 没有引号,则为变量,属性值会变为变量 name 对应的值
obj
{name: "feng", age: "20"} // 返回新的属性值

批量赋值

var obj = {} //声明一个空对象
Object.assign(obj,{'name':'pan','age':18}) // 语法是: Object.assign(对象名,{'属性1':'属性值1','属性2':'属性值2'})
obj
{name: "pan", age: 18} // 得到增加属性后的对象

修改或者增加共有属性

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

var obj1 = {} //声明一个空对象1
var obj2 = {} //声明一个空对象2
obj1.toString='xxx'// 将对象1的 toString 属性修改成'xxx'
"xxx"
obj2.toString // 但是在对象2的 toString 属性依然是在原型上
ƒ toString() { [native code] }// 所以,只能修改自身的共有属性,并不会修改到原型上的共有属性

偏要修改或者增加原型上的属性

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

修改隐藏属性

不推荐使用__proto__, 推荐使用 Object.create

var common = {} // 声明一个对象 common
common.__proto__.toString = 'xxx' // 将对象 common 的固有属性 toString  修改为 'xxx'
var obj = Object.create(common) // 在 common 的基础上创建对象 obj
obj // 获取 obj
{}
__proto__:
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: "xxx" // obj 拥有了 common 修改后的固有属性,这是因为 obj 是在 common 的基础上创建的,所有拥有跟 common 一样的固有属性
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()