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

继续以代码进行展开, 在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();

就是如此方便，不是吗？