JS之对象-对象增强语法（ES6）

最新推荐文章于 2025-04-13 09:05:42 发布

原创最新推荐文章于 2025-04-13 09:05:42 发布 · 1.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了ES6中对JavaScript对象的四种增强语法：属性值简写、可计算属性、简写方法名和对象解构。属性值简写允许同名属性简写；可计算属性实现了动态属性赋值；简写方法名简化了对象的方法定义；对象解构则提供了更简洁地获取和赋值对象属性的方法，包括嵌套结构和默认值设定，解构过程内部会使用ToObject()将源数据转换为对象。

ES6对JS的对象提供一些封装的语法糖，用来简化某些操作。

1.属性值简写

给对象添加变量时，同名属性可以简写：

let name = "zhangsan"
let Obj = {
  name,
  test:'lalala'
}
console.log(name) //zhangsan

2.可计算属性

可计算属性，可以实现动态属性赋值，动态属性允许是JavaScript表达式，即也可以是有返回值的function。

let Person = {
  [name]:'王五'
}
console.log(Person.name) // zhangsan

3.简写方法名

之前对象的方法名定义是采用 get:function(){}的方式，ES6直接对此作了简化，如下：

let Book = {
  name:'张三的书',
  getName(){ //省略function和：直接声明
    return this.name
  }
}
console.log(Book.getName) // 张三的书
const methodKey = 'sayName'
let Person = {
    [methodKey](name){
        console.log('my name is ${name}')
    }
}

4.对象解构

实际开发过程中可能会涉及读取对象属性的方法，如下：

let book = {
  name:'张三的书',
  author:'张三',
  publish:{
    proName:'新华出版社',
    time:20210526
  },
  getName(){
    return this.name
  }
}

let name = book.name
let author = book.author
let publishInfo = book.publish

上面这种多个属性取值的，需要多个book.xxx，ES6针对这个提供了对象解构的方式来简化，如下：

let {name:bookName, author:bookAuthor} = book  //正常赋值
let {name,author,other} = book  //同名属性的赋值，可以简化,other为undefined

结构也可以实现嵌套结构

let {publish:{proName}} = Book //解构嵌套，获取深层次的对象属性

解构赋值不一定与对象的属性匹配，如果引用的属性不存在，则该变量值为undefined，解构也支持设定默认值，这样就可以避免如果匹配不到值为undefined的情况。

let {name,author,other='没有找到匹配项'} = book  //other = 没有找到匹配项

事前声明的变量来在结构时，需要额外添加()

let name,author
({name,author} = book)

解构可以运用在函数入参中，采用解构的方式设定入参，并不会影响arguments对象。

let person = {
    name:'zhangsan',
    age:23
}

function printPerson({name,age}){
    console.log(name,age)
}

注意

解构的过程实际是在内部使用了函数ToObject()，将源数据转换为了对象。
属性解构是一个和输出无关的顺序化操作，如果其中某个赋值成功而后面的赋值报错，那么解构只会完成一部分。