创建对象的两种方式
- 方式一:
通过Object创建对象然后添加属性:
let person=new Object()
person.name='aa'
person.age=12
person.sayname=function(){
console.log(this.name)
}
- 方式二
通过对象字面量的方式创建对象
let person={
name:'aa',
age:12,
sayname(){
console.log(this.name)
}
}
对象的属性
数据属性
数据属性有以下四个特性:
- Configurable:表示属性是否可以通过delete删除并重新定义,是否可以修改它的特性,是否可以把它改为访问器属性。默认为true。
let person={}
Object.defineProperty(person,'name',{
configurable:false,
value:'Ni'
})
console.log(person.name) //Ni
delete person.name
console.log(person.name) //Ni
Configurable设置为false之后,删除name属性无效在严格模式下会报错,此外再次修改Configurable或者重新定义属性都会报错。
- Enumerable:表示属性是否可以通过for-in循环返回,默认为true。
- Writable:表示属性值是否可以被修改,默认为true。
let person={}
Object.defineProperty(person,'name',{
writable:false,
value:'ni'
})
console.log(person.name) //ni
person.naem='hi'
console.log(person.name) //hi
当writable设置为false之后,再次修改属性值没有效果,严格模式下会报错。
- Value:属性的实际值默认为undefined。
访问器属性
访问器属性包含一个获取(getter)函数和一个设置(setter)函数,访问器睡醒有如下4个特征:
- Configurable:表示属性是否可以通过delete删除重新定义,是否可以修改它的特性,是否可以把它改为数据属性,默认为true。
- Enumerable:表示属性是否可以通过for-in循环返回,默认为true。
- Get:获取函数,读取属性时调用,默认值为undefined。
- Set:设置函数,写入属性时调用,默认值为undefined。下面为访问器属性使用例子:
let book={
year_=2022,
edition:1
}
Object.defineProperty(book,'year',{
get(){
return this.year_
},
set(newValue){
if(newValue>2022){
this.year_=newValue
this.edition+=newValue-2022
}
}
})
book.year=2024
console.log(this.edition) //2
定义多个属性
添加多个属性可使用Object.defineProperties()方法
例如:
let book={}
Object.defineProperties(book,{
year_:{
value:2020
},
year:{
get(){
return this.year_
},
set(newValue){
if(newValue>2020){
this.year_=newValue
}
}
}
})
合并对象
Object.assign(n,n1,n2,...)方法可以将多个对象合并为一个对象,其中n为目标对象,后面的n1,n2,...源对象中可枚举的属性都会被复制到n中,例如:
let dest={}
result=Object.assign(dest,{a:'foo'},{b:'bar'})
console.log(result) //{a:'foo',b:'bar'}
console.log(dest===result) //true
注意:
- Object.assign()方法只是进行浅复制,意味着只会复制对象的引用,例如:
let dest={}
src={a:{}}
Object.assign(dest,src)
console.log(dest.a===src.a) //true
- Object.assign()方法没有回滚操作,因此可能只完成部分复制,例如:
let dest={}
let src={
a:'foo',
get b(){
throw new Error()
},
c:'bar'
}
try{
Object.assign(dest,src)
}catch(e){
}
console.log(dest) //因为复制到b函数时抛出错误,所以输出结果为:{a:'foo'}
对象增强语法
属性简写
当给属性添加变量时,属性名和变量名一致,属性值可简写,例如:
let name='matt'
let person={
name:name
}
//简写方式
let person={
name
}
可计算属性
可计算属性在对象字面量中完成动态属性赋值,中括号包围的对象属性键作为JavaScript表达式而不是字符串,例如:
const namekey='name'
const agekey='age'
let person={
[namekey]:'Matt',
[agekey]:12
}
console.log(person) //{name:'Matt',age:12}
[]既然是JavaScript表达式,当然也包含了复杂表达式,例如以下案列:
let flag=0
const namekey='name'
const agekey='age'
getKey(key){
return `${key}_${flag++}`
}
let dest={
[getKey(nameKey)]:'Matt',
[getKey(ageKey)]:12
}
console.log(dest) //{name_0:'Matt',age_1:12}
简写方法名
- 简写前
let person={
sayname:function(name){
console.log(name)
}
}
- 简写后
let person={
sayname(name){
console.log(name)
}
}
- 动态方法
[]中使用JavaScript表达式实现动态方法属性,例如:
const namefun='sayname'
let person={
[namefun](name){
console.log(name)
}
}
对象解构
基本用法
let person={
name:'Matt',
age:12
}
let {name,age}=person
console.log(name,age) //Matt,12
//给变量起别名
let {name:personname,age:personage}=person
console.log(personname,personage) //Matt,12
解构属性不存在
当解构的属性不存在时,解构值为undefined
let person={
name:'matt',
age:12
}
let {name,job}=person
console.log(name,job) //matt,undefined
为解构的值赋默认值
当设置默认值时,解构值不存在,为null或者为undefined,解构值为设置的默认值,例如:
let person={
name:'matt',
age:12
}
let {name,job='it'}=person
console.log(name,job) //matt,it
嵌套解构
嵌套解构的核心思想:被解构的值与解构对象的结构要一一对应,例如:
let person={
name:'matt',
age:12,
job:{title:'it'}
}
let {job:{title}}=person
console.log(title) //it
2 条评论
如何为对象正确赋值
对象遍历方式有哪些