一、ES版本簡(jiǎn)介和調(diào)試運(yùn)行方法

1.1 ECMAScript簡(jiǎn)介

MDN手冊(cè)：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

JavaScript 的標(biāo)準(zhǔn)是 ECMAScript。截至 2012 年，所有的現(xiàn)代瀏覽器都完整了支持 ECMAScript 5.1。舊式的瀏覽器至少支持 ECMAScript 3 標(biāo)準(zhǔn)。

2015年6月17日，ECMA國(guó)際組織發(fā)布了 ECMAScript 6.0，該版本正式名稱(chēng)為ECMAScript 2015，是“JavaScript 語(yǔ)言的下一代標(biāo)準(zhǔn)”。但通常被稱(chēng)為 ECMAScript 6或ES6。它的目標(biāo)，是使得 JavaScript 語(yǔ)言可以用來(lái)編寫(xiě)復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言。本文檔目前覆蓋了最新ECMAScript的草案，也就是ECMAScript2018。

?

?ES是ECMAScript的簡(jiǎn)稱(chēng)。是JavaScript執(zhí)行標(biāo)準(zhǔn)的制定者。

??ES6 也稱(chēng)為ES2015 全稱(chēng)是ECMAScript2015

??ES7 也稱(chēng)為ES2016 全稱(chēng)是ECMAScript2016

??ES8 也稱(chēng)為ES2017 全稱(chēng)是ECMAScript2017

??ES9 也稱(chēng)為ES2018 全稱(chēng)是ECMAScript2018

?

從 ES6開(kāi)始ECMA組織每年發(fā)布一個(gè)版本，以年份作為名稱(chēng)，因此又稱(chēng)ECMAScript 2017，簡(jiǎn)稱(chēng) ES2017。

大家基本上記不住哪個(gè)版本的ES更新了什么，所以統(tǒng)稱(chēng)為ENV（ECMAScript New Version）。

---

?

1.2 ECMAScript和JavaScript的關(guān)系

?一個(gè)常見(jiàn)的問(wèn)題是，ECMAScript 和 JavaScript 到底是什么關(guān)系？

講清楚這個(gè)問(wèn)題，需要回顧歷史。1996年11月，JavaScript的創(chuàng)造者Netscape公司，決定將 JavaScript提交給標(biāo)準(zhǔn)化組織ECMA，希望這種語(yǔ)言能夠成為國(guó)際標(biāo)準(zhǔn)。次年，ECMA發(fā)布262號(hào)標(biāo)準(zhǔn)文件（ECMA-262）的第一版，規(guī)定了瀏覽器腳本語(yǔ)言的標(biāo)準(zhǔn)，并將這種語(yǔ)言稱(chēng)為ECMAScript，這個(gè)版本就是1.0版。

?

該標(biāo)準(zhǔn)從一開(kāi)始就是針對(duì)JavaScript語(yǔ)言制定的，但是之所以不叫JavaScript，有兩個(gè)原因。一是商標(biāo)，Java是Sun公司的商標(biāo)，根據(jù)授權(quán)協(xié)議，只有Netscape公司可以合法地使用 JavaScript這個(gè)名字，且 JavaScript本身也已經(jīng)被 Netscape 公司注冊(cè)為商標(biāo)。二是想體現(xiàn)這門(mén)語(yǔ)言的制定者是ECMA，不是 Netscape，這樣有利于保證這門(mén)語(yǔ)言的開(kāi)放性和中立性。

?因此，ECMAScript和JavaScript的關(guān)系是，前者是后者的標(biāo)準(zhǔn)，后者是前者的一種實(shí)現(xiàn)。日常場(chǎng)合，這兩個(gè)詞是可以互換的。

?

關(guān)于更多ECMAScript請(qǐng)閱讀：http://es6.ruanyifeng.com/#docs/intro

---

?

1.3瀏覽器兼容性

瀏覽器和NodeJS對(duì)ES6新語(yǔ)法特性的支持，要看兼容性。各大瀏覽器的最新版本，對(duì) ES6 的支持可以查看：

?https://www.caniuse.com/

?http://kangax.github.io/compat-table/es6/

?

隨著時(shí)間的推移，支持度已經(jīng)越來(lái)越高了，超過(guò) 90%的 ES6 語(yǔ)法特性都實(shí)現(xiàn)了。

Node 是 JavaScript 的服務(wù)器運(yùn)行環(huán)境（runtime），它對(duì) ES6的支持度更高。

?

訪問(wèn)http://ruanyf.github.io/es-checker可以查看當(dāng)前瀏覽器的支持ES6的程度

ES-Checker這個(gè)工具，可以用來(lái)檢查你當(dāng)前Node支持ES6的程度

運(yùn)行下面的命令，可以查看你在使用的Node環(huán)境對(duì)ES6的支持程度

$ npm install -g es-Checker $ es-checker

Nodejs現(xiàn)在的最高版本是10，隨著版本的升級(jí)，實(shí)際上Nodejs本身比如http、fs模塊等幾乎沒(méi)什么更新，變化就是對(duì)ES的新語(yǔ)法支持，Nodejs 6最高版本，幾乎全部支持了常用的新版ES語(yǔ)法。

?在瀏覽器和node環(huán)境都可以運(yùn)行，但是有很多舊版瀏覽器尚未支持。

