ES2015入門系列8-新對象特性

Seay 發布于2019-08-20 17:40 / 702人閱讀

摘要：繼續以代碼進行展開在中，如下代碼鴨子黃色嘎嘎嘎鴨子黃色嘎嘎嘎為對象帶來的新特性屬性簡寫如果屬性名稱和變量名稱一致，那么可以直接用省略變量名，如下鴨子黃色嘎嘎嘎鴨子黃色嘎嘎嘎方法簡寫方法可以省略冒號以及關鍵字如下鴨子黃色嘎嘎嘎鴨子黃色嘎嘎嘎解

繼續以代碼進行展開, 在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();

就是如此方便，不是嗎？

GPU云服務器云服務器 es6新特性 es6的新特性 es6-系列入門系列課程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83761.html

ES2015入門系列1-初識ES2015

EcmaScript 其實是一種語言規范，常見的 JavaScript, ActionScript 等都是其具體實現，平時使用中一般可以將其和Javascript對等稱呼，本系列教程主要講述 EcmaScript2015(ES6) 為JavaScript帶來的新的特性，并初步掌握如何利用其進行開發。本系列面向有一定基礎知識的ES5使用者，不適合初學者。先來看兩段代碼： Human.js exp...

hellowoody 2019-08-20 17:37 評論0 收藏0
JS筆記

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。 TypeScript 入門教程從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。網絡基礎知識之 HTTP 協議詳細介紹 HTT...

rottengeek 2019-08-22 13:58 評論0 收藏0
ES2015入門系列9-Babel和Rollup

摘要：雖然夠好用，奈何沒有瀏覽器對其可以完全支持，本文書寫時間，開發版號稱已經支持的特性。開始安裝本系列假定讀者都有使用經驗，如果還沒有，趕緊去這里了解并安裝吧。到此，我們的已經準備就緒。通過前面章節的講解，大家對ES2015的一些新語法有了初步的理解，之前我們的測試代碼都可以直接放入 Chrome Console 中直接運行，為了更好的學習后面的面向對象和模塊開發，我先用一章介紹一下 B...

eccozhou 2019-08-20 17:40 評論0 收藏0
1月份前端資源分享

摘要：更多資源請文章轉自月份前端資源分享視頻前端技術論壇融合不可錯過的迷你庫測試框架實例教程為你詳細解讀請求頭的具體含意解析的庫如果要用前端框架，開發流程是怎樣的與有什么區別正確使用的方法是什么流程圖插件小如何讓元素只能輸入純文本前端技術中更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfront...

solocoder 2019-08-20 14:37 評論0 收藏0
前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結構合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發布《80% 應聘者都不及格的 JS 面試題》之后，全網閱讀量超過 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 評論0 收藏0