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();

就是如此方便，不是嗎？