一、ES簡(jiǎn)介

ES6是一個(gè)泛指，指EDMAJavaScript之后的版本。它是JS的語(yǔ)言標(biāo)準(zhǔn)。

Nodejs

簡(jiǎn)介：它是一個(gè)工具，主攻服務(wù)器，使得利用JS也可以完成服務(wù)器代碼的編寫(xiě)。

安裝：

安裝Nodejs的同時(shí)，會(huì)附帶一個(gè)npm命令，npm是Node的包管理工具。

還需要用到cnpm工具。cnpm是一個(gè)國(guó)內(nèi)的鏡像工具。比使用npm安裝一些包會(huì)更快一些。

Babel

它是轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在老版本的瀏覽器執(zhí)行。意味著可以使用ES6的方式編寫(xiě)程序，而不用擔(dān)心環(huán)境是否支持。例如：下面是使用ES6的代碼進(jìn)行轉(zhuǎn)碼。

安裝Babel工具：

參考博客：(50條消息) babel--ES6代碼轉(zhuǎn)換為ES5的代碼babel工具的安裝和使用_babel在線(xiàn)轉(zhuǎn)換_一只花小妖的博客-CSDN博客

下面是視頻得到的，有點(diǎn)錯(cuò)誤。建議看上面一個(gè)博客。下面安裝Babel工具的方法可以不用看了。?

第一步：使用命令安裝，cnpm install --save -dev @babel/core? ?//（注意是在我們需要使用轉(zhuǎn)碼工具的項(xiàng)目下使用這個(gè)命令）安裝好之后，會(huì)出現(xiàn)兩個(gè)文件：node_modules 和 { }package_json。

第二步：配置babel。創(chuàng)建配置文件.balerc文件。在里面輸入：{? ?“presets”：{?}，“plugins”：{ }? ?}

let命令：

ES6新增了let命令，用來(lái)聲明變量。它的用法類(lèi)似于var，但是所聲明的變量，只在let命令所在的代碼塊有效。

區(qū)別：以循環(huán)為例。

?注意下面這種用法：

Const命令

聲明一個(gè)只讀常量，不能改變。（只要聲明，就必須初始化）

它是一個(gè)塊級(jí)作用域；const常量也不存在常量提升。

對(duì)象解構(gòu)賦值：

就是對(duì)多個(gè)變量進(jìn)行賦值。例如：

let {name，age} = {name:"iwen" ，age:20 }

字符串?dāng)U展：

循環(huán)for( of )：例如，var str = “hello”

? ? ? ? ? ? ? ? ? ? ? ? ? ?for（let i of str）{ console.log(i) }

字符串模板：

這個(gè)模板的格式：${? }? ?

字符串方法：

indexof()? ?判斷一個(gè)字符串里面是否包含在另一個(gè)字符串中。下面是ES6新增的方法。

repeat()：

返回一個(gè)新字符串，表示將原字符串重復(fù)n次。里面參數(shù)是數(shù)字。

padStart()，padEnd()

字符串補(bǔ)全長(zhǎng)度功能，比如：游戲創(chuàng)建角色的姓名，可以使用這個(gè)方法自補(bǔ)齊姓名。

語(yǔ)法："dada".padStart(6,"li")? ?//得到“l(fā)idada” 。長(zhǎng)度是6。

? ? ? ? ? “da”.padStart(5,"li")? ? ?//得到“l(fā)ilda”? 長(zhǎng)度是5.

act()

接受一個(gè)整數(shù)作為參數(shù)，返回參數(shù) 指定位置的字符（是單個(gè)字符噢，不是字符串），支持負(fù)索引（即倒數(shù)的位置）。

若index超出范圍，返回undefined。

數(shù)組擴(kuò)展：

擴(kuò)展運(yùn)算符：?

數(shù)組的擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)：...? ? ?//將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)隔開(kāi)的參數(shù)序列。

格式：var arr=[1,2,3]；? console.log(...arr)；? ?打印1，2，3

在JS里面，Math.max(~)。里面?zhèn)魅胍幌盗械膮?shù)，不能用于判斷數(shù)組里面的大小。

在Java里，Math.max(~,~)。是判斷兩個(gè)參數(shù)的大小。同樣不能用于判斷數(shù)組的大小。

但是，在js里面可以用數(shù)組的擴(kuò)展運(yùn)算符對(duì)數(shù)組進(jìn)行變成一系列數(shù)據(jù)，然后獲取數(shù)組的最大值。

例如：Math.max(...arr)。就能獲取arr數(shù)組的最大值。

還可以用來(lái)合并數(shù)組：

新增方法（數(shù)組擴(kuò)展）：