?

高級(jí)瀏覽器開(kāi)始逐步支持ES6、7、8這些新特性，比如寫(xiě)一個(gè)“自動(dòng)解構(gòu)”語(yǔ)法：

const [a,b,c] = [1,2,3]; console.log(a) console.log(b) console.log(c)

---

二、Babel翻譯器

?????由于瀏覽器的版本和兼容性問(wèn)題，很多JavaScript的新的方法都不能使用，等到可以大膽使用的時(shí)候，可能已經(jīng)過(guò)去了好幾年。Babel就因此而生，它可以讓你放心使用大部分的JavaScript的新的標(biāo)準(zhǔn)的方法，然后編譯成兼容絕大多數(shù)的主流瀏覽器的代碼。

Babel是一個(gè)廣泛使用的ES6轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這意味著，你可以用 ES6 的方式編寫(xiě)程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持。

?

中文官網(wǎng)：https://babeljs.cn

?

2.1 babel安裝

Babel是我們學(xué)習(xí)的第一個(gè)前端工作流工具，它是一個(gè)JavaScript編譯器，能將ES6、7、8的代碼翻譯成IE8能夠識(shí)別的ES5語(yǔ)法。

l?什么是前端工作流工具？

用Nodejs編寫(xiě)的，用npm發(fā)布的，一些開(kāi)發(fā)人員在開(kāi)發(fā)的時(shí)候能夠運(yùn)行的便利工具。

?

安裝babel工作流工具：

npm install -g babel-cli

babel提供babel-cli工具，用于命令行轉(zhuǎn)換，-g安裝之后的程序并不是屬于某一個(gè)單獨(dú)的項(xiàng)目，而是操作系統(tǒng)的全局。CLI表示Command Line Interface，命令行接口，就是用CMD能夠調(diào)用這個(gè)命令。

?

?安裝完畢后，用命令查看版本是否安裝成功

babel --version

?

在項(xiàng)目文件夾中打開(kāi)CMD命令行窗口，輸入：

babel 01.js -o a.js

-o表示output輸出，這條語(yǔ)句能將01.js翻譯為a.js

?

但是發(fā)現(xiàn)，并沒(méi)有將ES6語(yǔ)法翻譯成ES5語(yǔ)法：

? ?

? ?

?

因?yàn)槲覀儧](méi)有告訴babel，讓它去幫我們翻譯ES6語(yǔ)法，怎么指導(dǎo)它翻譯？

接下來(lái)需要配置對(duì)應(yīng)的.babelrc文件才可以發(fā)揮完整的作用。

---

2.2 .babelrc文件preset

必須使用.babelrc文件去指導(dǎo)babel工作。

windows系統(tǒng)不允許用戶(hù)創(chuàng)建“.”開(kāi)頭的文件

?

方法1：用sublime可以新建。

?

方法2：打開(kāi)cmd窗口，輸入一下命令將a.txt文件重命名為.babelrc

rename a.txt .babelrc

?

?預(yù)設(shè)（presets）

該文件用來(lái)設(shè)置轉(zhuǎn)碼規(guī)則和插件，使用的時(shí)候需要安裝對(duì)應(yīng)的插件，并且寫(xiě)一些配置：

{"presets":["es2015","es2016"] }

用presets設(shè)定轉(zhuǎn)碼規(guī)則，就是說(shuō)babel要翻譯哪些語(yǔ)法，我們一般翻譯es2015、es2016寫(xiě)在數(shù)組中。

?

env表示ECMAScript New Version，就是新的版本ES語(yǔ)法：

{"presets":["env"] }

?

接下需要安裝語(yǔ)法依賴(lài)：

npm install --save-dev babel-preset-es2015 npm install --save-dev babel-preset-es2016

--save-dev表示添加“開(kāi)發(fā)依賴(lài)”，--save表示添加“運(yùn)行依賴(lài)”，開(kāi)發(fā)時(shí)需要babel翻譯，運(yùn)行時(shí)babel已經(jīng)翻譯好了，運(yùn)行就不需要babel了，所以--save-dev是開(kāi)發(fā)才需要的。

?

安裝完插件后，就可以再次使用babel翻譯

babel 01.js -o a.js

翻譯前： ? ?

翻譯后： ? ?

?

Babel的配置和使用總流程：

?

presets字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供以下的規(guī)則集，你可以根據(jù)需要安裝。

?

最新轉(zhuǎn)碼規(guī)則：

$ npm install --save-dev babel-preset-latest

?

不同階段語(yǔ)法提案的轉(zhuǎn)碼規(guī)則（共有4個(gè)階段），選裝一個(gè)：

$ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3

?

然后，將這些規(guī)則加入.babelrc文件。

{"presets": ["latest","react","stage-2"],"plugins": []}

上面這些代碼是在全局環(huán)境下，進(jìn)行Babel轉(zhuǎn)碼。這意味著，如果項(xiàng)目要運(yùn)行，全局環(huán)境必須有安裝Babel，也就是說(shuō)項(xiàng)目產(chǎn)生了對(duì)環(huán)境的依賴(lài)。另一方面，這樣做也無(wú)法支持不同項(xiàng)目使用不同版本的Babel。

?

