(掌握)ES6-对象字面量的增强写法

• ES6中对 对象字面量 进行了增强，称之为 Enhanced object literals（增强对象字面量）
• 字面量的增强主要包括下面几部分：
  • 属性的简写：Property Shorthand
  • 方法的简写：Method Shorthand
  • 计算属性名：Computed Property Names

属性的增强

/*
    1.属性的增强
*/

var name = "小余"
var age = 20
//通常我们是这么写对象字面量的，但是通常在我们写之前，外界可能已经有name跟age这两个内部重复的内容了(比如我们在外面有个name叫小余，obj里面的name也想叫小余，那就直接简写。要是你想要叫小满，那就写上name:"小满")，也就是说如果你不写入内容，他就会追寻你在对象外面的内容
var obj = {
    name:"小余",
    age:20
}
//防止重复性的写法我们可能会这么做,这样引用的就算外面name跟age了
var obj = {
    name:name,
    age:age
}
//但是两个name跟两个age感觉还是有点多余，于是在ES6中出现了语法糖的写法，直接这样简写
var obj = {
    name,
    age
}
console.log(obj);//{ name: '小余', age: 20 }，此处的结果仅对应最后的语法糖简写方式

//导出的写法(后面会讲导出)
module.exports = {
    name,//简写
    age:age//未简写
}

//这种方式在函数中也很常见，例如
function foo(){
    var message = "Hello World"
    var info = "my name is xiaoyu"
    //在JS的函数中一次只能返回一个内容，如果你想要返回多个内容，就放到对象中
    return{
        //未简写
        // message:message,
        // info:info
        //简写
        message,info
    }
}

方法的增强

/*
    2.方法的增强
*/

var name = "小余"
var age = 20
//通常我们是这么写对象字面量的，但是通常在我们写之前，外界可能已经有name跟age这两个重复的内容了
var obj = {
    name,
    age,
    //1.正常的普通函数写法
    running:function(){},
    //2.箭头函数的写法(但是不会绑定this)
    eating:()=>{},
    //3.类似class的定义方法，省去了function。是属于第一种方法的简写
    swiming(){}
}

obj.running()//{name: '小余', age: 20, running: ƒ, eating: ƒ, swiming: ƒ}
obj.eating()//Window {window: Window, self: Window, document: document, name: '小余', location: Location, …}
obj.swiming()//{name: '小余', age: 20, running: ƒ, eating: ƒ, swiming: ƒ}

计算属性名

/*
    3.计算属性名
*/

var key = "address"

var name = "小余"
var age = 20
var obj = {
    name,
    age,
    //我们内部的属性名之前都是写死的，要是我想要上面key变量里面的内容address作为我的属性名，那需要怎么办
    //错误的写法
    // key:"广州"
    //正确的写法，使用中括号圈起来，叫做计算属性名是因为会根据我们变量对应的名称来获取真正的值
    [key]:"福建"
}
console.log(obj);//{ name: '小余', age: 20, address: '福建' }

//计算属性名的能力展现
var key = "address" + " city"
var obj = {
    [key]:"福建"
}
console.log(obj);//{address city: '福建'}