ES2015入门系列8-新对象特性

May 23, 2016

继续以代码进行展开, 在ES5中，如下代码：

function makeDuckToy() {
  var name = '鸭子';
  var color = '黄色';
  return {
    name: name,
    color: color,
    quacks: function() {
      console.log('嘎嘎嘎~~~');
    }
  }
}

var duck = makeDuckToy();

console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~

ES2015为对象带来的新特性:

属性简写

如果属性名称和变量名称一致，那么可以直接用省略变量名，如下:

function makeDuckToy() {
  let name = '鸭子';
  let color = '黄色';
  return {
    name,
    color,
    quacks: function() {
      console.log('嘎嘎嘎~~~');
    }
  }
}

let duck = makeDuckToy();

console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~

方法简写

方法可以省略冒号以及function关键字, 如下：

function makeDuckToy() {
  let name = '鸭子';
  let color = '黄色';
  return {
    name,
    color,
    quacks() {
      console.log('嘎嘎嘎~~~');
    }
  }
}

let duck = makeDuckToy();

console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~

解构赋值

解构赋值，我们之前已经讲过，这里再继续举个例子:

ES5中，假设从ajax中获取数据，并取出想要的值:

function ajax() {
  return {
   status: true,
   data: ['鸭子', '老虎'],
   total: 12
  }
}

var result = ajax();
var data = result.data;
var total = result.total;

有了解构赋值，代码就可以简化成:

function ajax() {
  return {
   status: true,
   data: ['鸭子', '老虎'],
   total: 12
  }
}

let {data, total} = ajax();

就是如此方便，不是吗？