所以，雖然在你的機(jī)器上全局安裝 Babel CLI, 但根據(jù)單個(gè)項(xiàng)目進(jìn)行本地安裝會(huì)更好一些。

這樣做有兩個(gè)主要的原因：

同一機(jī)器上的不同項(xiàng)目可以依賴(lài)不同版本的 Babel, 這允許你一次更新一個(gè)項(xiàng)目。

這意味著在你的工作環(huán)境中沒(méi)有隱含的依賴(lài)項(xiàng)。它將使你的項(xiàng)目更方便移植、更易于安裝。

?

解決辦法是將babel-cli安裝在項(xiàng)目中，通過(guò)以下命令本地安裝Babel CLI到項(xiàng)目依賴(lài):

npm install --save-dev babel-cli

更多請(qǐng)閱讀：

http://www.ruanyifeng.com/blog/2016/01/babel.html

---

三、const和let

開(kāi)始學(xué)習(xí)ES6、7、8的語(yǔ)法精粹。

更多的去看：http://es6.ruanyifeng.com/

?

3.1 const

const用來(lái)定義常量，所謂的常量就是值一旦給定后就不變，一次定義終身不變的量。

const a = 10; a = 20;

上面的a就是常量，如果給a重新賦值，會(huì)報(bào)錯(cuò)。

?

?

const通常會(huì)定義兩種值

l?定義函數(shù)

const sum = function(a,b){return a + b; } console.log(sum(3,4))

?

l?定義一些特定的字符串和常數(shù)

const PI = 3.14; const HELLO_WORLD = "世界，你好";

常量名一般全是大寫(xiě)，如果由多個(gè)單詞組成，用下劃線隔開(kāi)，暗示這個(gè)是常量。

---

3.2 let

let用來(lái)定義塊級(jí)作用域的變量，只要有“{}”包裹，就表示塊級(jí)作用域。

注意：不是JSON，if語(yǔ)句體、函數(shù)、while、for是塊，for循環(huán)的()部分也是塊級(jí)。

{var a = 10; } console.log(a); //10

?

var這個(gè)定義的變量是函數(shù)級(jí)作用域，不是塊級(jí)作用域。

{let a = 10; } console.log(a); //報(bào)錯(cuò) a is not defined

?

注意：通常在for循環(huán)使用let，此時(shí)循環(huán)體中自動(dòng)加了閉包：

for(let i = 0;i < 10;i++){} console.log(i);//報(bào)錯(cuò)

?

看一個(gè)面試題：

var arr = []; for(var i = 0; i < 10;i++){arr.push(function(){console.log(i)}) } console.log(arr) arr[4]();

數(shù)組中存儲(chǔ)了10個(gè)函數(shù)，當(dāng)我們?nèi)我庹{(diào)用時(shí)，比如arr[4]()函數(shù)，會(huì)輸出10.

?

因?yàn)楹瘮?shù)調(diào)用時(shí)，i已經(jīng)變成10了，i其實(shí)是一根全局變量，要使用IIFE執(zhí)行函數(shù)：

var arr = []; for(var i = 0; i < 10;i++){(function(a){arr.push(function(){console.log(a)})})(i); } console.log(arr) arr[4]();

?

現(xiàn)在用let，非常簡(jiǎn)單：

var arr = []; for(let i = 0; i < 10;i++){arr.push(function(){console.log(i)}) } console.log(arr) arr[4]();

let和for是絕配，let平時(shí)沒(méi)啥用。

?

總結(jié)：

l?const用來(lái)定義常量，通常定義函數(shù)和常數(shù)

l?let用來(lái)定義{}塊級(jí)的作用域的變量，通常用來(lái)定義for循環(huán)的變量

常量是塊級(jí)作用域，很像使用let，語(yǔ)句定義的變量，常量的值不能通過(guò)重新賦值來(lái)改變，并且不能重新聲明。

?

let和const的疑點(diǎn)等面試題再加，比如：

console.log(m); let m = 10; //報(bào)錯(cuò)，let沒(méi)有變量聲明提升

---

3.3 Babel的翻譯結(jié)果

對(duì)于const。babel會(huì)翻譯var，但是翻譯的時(shí)候，會(huì)驗(yàn)證const是否重新賦值了，是就報(bào)錯(cuò)。

翻譯前： ? ?

翻譯后： ? ?

?

for循環(huán)的翻譯：

翻譯前： ? ?

翻譯后： ? ?

?

---

四、變量的解構(gòu)賦值

ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，給變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)。

解構(gòu)的作用是可以快速取得數(shù)組或?qū)ο笾械脑鼗驅(qū)傩?#xff0c;而無(wú)需使用arr[x]或obj[key]等傳統(tǒng)方式去賦值。

以前為變量賦值，只能直接指定值：

var a = 1; var b = 2; var c = 3;

---

4.1數(shù)組解構(gòu)

所謂的解構(gòu)就是一個(gè)快速給數(shù)組或者對(duì)象中的值，快速傳入變量的方法。

數(shù)組可以解構(gòu)，當(dāng)?shù)忍?hào)右側(cè)是數(shù)組的時(shí)候，等于左側(cè)可以將變量裝入[]中接收，一一對(duì)應(yīng)接收。

var [a,b,c] = [1,2,3]; console.log(a); //1 console.log(b); //2 console.log(c); //3

