ES6部分方法點評（一）

weakish 發(fā)布于2019-08-19 18:14 / 707人閱讀

一直以來，我對ES6都不甚感興趣，一是因為在生產(chǎn)環(huán)境中使用ES5已是處處碰壁，其次則是只當這ES6是語法糖不曾重視。
只是最近學習react生態(tài)，用起babel來轉(zhuǎn)換jsx之余，也不免碰到諸多用上ES6的教程、案例，因此便稍作學習。這一學習，便覺得這語法糖實在是甜，忍不住嘗鮮，于是記錄部分自覺對自己有用的方法在此。

箭頭函數(shù)(Arrow Functions)

箭頭函數(shù)是一個典型的語法糖，即創(chuàng)造了一種新語法來簡化javascript中函數(shù)的寫法：

// ES5
var selected = allJobs.filter(function (job) {
  return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());

上面這是函數(shù)只有一個形參的情況，下面列舉函數(shù)有多個形參的情況：

// ES5
var total = values.reduce(function (a, b) {
  return a + b;
}, 0);
// ES6
var total = values.reduce((a, b) => a + b, 0);

語法大體是這樣：([函數(shù)的形參，多個參數(shù)則以逗號分隔]) => [函數(shù)返回的值/表達式]
另外，箭頭函數(shù)也可以使用{}來引入函數(shù)塊語句，不過這樣的話其實就只是簡寫了function這一個單詞了，意義不是很大，下面放個例子：

// ES5
$("#confetti-btn").click(function (event) {
  playTrumpet();
  fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
  playTrumpet();
  fireConfettiCannon();
});

對我來說，簡寫并不吸引我，吸引我的，是箭頭函數(shù)的一個重要特性：箭頭函數(shù)沒有它自己的this值，箭頭函數(shù)內(nèi)的this值繼承自外圍作用域。

2016-05-31修改： @n?i?g?h?t?i?r?e?同學指出

arrow function 不是“沒有自己的 this”，而是綁定了定義時的 context；這一特性等價于以前的
Function.prototype.bind

我翻查了一下MDN，里面是這么寫的：

箭頭函數(shù)則會捕獲其所在上下文的  this 值，作為自己的 this 值。

因此，@n?i?g?h?t?i?r?e?同學的說法是有理的。

這在編寫回調(diào)函數(shù)的時候就非常好用了，我們再也不需要利用閉包來保存this了（尤其是，很容易忘記保存this而直接在回調(diào)函數(shù)里用了this）：

{
  add: function(piece) {},
  ...
  addAll: function addAll(pieces) {
    var self = this;
    _.each(pieces, function (piece) {
      self.add(piece);
    });
  },
  ...
}

// ES6
{
  add: function(piece) {},
  ...
  addAll: function addAll(pieces) {
    _.each(pieces, piece => this.add(piece));
  },
  ...
}

let

自ES6中let的出現(xiàn)，javascript終于迎來了塊級作用域（{}、for、if）。

2016-05-31修改：
此處表達有誤，應為：自ES6，javascript開始擁有塊級作用域，而let則是配合塊級作用域，作為替代var的一個語法定義。

有了塊級作用域，再也不用擔心臨時變量污染到外層的變量了：

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

const

const是用來定義常量的，一旦定義了就不可修改（一修改就報錯）。用途嘛，也比較單一，就是定義一下配置項什么的，免得被團隊里的愣頭青寫的代碼給瞎改了。

2016-05-31修改 @n?i?g?h?t?i?r?e?同學提出一個“命名綁定”的概念，并舉出一個相應的例子：

const config = {};
config.env = "development";  // 這不會報錯

config = {};  // 這才會報錯

請恕我才疏學淺，尚不能理解“命名綁定”呀、函數(shù)式編程之類的。我對上面這個例子的理解是，config只是一個object的引用，無論這個object本身怎么變化，只要config這個變量的“指向”沒變化，那就不會報錯。

destructuring

destructuring是解構(gòu)的意思，ES6允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構(gòu)（Destructuring）。來兩個例子看看大家就明白了。
"use strict";

// 數(shù)組的解構(gòu)賦值
let [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo); // 1
console.log(bar); // 2
console.log(baz); // 3

// 對象的解構(gòu)賦值
var { foo, bar } = { foo: "aaa", bar: "bbb" };
console.log(foo);   // "aaa"
console.log(bar );  // "bbb"

// 字符串的解構(gòu)賦值
const [a, b, c, d, e] = "hello";
console.log(a + b + c + e); // "hello"

跟箭頭函數(shù)一樣，也是個語法糖，那這是用在什么地方呢？請不要著急，聽我細細道來：
在我們封裝函數(shù)的時候，如果形參較多，為了使用者不需要按順序來傳入?yún)?shù)，往往用一個object來承載所有的參數(shù)，例如這樣：

