成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

ES6部分方法點(diǎn)評（一）

weakish / 733人閱讀

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這在編寫回調(diào)函數(shù)的時(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修改：
此處表達(dá)有誤，應(yīng)為：自ES6，javascript開始擁有塊級作用域，而let則是配合塊級作用域，作為替代var的一個(gè)語法定義。

有了塊級作用域，再也不用擔(dān)心臨時(shí)變量污染到外層的變量了：

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

const是用來定義常量的，一旦定義了就不可修改（一修改就報(bào)錯(cuò)）。用途嘛，也比較單一，就是定義一下配置項(xiàng)什么的，免得被團(tuán)隊(duì)里的愣頭青寫的代碼給瞎改了。

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

const config = {};
config.env = "development";  // 這不會報(bào)錯(cuò)

config = {};  // 這才會報(bào)錯(cuò)

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

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


"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ù)一樣，也是個(gè)語法糖，那這是用在什么地方呢？請不要著急，聽我細(xì)細(xì)道來：
在我們封裝函數(shù)的時(shí)候，如果形參較多，為了使用者不需要按順序來傳入?yún)?shù)，往往用一個(gè)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.，或者再寫個(gè)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)賦值到各變量上，用起來也方便多了。

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

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

相關(guān)文章

  • ES6部分方法點(diǎn)評（二）

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

    android_c 評論0 收藏0

  • ES6部分方法點(diǎn)評（三）：babel-preset-es2015-loose可轉(zhuǎn)換且移動(dòng)端兼容性較好

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

    wean 評論0 收藏0

  • 單例模式之es3與es6雙版本（設(shè)計(jì)模式）

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

    岳光 評論0 收藏0

  • Node 12 值得關(guān)注的新特性

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

    springDevBird 評論0 收藏0

  • React技術(shù)棧實(shí)現(xiàn)XXX點(diǎn)評App demo

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

    wslongchen 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<