上面代碼表示，可以從數(shù)組中提取值，按照對(duì)應(yīng)位置，給變量賦值。

本質(zhì)上，這種寫(xiě)法屬于“模式匹配”，只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值。

?

如果數(shù)組較為復(fù)雜，此時(shí)左側(cè)結(jié)構(gòu)的那項(xiàng)變量，也有相同的結(jié)構(gòu)

var [a,b,[c,d]] = [1,2, [3,4]]; console.log(a); //1 console.log(b); //2 console.log(c); //3 console.log(d); //4 var [a,b,c] = [1,2, [3,4]]; console.log(a); //1 console.log(b); //2 console.log(c); //[3,4]

?

下面是一些嵌套數(shù)組進(jìn)行解構(gòu)的例子：

let [x, ,y] = [1, 2, 3]; console.log(x) // 1 console.log(y) // 3

如果解構(gòu)不成功，變量的值等于undefined

let [a] = []; let [b,c] = [1]; console.log(a); //undefined console.log(b); //1 console.log(c); //undefined

?

另一種情況是不完全解構(gòu)，即等號(hào)左邊的模式，只匹配一部分的等于右邊的數(shù)組，這種情況：

let [a,[b],c] = [1,[2,3],4]; console.log(a); //1 console.log(b); //2 console.log(c); //4

---

4.2對(duì)象解構(gòu)

對(duì)象的結(jié)構(gòu)和數(shù)組有個(gè)不同點(diǎn)，數(shù)組的元素是按照順序排列，變量的取值由它的位置決定。

而對(duì)象的屬性沒(méi)有順序，但是變量必須與屬性同名，才能取到正確的值。

var {name,id,sex} = {"id":1001, "name":"小明", "sex":"男"}; console.log(id) console.log(name) console.log(sex)

上面的例子，等號(hào)左邊的變量順序和等號(hào)右邊3個(gè)同名屬性的順序不一樣，但取值沒(méi)有影響。

?

如果變量名和屬性名不一致，必須寫(xiě)成下面這樣：

var {name:names, id:ids, sex: sexs} = {id:1001, name:"小明", sex:"男"}; console.log(ids) console.log(names) console.log(sexs)

實(shí)際上說(shuō)明，對(duì)象的解構(gòu)賦值是上面形式的簡(jiǎn)寫(xiě)。

上面代碼中name是匹配模式，names才是變量，真正被賦值的是names，而不是names。也就是說(shuō)，對(duì)象解構(gòu)賦值的內(nèi)部機(jī)制，是先找到同名屬性，然后再賦值給對(duì)應(yīng)的變量，真正被賦值的是后者。

---

4.3默認(rèn)值

解構(gòu)賦值允許指定默認(rèn)值。

let [a = 100] = []; let [x, y = 200] = [100] console.log(a); //100 console.log(x); //100 console.log(y); //200

注意：ES6內(nèi)部使用嚴(yán)格相等運(yùn)算符（===），判斷一個(gè)位置是否有值，所以只有當(dāng)一個(gè)數(shù)組成員嚴(yán)格等于undefined，默認(rèn)值才會(huì)生效。

?

let [a = 88] = [undefined] let [b = 88] = [null] console.log(a); //88 console.log(b); //null

上面代碼中有一個(gè)數(shù)組成員是null，默認(rèn)值就不生效，因?yàn)?/span>null不嚴(yán)格等于undefined。

更多解構(gòu)的知識(shí)點(diǎn)閱讀：http://es6.ruanyifeng.com/#docs/destructuring

?

字符串也可以解構(gòu)賦值。這是因?yàn)榇藭r(shí)，字符串被轉(zhuǎn)換成了一個(gè)類(lèi)似數(shù)組的對(duì)象。

const [a, b, c, d, e] = 'hello'; console.log(a) // "h" console.log(b) // "e" console.log(c) // "l" console.log(d) // "l" console.log(e) // "o"

---

4.4擴(kuò)展運(yùn)算符（spread operator）

擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)（...）。將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列，還能強(qiáng)制展開(kāi)一個(gè)對(duì)象，通常用于對(duì)象的賦值，使用靈活廣泛。

?

l?第一個(gè)作用：稱(chēng)為“展開(kāi)運(yùn)算符”，作用和字母意思用于，就是把東西展開(kāi)，可以用在數(shù)組和對(duì)象上。

var obj1 = {a : 100,b : 200,c : 300 }var obj2 = { ...obj1,d : 888 }console.log(obj1) console.log(obj2) console.log(obj1 === obj2);

?

數(shù)組也可以強(qiáng)制展開(kāi)，通常數(shù)組的賦值，比如有兩個(gè)數(shù)組合并成一個(gè)數(shù)組：

var arr1 = ["小白","小黑","白無(wú)常","黑無(wú)常"]; var arr2 = ["小明","小紅","小花","小剛"];var arr = [...arr1, ...arr2]; console.log(arr);

?

?原來(lái)想把一個(gè)數(shù)組打散傳入到函數(shù)中作為參數(shù)，通常用apply：

function sum(a,b,c,d){return a+b+c+d; }var arr = [1,2,3,4]; console.log(sum.apply(null, arr)); //10

?

可以用...運(yùn)算符，將數(shù)組強(qiáng)制展開(kāi)為一個(gè)散列的形式