Array.from()方法，用于將類(lèi)數(shù)組、偽數(shù)組轉(zhuǎn)為真正的數(shù)組。而常見(jiàn)的類(lèi)數(shù)組有三類(lèi)：arguments、元素集合、類(lèi)似數(shù)組的對(duì)象。

類(lèi)數(shù)組、偽數(shù)組，只能使用數(shù)組的讀取方式和length屬性，不能使用數(shù)組方法push。

//argument，例如：add(10，20，30)。這就是一個(gè)類(lèi)數(shù)組。通過(guò)function add(){console.log(argument) } 可以讀取到10，20，30。

//元素集合：let titles = document.querySelectorAll("h3")；

? ? ? ? ?<h3>這是一個(gè)標(biāo)題</h3>? ?<h3>這是一個(gè)標(biāo)題</h3>? ?<h3>這是一個(gè)標(biāo)題</h3>

通過(guò)console.log(titles)，就可以打印出三個(gè)<h3>的標(biāo)簽。

//類(lèi)似于數(shù)組的對(duì)象，其實(shí)就是對(duì)象。var user={name:"iwen"，age:20}

這三種方式，都可以通過(guò)Array.from()轉(zhuǎn)換成數(shù)組，它的返回類(lèi)型是數(shù)組。

格式：var arr = Array.from(arguments)；

Arrays.of()這是另一種方法，它用于將一組值，轉(zhuǎn)換為數(shù)組。與Array.from()不同，格式：Array.of(3,11,8)? ?//得到[3，11，8]

對(duì)象的擴(kuò)展：

它的主要用法是使得對(duì)象的書(shū)寫(xiě)變得更加簡(jiǎn)約。ES6允許在大括號(hào)里面，直接寫(xiě)入變量和函數(shù)，作為對(duì)象的屬性和方法。例如：在大括號(hào)外面定義了let name="iwen"。那么在大括號(hào)里面，對(duì)象，const user={name，age：20}；里面可以直接寫(xiě)name，而不用寫(xiě)name：“iwen”。

還可以用作屬性名表達(dá)式、對(duì)象的擴(kuò)展運(yùn)算符。

函數(shù)的擴(kuò)展：?

主要就是箭頭函數(shù)。ES6允許使用箭頭“=>”定義函數(shù)。例如：原本的函數(shù)有兩種寫(xiě)法：

function fn1(x，y){ return x+y；?}

第二種方式：賦值聲明函數(shù)。var fn2 = function(x,y) {return x+y；}

第三種方式：var fn3 = (x,y) => x+y。箭頭函數(shù)。

箭頭函數(shù)也有幾種常用方式：比如無(wú)參的情況：var fn4 = () => 10。

函數(shù)體有變量的情況：下圖左。返回值是對(duì)象的情況：下圖右。

?emmmmm，怎么說(shuō)，感覺(jué)有點(diǎn)無(wú)聊，不知道會(huì)不會(huì)用到就在這不停的寫(xiě)。我的建議是停一下吧，先把前面的都搞懂在繼續(xù)往下。不然，在往下學(xué)都是不會(huì)的，沒(méi)意思。至少，現(xiàn)在停一下。把前面的都融匯一下，然后再往后看，應(yīng)該或許就會(huì)簡(jiǎn)單很多。歐克，實(shí)操起來(lái)。

發(fā)現(xiàn)問(wèn)題（致命節(jié)奏）：

一個(gè)很致命的問(wèn)題，通過(guò)實(shí)操的時(shí)候發(fā)現(xiàn)，雖然把課堂筆記都記下來(lái)了。但是，實(shí)操的時(shí)候，出現(xiàn)了各種各樣的問(wèn)題，而且，還不知道是什么原因?qū)е?，說(shuō)明，基礎(chǔ)還是比較差，或者說(shuō)，這個(gè)課并沒(méi)有讓你的基礎(chǔ)好起來(lái)。比如說(shuō)，var和let的區(qū)別用法是什么，它們之間的內(nèi)存變化又是什么。這些，你都不太清除，這就是我現(xiàn)在遇到的問(wèn)題。

需要停一下，找到問(wèn)題。需要視頻之外的練習(xí)！而為什么我的java學(xué)習(xí)可以直接看視頻，因?yàn)閖ava學(xué)習(xí)，基本上的原理我都懂了，所以可以直接看視頻，是一種深入理解。但是，現(xiàn)在，前端的學(xué)習(xí)完全是從0到有。一點(diǎn)基礎(chǔ)都沒(méi)有，只看視頻的實(shí)操，真的一點(diǎn)用都沒(méi)有。

你需要結(jié)合資源和視頻來(lái)學(xué)習(xí)。需要去找一下配套的資料。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-615747.html

到了這里，關(guān)于JS學(xué)習(xí)之ES6的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！