// 二逼青年寫法
function study(id, name, sex, grade, nickname, age, address) {
    console.log(id);
    console.log(name);
    console.log(sex);
    console.log(grade);
    console.log(nickname);
    console.log(age);
    console.log(address);
}
// 正常青年寫法
function study(params) {
    console.log(params.id);
    console.log(params.name);
    console.log(params.sex);
    console.log(params.grade);
    console.log(params.nickname);
    console.log(params.age);
    console.log(params.address);
}

這種做法，雖說使用者是方便了，但寫函數(shù)的人卻麻煩了，每次用參數(shù)都要帶上params.，或者再寫個var id = params.id來讓后續(xù)的使用方便一些。
然而，有了destructuring后，我們有了更方便的寫法：

function study({id, name, sex, grade, nickname, age, address}) {
    console.log(id);
    console.log(name);
    console.log(sex);
    console.log(grade);
    console.log(nickname);
    console.log(age);
    console.log(address);    
}
study({
    id: 1,
    name: "林有德",
    sex: "男",
    grade: "一年級",
    nickname: "布萊德",
    age: 12,
    address: "木馬號"
});

這樣一來，使用者用起來很方便，而函數(shù)內(nèi)部又直接解構(gòu)賦值到各變量上，用起來也方便多了。

GPU云服務器云服務器方法是對象的一部分主機點評點評 php方法一開始調(diào)用

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79355.html

ES6部分方法點評（二）

摘要：一直以來，的面向?qū)ο笠话愣际强?，但畢竟跟其它語言中的還是相差甚遠的當然硬要實現(xiàn)也行，就是特麻煩，現(xiàn)在終于從語言層面實現(xiàn)了，鼓掌這實際上就是提供的方法，即把多個合并到一起，這下又多了一個拋棄的理由了 template string template string（模板字符串），至ES6，javascript終于也能直接往字符串里插變量了。這用途嘛，說大不大，說小也不??；雖說不能實現(xiàn)比較復...

android_c 2019-08-19 18:14 評論0 收藏0
ES6部分方法點評（三）：babel-preset-es2015-loose可轉(zhuǎn)換且移動端兼容性較好

摘要：是目前最常用的轉(zhuǎn)的工具，但即使是，各瀏覽器的支持度也是不一的，因此便產(chǎn)生了本文，找出一些能夠被翻譯成兼容性高代碼的語法。不可用因為會使用到參考資料，用來查瀏覽器兼容性。到底將代碼轉(zhuǎn)換成什么鳥樣，感謝。官網(wǎng)試驗轉(zhuǎn)換后的代碼前言由于目前各瀏覽器對ES6兼容性較低，再加上需要兼容歷史上各種版本的瀏覽器，因此，使用編譯器將ES6語法轉(zhuǎn)譯成ES5語法則勢在必行了。babel是目前最常用的ES...

wean 2019-08-21 10:53 評論0 收藏0
單例模式之es3與es6雙版本（設計模式）

摘要：單例模式是一種重要的設計模式，有些對象我們只需要創(chuàng)建一個，比如瀏覽器的對象，模態(tài)對話框。普通類負責實現(xiàn)基本功能，代理類管理單例。定義保證一個類僅有以一個實例，僅能被實例化/創(chuàng)建一次，并提供全局的訪問點。單例模式是一種重要的設計模式，有些對象我們只需要創(chuàng)建一個，比如瀏覽器的window對象，模態(tài)對話框。實現(xiàn)這種設計模式其實很簡單，最重要的是在創(chuàng)建實例的時候，用一個標記變量判斷實例是...

岳光 2019-08-22 15:57 評論0 收藏0
Node 12 值得關注的新特性

摘要：啟動速度大幅提升。同時，通過重用主進程緩存，的啟動速度提升了。在已經(jīng)引入的特性，在里面默認啟用，無需使用開啟。相關介紹診斷報告提供了新的實驗性功能診斷報告，一個非常有用的特性。升級為，增強安全功能。前言時隔一年，Node.js 12 如約而至，正式發(fā)布第一個 Current 版本。該版本帶來了諸如： V8 更新帶來好多不錯的特性。 HTTP 解析速度提升。啟動速度大幅提升。更好的...

springDevBird 2019-05-23 17:35 評論0 收藏0
React技術棧實現(xiàn)XXX點評App demo

摘要：項目的架構(gòu)也是最近在各種探討研究。還求大神多指點項目技術總結(jié)技術棧項目結(jié)構(gòu)探究初體驗關于項目中的配置說明項目簡單說明開發(fā)這一套，我個人的理解是體現(xiàn)的是代碼分層職責分離的編程思想邏輯與視圖嚴格區(qū)分。前端依舊使用技術棧完成。項目地址：https://github.com/Nealyang/R...技術棧：react、react-router4.x 、 react-redux 、 webp...

wslongchen 2019-08-21 16:24 評論0 收藏0