function sum(a,b,c,d){return a+b+c+d; }var arr = [1,2,3,4]; console.log(sum(...arr)); //10

---

4.5剩余操作符（rest operator）

第二、三個(gè)作用：叫“剩余操作符”是解構(gòu)的一種，意思是把剩余的參數(shù)放到一個(gè)數(shù)組或?qū)ο笾匈x值給它。一般針對(duì)數(shù)組或?qū)ο蟆?/strong>

注意“...”只能出現(xiàn)最后一個(gè)參數(shù)，并且通過(guò)這個(gè)例子發(fā)現(xiàn)...能將零散的值收納為數(shù)組。

var [a,b, ...c] = [1,2,3,4,5,6]; console.log(a); console.log(b); console.log(c);

?

邏輯上“...”是一個(gè)運(yùn)算符

console.log(...[1,2,3,4])

通過(guò)這個(gè)實(shí)驗(yàn)發(fā)現(xiàn)，“...”能將數(shù)組打散為零散值。

?

應(yīng)用場(chǎng)景1：當(dāng)寫(xiě)Ajax時(shí)，參數(shù)是JSON，此時(shí)可以直接將JSON解構(gòu)

JSON：

{"a":100,"b":200,"c":300}

?

傳統(tǒng)方法接收：

$.get("data/1.json", function(data){console.log(data.a)console.log(data.b)console.log(data.c) })

?

ES6的解構(gòu)語(yǔ)法接收數(shù)據(jù)：

$.get("data/1.json", function({a,b,c}){console.log(a)console.log(b)console.log(c) })

?

補(bǔ)充個(gè)知識(shí)點(diǎn)，在ES6中當(dāng)一個(gè)對(duì)象的k和v一致時(shí)，可以省略v。

var a = 10; var obj = {a,b : 20,c : 30, } console.log(obj); //{ a: 10, b: 20, c: 30 }

?

應(yīng)用場(chǎng)景2：

以后函數(shù)大概率都是接收一個(gè)JSON當(dāng)參數(shù)，并且用ES6解構(gòu)語(yǔ)法寫(xiě)形參

調(diào)用函數(shù)的時(shí)候傳的參數(shù)，一般都是k:v，一直省略v

var name = "小明"; var height = 170; var weight = 100; function buy({name,weight,height}){console.log(name)console.log(height)console.log(weight) }// buy({name:"小明", height:170, weight:100}); // buy({name:name, height:height, weight:weight}); buy({name, height, weight});

紅色部分的語(yǔ)句是在創(chuàng)建JSON，綠色的部分是在進(jìn)行結(jié)構(gòu)。

調(diào)用函數(shù)時(shí)參數(shù)順序打亂也不影響結(jié)構(gòu)，因?yàn)榻鈽?gòu)，會(huì)自動(dòng)匹配key。

?

應(yīng)用場(chǎng)景3

有一個(gè)數(shù)組arr1，在不改變arr1數(shù)組情況下，想往arr1數(shù)組前面加一項(xiàng)作為arr2新數(shù)組。

var arr1 = [8,9,10,11,12]; var arr2 = [...arr1, 13]; var arr3 = [7, ...arr1]; console.log(arr1) console.log(arr2) console.log(arr3)

?

擴(kuò)展運(yùn)算符和剩余操作符的區(qū)別

簡(jiǎn)單的說(shuō)，在某種程度上，剩余操作符和擴(kuò)展運(yùn)算符相反，擴(kuò)展運(yùn)算符會(huì)“展開(kāi)”數(shù)組變成多個(gè)元素，剩余操作符會(huì)收集多個(gè)零散元素合并成一個(gè)元素。

---

4.6對(duì)象解構(gòu)的翻譯問(wèn)題

注意：babel會(huì)將“[]”和“{}”解構(gòu)變?yōu)橐粋€(gè)個(gè)的var。

數(shù)組解構(gòu)翻譯前	數(shù)組解構(gòu)翻譯后
? ?	? ?

?

但是babel不能翻譯“對(duì)象解構(gòu)”，只能翻譯數(shù)組解構(gòu)：

?

原因：object-rest-spread 還處于stage階段（屬于實(shí)驗(yàn)性屬性）。

?

解決方法：安裝babel插件transform-rest-spread，放到.babelrc文件配置上，即可使用。

{"presets":["es2015","es2016"],"plugins":["transform-object-rest-spread"] }

.babelrc的presets是用來(lái)定義預(yù)設(shè)，plugins定義插件。

?

安裝依賴(lài)：

npm install babel-plugin-transform-object-rest-spread --save-dev

此時(shí)，babel就可以翻譯對(duì)象解構(gòu)了。

對(duì)象翻譯前	對(duì)象翻譯后
? ?	? ?

?

變量的解構(gòu)賦值用途很多。

---

五、ES6語(yǔ)法

ES6中對(duì)數(shù)組新增了幾個(gè)函數(shù)：map()、filter()、reduce()

ES5新增的forEach()。

都是一些語(yǔ)法糖。

5.1 forEach()遍歷數(shù)組

forEach()方法用來(lái)循環(huán)遍歷數(shù)組，方法中的function回調(diào)函數(shù)接收3個(gè)參數(shù)

