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

May 23, 2016
JavaScript ES2015

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

就是如此方便,不是吗?