資訊專欄INFORMATION COLUMN
一直以來(lái)，我對(duì)ES6都不甚感興趣，一是因?yàn)樵谏a(chǎn)環(huán)境中使用ES5已是處處碰壁，其次則是只當(dāng)這ES6是語(yǔ)法糖不曾重視。
只是最近學(xué)習(xí)react生態(tài)，用起babel來(lái)轉(zhuǎn)換jsx之余，也不免碰到諸多用上ES6的教程、案例，因此便稍作學(xué)習(xí)。這一學(xué)習(xí)，便覺(jué)得這語(yǔ)法糖實(shí)在是甜，忍不住嘗鮮，于是記錄部分自覺(jué)對(duì)自己有用的方法在此。
箭頭函數(shù)是一個(gè)典型的語(yǔ)法糖，即創(chuàng)造了一種新語(yǔ)法來(lái)簡(jiǎn)化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);
語(yǔ)法大體是這樣：([函數(shù)的形參，多個(gè)參數(shù)則以逗號(hào)分隔]) => [函數(shù)返回的值/表達(dá)式]
另外，箭頭函數(shù)也可以使用{}來(lái)引入函數(shù)塊語(yǔ)句，不過(guò)這樣的話其實(shí)就只是簡(jiǎn)寫了function這一個(gè)單詞了，意義不是很大，下面放個(gè)例子：
// ES5
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
playTrumpet();
fireConfettiCannon();
});
對(duì)我來(lái)說(shuō)，簡(jiǎn)寫并不吸引我，吸引我的，是箭頭函數(shù)的一個(gè)重要特性：箭頭函數(shù)沒(méi)有它自己的this值，箭頭函數(shù)內(nèi)的this值繼承自外圍作用域。
2016-05-31修改： @n?i?g?h?t?i?r?e?同學(xué)指出
arrow function 不是“沒(méi)有自己的 this”，而是綁定了定義時(shí)的 context；這一特性等價(jià)于以前的
Function.prototype.bind
我翻查了一下MDN，里面是這么寫的：
箭頭函數(shù)則會(huì)捕獲其所在上下文的 this 值，作為自己的 this 值。
因此，@n?i?g?h?t?i?r?e?同學(xué)的說(shuō)法是有理的。
這在編寫回調(diào)函數(shù)的時(shí)候就非常好用了，我們?cè)僖膊恍枰瞄]包來(lái)保存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終于迎來(lái)了塊級(jí)作用域（{}、for、if）。
2016-05-31修改：
此處表達(dá)有誤，應(yīng)為：自ES6，javascript開始擁有塊級(jí)作用域，而let則是配合塊級(jí)作用域，作為替代var的一個(gè)語(yǔ)法定義。
有了塊級(jí)作用域，再也不用擔(dān)心臨時(shí)變量污染到外層的變量了：
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
const
const是用來(lái)定義常量的，一旦定義了就不可修改（一修改就報(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"; // 這不會(huì)報(bào)錯(cuò)
config = {}; // 這才會(huì)報(bào)錯(cuò)
請(qǐng)恕我才疏學(xué)淺，尚不能理解“命名綁定”呀、函數(shù)式編程之類的。我對(duì)上面這個(gè)例子的理解是，config只是一個(gè)object的引用，無(wú)論這個(gè)object本身怎么變化，只要config這個(gè)變量的“指向”沒(méi)變化，那就不會(huì)報(bào)錯(cuò)。
destructuringdestructuring是解構(gòu)的意思，ES6允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。來(lái)兩個(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 // 對(duì)象的解構(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è)語(yǔ)法糖，那這是用在什么地方呢？請(qǐng)不要著急，聽(tīng)我細(xì)細(xì)道來(lái)：
在我們封裝函數(shù)的時(shí)候，如果形參較多，為了使用者不需要按順序來(lái)傳入?yún)?shù)，往往用一個(gè)object來(lái)承載所有的參數(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);
}
這種做法，雖說(shuō)使用者是方便了，但寫函數(shù)的人卻麻煩了，每次用參數(shù)都要帶上params.，或者再寫個(gè)var id = params.id來(lái)讓后續(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: "一年級(jí)",
nickname: "布萊德",
age: 12,
address: "木馬號(hào)"
});
這樣一來(lái)，使用者用起來(lái)很方便，而函數(shù)內(nèi)部又直接解構(gòu)賦值到各變量上，用起來(lái)也方便多了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79355.html
摘要：一直以來(lái)，的面向?qū)ο笠话愣际强浚吘垢渌Z(yǔ)言中的還是相差甚遠(yuǎn)的當(dāng)然硬要實(shí)現(xiàn)也行，就是特麻煩，現(xiàn)在終于從語(yǔ)言層面實(shí)現(xiàn)了，鼓掌這實(shí)際上就是提供的方法，即把多個(gè)合并到一起，這下又多了一個(gè)拋棄的理由了 template string template string（模板字符串），至ES6，javascript終于也能直接往字符串里插變量了。這用途嘛，說(shuō)大不大，說(shuō)小也不??；雖說(shuō)不能實(shí)現(xiàn)比較復(fù)...
摘要：是目前最常用的轉(zhuǎn)的工具，但即使是，各瀏覽器的支持度也是不一的，因此便產(chǎn)生了本文，找出一些能夠被翻譯成兼容性高代碼的語(yǔ)法。不可用因?yàn)闀?huì)使用到參考資料，用來(lái)查瀏覽器兼容性。到底將代碼轉(zhuǎn)換成什么鳥樣，感謝。官網(wǎng)試驗(yàn)轉(zhuǎn)換后的代碼 前言 由于目前各瀏覽器對(duì)ES6兼容性較低，再加上需要兼容歷史上各種版本的瀏覽器，因此，使用編譯器將ES6語(yǔ)法轉(zhuǎn)譯成ES5語(yǔ)法則勢(shì)在必行了。babel是目前最常用的ES...
摘要：?jiǎn)卫Ｊ绞且环N重要的設(shè)計(jì)模式，有些對(duì)象我們只需要?jiǎng)?chuàng)建一個(gè)，比如瀏覽器的對(duì)象，模態(tài)對(duì)話框。普通類負(fù)責(zé)實(shí)現(xiàn)基本功能，代理類管理單例。 定義 保證一個(gè)類僅有以一個(gè)實(shí)例，僅能被實(shí)例化/創(chuàng)建一次，并提供全局的訪問(wèn)點(diǎn)。 單例模式是一種重要的設(shè)計(jì)模式，有些對(duì)象我們只需要?jiǎng)?chuàng)建一個(gè)，比如瀏覽器的window對(duì)象，模態(tài)對(duì)話框。實(shí)現(xiàn)這種設(shè)計(jì)模式其實(shí)很簡(jiǎn)單，最重要的是在創(chuàng)建實(shí)例的時(shí)候，用一個(gè)標(biāo)記變量判斷實(shí)例是...
摘要：?jiǎn)?dòng)速度大幅提升。同時(shí)，通過(guò)重用主進(jìn)程緩存，的啟動(dòng)速度提升了。在已經(jīng)引入的特性，在里面默認(rèn)啟用，無(wú)需使用開啟。相關(guān)介紹診斷報(bào)告提供了新的實(shí)驗(yàn)性功能診斷報(bào)告，一個(gè)非常有用的特性。升級(jí)為，增強(qiáng)安全功能。 前言 時(shí)隔一年，Node.js 12 如約而至，正式發(fā)布第一個(gè) Current 版本。 該版本帶來(lái)了諸如： V8 更新帶來(lái)好多不錯(cuò)的特性。 HTTP 解析速度提升。 啟動(dòng)速度大幅提升。 更好的...
摘要：項(xiàng)目的架構(gòu)也是最近在各種探討研究。還求大神多指點(diǎn)項(xiàng)目技術(shù)總結(jié)技術(shù)棧項(xiàng)目結(jié)構(gòu)探究初體驗(yàn)關(guān)于項(xiàng)目中的配置說(shuō)明項(xiàng)目簡(jiǎn)單說(shuō)明開發(fā)這一套，我個(gè)人的理解是體現(xiàn)的是代碼分層職責(zé)分離的編程思想邏輯與視圖嚴(yán)格區(qū)分。前端依舊使用技術(shù)棧完成。 項(xiàng)目地址：https://github.com/Nealyang/R...技術(shù)棧：react、react-router4.x 、 react-redux 、 webp...
閱讀 3396·2023-04-26 01:58
閱讀 1066·2021-11-24 09:38
閱讀 3397·2021-09-03 10:29
閱讀 798·2021-08-21 14:10
閱讀 1562·2019-08-30 15:44
閱讀 3181·2019-08-30 14:10
閱讀 3364·2019-08-29 16:32
閱讀 1545·2019-08-29 12:48