參數(shù)1是遍歷的數(shù)組內(nèi)容(item)；參數(shù)2是對(duì)應(yīng)的數(shù)組索引(index)，參數(shù)3是是數(shù)組本身(array)。

[].forEach(function(item,index,array){ ... }) var arr = ["白板","幺雞","紅中","發(fā)財(cái)","八萬(wàn)"]; arr.forEach(function(item,index,array){console.log(item,index,array) })

forEach函數(shù)沒(méi)有返回值

for今后是創(chuàng)建數(shù)組，遍歷或操作數(shù)組可以交給forEach方法。

---

5.2 map()映射

map方法的作用，“映射”也就是原數(shù)組被“映射”成對(duì)應(yīng)的新數(shù)組。

[].map(function(item,index,array){ ... }) var arr = ["白板","幺雞","紅中","發(fā)財(cái)","八萬(wàn)"]; arr.map(function(item,index,array){console.log(item,index,array) })

?

寫(xiě)一個(gè)案例：比如創(chuàng)建一個(gè)新數(shù)組，每一項(xiàng)都是原數(shù)組值的兩倍

var arr = [10,20,30,40,50,99]; var newArr = arr.map(function(item,index,array){return item * 2; //返回一個(gè)新的結(jié)果，給變量接收，原數(shù)組不變 }); console.log(arr) console.log(newArr);

?

?map函數(shù)的本質(zhì)是依次遍歷原數(shù)組的每一項(xiàng)，將每一項(xiàng)都執(zhí)行一遍函數(shù)中的語(yǔ)句，返回一個(gè)新的數(shù)組。

注意：

l?函數(shù)需要有return值，如果沒(méi)有，數(shù)組所有項(xiàng)都被映射成undefined。

l?map返回的數(shù)組一定和原數(shù)組的長(zhǎng)度一樣。

?

在實(shí)際使用時(shí)，可以利用map()方便獲取對(duì)象數(shù)組中的特定屬性值們，例如下面例子：

var user = [{name:"小明","email":"xiaoming@qq.com"},{name:"小紅","email":"xiaohong@qq.com"},{name:"小剛","email":"xiaogang@qq.com"} ]var emails = user.map(function(item,index,array){return item.email; }) console.log(emails.join(","))

---

5.3 filter()過(guò)濾

filter為“過(guò)濾、篩選”之意，指原數(shù)組中filter某些項(xiàng)后，返回過(guò)濾后的新數(shù)組，用法和map相似。

比如想從原數(shù)組中，挑選所有的偶數(shù)，返回新的數(shù)組。

var arr = [312,55,77,11,13,15,18,26,30,40,50,99]; var newArr = arr.filter(function(item,index,array){return item % 2 == 0; }); console.log(arr) console.log(newArr)

描述：arr中的每一項(xiàng)會(huì)依次的執(zhí)行函數(shù)，filter的callback函數(shù)需要返回布爾值true或false。true則將值返回到新數(shù)組中，false無(wú)情地將你拋棄…

?

再比如，從數(shù)組中選擇及格的學(xué)生：

var arr1 = [{name:"小明","chengji":50},{name:"小紅","chengji":70},{name:"小黑","chengji":56},{name:"小剛","chengji":88} ]// var arr2 = arr1.filter(function(item){ // return item.chengji >= 60; // });// var arr2 = arr1.filter((item)=>{ // return item.chengji >= 60; // });// var arr2 = arr1.filter(item=>{ // return item.chengji >= 60; // });var arr2 = arr1.filter(item => item.chengji >= 60;);console.log(arr1) console.log(arr2)

filter和map相同點(diǎn)：都會(huì)遍歷數(shù)組的每一項(xiàng)

filter和map不同點(diǎn)：map返回?cái)?shù)組不會(huì)少項(xiàng)，filter可能少項(xiàng)。

---

5.4 reduce()迭代

reduce中文意思是“減少”、“約簡(jiǎn)”，不過(guò)從功能來(lái)看，是無(wú)法與“減少”這種含義聯(lián)系起來(lái)的，反而更接近于“迭代”、“遞歸（recursion）”

arr.reduce(callback,[initialValue])

第一個(gè)參數(shù)的callback回調(diào)函數(shù)有四個(gè)參數(shù)，第二個(gè)為設(shè)定的初始值（可選）。

callback函數(shù)有四個(gè)參數(shù)：

previous ：上一次疊加的結(jié)果值或初始值

current ： 當(dāng)前會(huì)參與疊加的項(xiàng)

index ：當(dāng)前值的下標(biāo)

array ：原數(shù)組本身

?

var arr = ["白板","幺雞","紅中","發(fā)財(cái)","三餅"]; arr.reduce(function(prev,cur,index,array){console.log(prev,cur) })

reduce的原理：從下標(biāo)為1的項(xiàng)開(kāi)始遍歷，每次return的值將作為下一項(xiàng)的prev值，這一次的遍歷是cur，prev會(huì)有累加的感覺(jué)。

---

案例1：求數(shù)組的總和：

