[JavaScript知识库]JS之对象-对象增强语法（ES6）

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()，将源数据转换为了对象。
• 属性解构是一个和输出无关的顺序化操作，如果其中某个赋值成功而后面的赋值报错，那么解构只会完成一部分。