ES6中对象简写属性名的语法糖

首先让我们看一段代码

let demo1 = {};
// 属性操作的get方法
function get(key){
   return demo1[key] ? demo1.key : null; 
}
//属性操作的 set方法
function set(key,value){
   demo1.key = value;
}
//将对象还原成一个空对象的方法
function clear(){
    demo1 = {};
}
// 根据commonJS规范,模块输出
module.exports = {
   get : get,
   set : set,
   clear : clear
}
      在模块的末尾,模块输出了一个对象字面量。字面量的写法是按照ES5的规范写的,虽然中规中矩,但多少有些麻烦,对于此,ES6有了一种简化写法的语法糖。例如上面代码的exports部分就可以写成下面这样:

      

module.exports = {
   get,set,clear
}
     简言之,ES6允许在对象字面量中直接写入变量和函数,作为对象的属性和方法。此时,属性名就是变量名,属性的值就是变量的值。

      来个简单点的例子:

function f(x,y){
   return {x,y};
}
//等同于
function f(x,y){
   return {x:x,y:y}
}

      刚刚说过了,除了普通变量作为属性外,函数作为方法也可以简写:

      

const o = {
   method(){
     return "I'm the king of the world!"
   }
}
//等同于
const o = {
   method : method(){
      return "I'm the king of the world!"
   }
};
     在此强调一下,这里的语法糖,是在开发者想要实现 对象属性(方法)名称和外部变量(函数)名称,同名的情况下,省略了属性名的重复书写以及冒号。 如果不想要同名的话,还是要自己起一个其他的属性(方法)名,然后加上冒号和外部的变量的。

      其实这个语法糖,只是让我们在写返回值(例如第一个例子中的module.exports)的时候能少些两笔罢了。




你可能感兴趣的:(JavaScript,Object,ES6)