var arr = [3,4,5,6]; var sum = arr.reduce(function(prev, cur){console.log(prev); //3、7、12、18// console.log(cur); //4,5,6return prev + cur; })console.log(sum);//18

?

求數(shù)組的最大值【經(jīng)典面試題】：

var arr = [43,5,4,6,888,78,554,5,6]; // var max = Math.max.apply(null,arr); var max = arr.reduce(function(a, b){console.log(a); //43、43、43、43、888、888、888...// console.log(b);return a > b ? a : b; })console.log(max);

reduce可以設(shè)置初始參數(shù)（參數(shù)自定義），下標(biāo)從0開(kāi)始遍歷。

?

求文科狀元是誰(shuí)？

var arr = [{id:1,name:"小明",sex:"男",yuwen:30},{id:2,name:"小紅",sex:"女",yuwen:60},{id:3,name:"小白",sex:"男",yuwen:130},{id:4,name:"小黑",sex:"男",yuwen:90},{id:5,name:"小花",sex:"男",yuwen:120} ]var newArr = arr.reduce(function(a,b){return a.yuwen > b.yuwen ? a : b; }) console.log(newArr)

?

要求最高分：

reduce可以設(shè)置初始參數(shù)（參數(shù)自定義），當(dāng)reduce有第二個(gè)參數(shù)時(shí)，此時(shí)reduce遍歷將從第0項(xiàng)開(kāi)始遍歷，而不是第1項(xiàng)開(kāi)始。

var newArr = arr.reduce(function(a,b){console.log(a); //0 return b.yuwen > a ? b.yuwen : a; }, 0); //初始值是0 console.log(newArr)

---

5.5用途-寫(xiě)純函數(shù)

上面的四大數(shù)組方法：map、filter、reduce特別有用，做“函數(shù)式”編程。

什么是“函數(shù)式（蘭姆達(dá)式編程）”編程？

????所有的函數(shù)都是純函數(shù)的時(shí)候，此時(shí)就是函數(shù)式編程。

什么是純函數(shù)？

純函數(shù)是指不依賴(lài)于且不改變它作用域之外的變量狀態(tài)的函數(shù)。

l?這個(gè)函數(shù)內(nèi)部不改變傳入的參數(shù)。

l?傳入這個(gè)函數(shù)一定有參數(shù)，一定會(huì)返回某一個(gè)確定的值。

l?函數(shù)中的語(yǔ)句，不能有隨機(jī)性，比如Math.random()、new Date()，傳入的參數(shù)相同，返回的值必定相同；

l?這個(gè)函數(shù)里面不能有任何異步語(yǔ)句，比如$.get()、fs.readFile()、setInterval()

一定要好好學(xué)純函數(shù)，因?yàn)?/span>react、vue都是純函數(shù)（蘭姆達(dá)）式編程。

?

【例子1】請(qǐng)寫(xiě)一個(gè)純函數(shù)addItem()，接收arr、n當(dāng)做參數(shù)，能夠在arr的尾部增加n。

錯(cuò)誤的例子：

var arr = [99,88,77]; function addItem(arr,n){arr.push(n); } addItem(arr, 66) console.log(arr);//arr被改變了，addItem不是純函數(shù)

我們絕對(duì)不能改變傳入的參數(shù)的值。

?

正確寫(xiě)法：

var arr = [99,88,77]; function addItem(arr,n){return [...arr, n]; } var arr2 = addItem(arr, 66); //返回一個(gè)新數(shù)組 console.log(arr); //原數(shù)組不變 console.log(arr2);

?

【例子2】請(qǐng)寫(xiě)一個(gè)純函數(shù)addItem()，接收arr、n當(dāng)做參數(shù)，能夠在arr的頭部增加n。

var arr = [99,88,77]; function addItem(arr,n){return [n,...arr]; } var arr2 = addItem(arr, 66); //返回一個(gè)新數(shù)組 console.log(arr); //原數(shù)組不變 console.log(arr2);

?

【例子3】請(qǐng)寫(xiě)一個(gè)純函數(shù)removeItem()，接收arr、n當(dāng)做參數(shù)，能夠?qū)?/span>arr第下標(biāo)為n的那項(xiàng)刪除。

var arr = ["白板","幺雞","二條","三萬(wàn)"]; function removeItem(arr,n){// return arr.filter(function(item,index){// return index != n;// }) return arr.filter((item,index)=> index != n) } var arr2 = removeItem(arr, 2) console.log(arr); console.log(arr2);

?

【例子4】請(qǐng)寫(xiě)一個(gè)純函數(shù)changeItem()，接收arr、n、a當(dāng)參數(shù)，能將arr第下標(biāo)為n的那項(xiàng)改變值為a。

var arr = ["白板","幺雞","二條","三萬(wàn)"]; function changeItem(arr,n,a){return arr.map(function(item,index){return index === n ? a : item;}) } var arr2 = changeItem(arr, 2 ,"九條"); console.log(arr) console.log(arr2)

?

比如，寫(xiě)一個(gè)函數(shù)，可以刪除數(shù)組指定id那項(xiàng)，傳統(tǒng)寫(xiě)法：

var arr = [{id:1,name:"小明",sex:"男",yuwen:30},{id:2,name:"小紅",sex:"女",yuwen:60},{id:3,name:"小白",sex:"男",yuwen:130},{id:4,name:"小黑",sex:"男",yuwen:90},{id:5,name:"小花",sex:"男",yuwen:120} ] //刪除某一個(gè)id學(xué)生function delStudent(arr,id){for(var i = 0;i < arr.length;i++){if(arr[i].id == id){arr.splice(i, 1)}} } delStudent(arr, 2) console.log(arr); //arr被改變了，不是純函數(shù)

這個(gè)數(shù)組雖然好用，但不是純函數(shù)，因?yàn)樗祷氐慕Y(jié)果依賴(lài)于外部變量arr，并且這個(gè)函數(shù)改變了原來(lái)的數(shù)組，它會(huì)把原來(lái)的數(shù)組弄的一團(tuán)糟，我們絕對(duì)不改變傳入的參數(shù)的值。

?

?

【以下都是純函數(shù)寫(xiě)】

var arr = [... ] //刪除某一個(gè)id學(xué)生function delStudent(arr,id){return arr.filter(function(item){//如果item.id不等于傳入的id則為真會(huì)被返回，否則不返回return item.id != id;}) } var arr2 = delStudent(arr, 2); //返回一個(gè)新數(shù)組，原數(shù)組不變 console.log(arr) console.log(arr2)

上面代碼，我們只計(jì)算了作用域內(nèi)的局部變量，沒(méi)有任何的作用域外的變量被改變了。

?

更改指定id的name屬性

var arr = [... ] //改變某一個(gè)id學(xué)生的name屬性 function changeName(arr, id, name){return arr.map(function(item){// if(item.id == id){// return {...item, name}// }// return item;item.id == id ? {...item, name} : item;}) }

?

增加學(xué)生：

var arr = [{id:1,name:"小明",sex:"男",yuwen:30},{id:2,name:"小紅",sex:"女",yuwen:60},{id:3,name:"小白",sex:"男",yuwen:130},{id:4,name:"小黑",sex:"男",yuwen:90},{id:5,name:"小花",sex:"男",yuwen:120} ] function addStudent(arr,{id,name,sex,yuwen}){return [...arr,{id,name,sex,yuwen}]; } var s = {id:8,name:"鋼炮",sex:"未知",yuwen:100} var newArr = addStudent(arr, s) console.log(newArr)

?

查找所有男同學(xué)

var arr = [{id:1,name:"小明",sex:"男",yuwen:30},{id:2,name:"小紅",sex:"女",yuwen:60},{id:3,name:"小白",sex:"男",yuwen:130},{id:4,name:"小黑",sex:"男",yuwen:90},{id:5,name:"小花",sex:"男",yuwen:120} ]function findSex(arr, sex){return arr.filter(function(item){return item.sex == sex;}) } var newArr = findSex(arr, "男");console.log(newArr)

刪除用filter、修改用map、增加用...或map

?

l?總結(jié)

為什么要煞費(fèi)苦心地構(gòu)建純函數(shù)？因?yàn)榧兒瘮?shù)非常“靠譜”，執(zhí)行一個(gè)純函數(shù)你不用擔(dān)心它會(huì)干什么壞事，它不會(huì)產(chǎn)生不可預(yù)料的行為，也不會(huì)對(duì)外部產(chǎn)生影響。不管何時(shí)何地，你給它什么它就會(huì)乖乖地吐出什么。如果你的應(yīng)用程序大多數(shù)函數(shù)都是由純函數(shù)組成，那么你的程序測(cè)試、調(diào)試起來(lái)會(huì)非常方便。

?

l?使用純函數(shù)的好處

最主要的好處是沒(méi)有副作用。純函數(shù)不會(huì)修改作用域之外的狀態(tài)，做到這一點(diǎn)，代碼就變得足夠簡(jiǎn)單和清晰：當(dāng)你調(diào)用一個(gè)純函數(shù)，你只要關(guān)注它的返回值，而不用擔(dān)心因?yàn)閯e處的問(wèn)題導(dǎo)致錯(cuò)誤。

純函數(shù)是健壯的，改變執(zhí)行次序不會(huì)對(duì)系統(tǒng)造成影響，因此純函數(shù)的操作可以并行執(zhí)行。

純函數(shù)非常容易進(jìn)行單元測(cè)試，因?yàn)椴恍枰紤]上下文環(huán)境，只需要考慮輸入和輸出。

?

函數(shù)是接受一些輸入，并產(chǎn)生一些輸出的過(guò)程。這些輸入稱(chēng)為參數(shù)，輸出稱(chēng)為返回值。

?

純函數(shù)的返回值只由它調(diào)用時(shí)的參數(shù)決定，它的執(zhí)行不依賴(lài)于系統(tǒng)的狀態(tài)（比如：何時(shí)、何處調(diào)用它）。

?

l?純函數(shù)的條件：

l?一個(gè)函數(shù)的返回結(jié)果只依賴(lài)于它的參數(shù)

l?不依賴(lài)外部狀態(tài)

l?執(zhí)行過(guò)程中沒(méi)有副作用

?

什么叫函數(shù)執(zhí)行過(guò)程沒(méi)有副作用？

一個(gè)函數(shù)執(zhí)行過(guò)程中對(duì)外部產(chǎn)生了變化，那么就說(shuō)這個(gè)函數(shù)是有副作用的。

---

?

轉(zhuǎn)載于:https://www.cnblogs.com/rope/p/10729568.html

總結(jié)

以上是生活随笔為你收集整理的前端笔记之ES678WebpackBabel（上）初识ES678Babellet和const解构语法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。