今天就跟大家聊聊有關(guān)JavaScript ES6的新特性，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

十多年的掇刀網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整掇刀建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“掇刀網(wǎng)站設(shè)計(jì)”,“掇刀網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

ES6， 全稱(chēng) ECMAScript 6.0 ，是 JavaScript 的下一個(gè)版本標(biāo)準(zhǔn)，2015.06 發(fā)版。ES6 主要是為了解決 ES5 的先天不足，比如 JavaScript 里并沒(méi)有類(lèi)的概念，但是目前瀏覽器的 JavaScript 是 ES5 版本，大多數(shù)高版本的瀏覽器也支持 ES6，不過(guò)只實(shí)現(xiàn)了 ES6 的部分特性和功能。

JavaScript ES6 添加了一系列新的語(yǔ)言特性，其中一些特性比其它更具有開(kāi)創(chuàng)性以及更廣的可用性。比如像 ES6 類(lèi) 這樣的特性，雖然新奇，但其實(shí)僅僅是在 JavaScript 中創(chuàng)建類(lèi)的已有方法之上的一種語(yǔ)法糖。而像生成器（generator）這樣的功能，雖然非常強(qiáng)大，但卻是為了針對(duì)性的任務(wù)所保留的。

從在過(guò)去的12個(gè)月里所從事的不同 JavaScript 相關(guān)項(xiàng)目中，我發(fā)現(xiàn)有 5 個(gè) ES6 特性是不可或缺的，因?yàn)樗鼈冋嬲?jiǎn)化了 JavaScript 普通任務(wù)的完成方式。

1. 箭頭函數(shù)（Arrow Functions）
2. Promises
3. 異步函數(shù)（Async Functions）
4. 解構(gòu)（Destructuring）
5. 默認(rèn)和剩余參數(shù)（Default and Rest Parameters）

1) JavaScript 箭頭函數(shù)

在 ES6 JavaScript 中，我最喜歡的新增特性之一并不是一個(gè)全新特性，而是一個(gè)我每次使用都能讓我微笑的新語(yǔ)法。我說(shuō)的就是箭頭函數(shù)，它提供了一種極致優(yōu)雅和簡(jiǎn)潔的方式來(lái)定義匿名函數(shù)。

簡(jiǎn)而言之，箭頭函數(shù)就是丟掉了關(guān)鍵字 function，然后用一個(gè)箭頭 => 來(lái)分離一個(gè)匿名函數(shù)的參數(shù)部分和函數(shù)體：

(x, y) => x * y;

這相當(dāng)于:

function(x, y){
    return x * y;
}

或者:

(x, y) => {
    var factor = 5;
    var growth = (x-y) * factor;
}

完全等價(jià)于:

function(x, y){
    var factor = 5;
    var growth = (x-y) * factor;
}

在使用傳統(tǒng)的匿名函數(shù)時(shí)，箭頭函數(shù)還消除了一個(gè)關(guān)鍵的錯(cuò)誤源，即函數(shù)內(nèi)的 this 對(duì)象的值。使用箭頭函數(shù)，this 是基于詞法綁定，這僅僅是意味著它的值被綁定到父級(jí)作用域的一種奇特的方式，并且永遠(yuǎn)不會(huì)改變。如果一個(gè)箭頭函數(shù)定義在一個(gè)自定義對(duì)象 countup 中，this 值毫無(wú)疑問(wèn)地指向 countup。比如：

var countup = {
    counter: 15,

    start:function(){
        window.addEventListener('click', () => {
            alert(this.counter) // correctly alerts 15 due to lexical binding of this
        })
    }
};

countup.start();

對(duì)比傳統(tǒng)匿名函數(shù)，this 的值在哪變化取決于它被定義的上下文環(huán)境。當(dāng)在上面的例子中嘗試引用 this.counter，結(jié)果將返回 undefined，這種行為可能會(huì)把很多不熟悉動(dòng)態(tài)綁定的復(fù)雜性的人搞糊涂。使用箭頭函數(shù)，this 的值總是可預(yù)測(cè)并且容易推斷的。

對(duì)于箭頭函數(shù)的詳細(xì)講解， 請(qǐng)看 “Overview of JavaScript Arrow Functions“.

2) 默認(rèn)和剩余參數(shù)（Default and Rest Parameters）

最后，我最想提出的ES6的兩個(gè)特性是處理函數(shù)參數(shù)。幾乎我們?cè)贘avaScript中創(chuàng)建的每個(gè)函數(shù)都接受用戶(hù)數(shù)據(jù)，所以這兩個(gè)特性在一個(gè)月中不止一次地派上用場(chǎng)。

默認(rèn)參數(shù)（Default Parameters）

我們都使用過(guò)一下模式來(lái)創(chuàng)建具有默認(rèn)值的參數(shù)：

function getarea(w,h){
  var w = w || 10
  var h = h || 15
  return w * h
}

有了ES6對(duì)默認(rèn)參數(shù)的支持，顯式定義的參數(shù)值的日子已經(jīng)結(jié)束：

function getarea(w=10, h=15){
  return w * h
}
getarea(5) // returns 75

關(guān)于 ES6 默認(rèn)參數(shù)的更多詳情 在這.

剩余參數(shù)（Rest Parameters）

ES6中的 Rest Parameters 使得將函數(shù)參數(shù)轉(zhuǎn)換成數(shù)組的操作變得簡(jiǎn)單。

function addit(...theNumbers){
  // get the sum of the array elements
    return theNumbers.reduce((prevnum, curnum) => prevnum + curnum, 0) 
}

addit(1,2,3,4) // returns 10

通過(guò)在命名參數(shù)前添加3個(gè)點(diǎn) ...，在該位置和之后輸入到函數(shù)中的參數(shù)將自動(dòng)轉(zhuǎn)換為數(shù)組。

沒(méi)有 Rest Parameters, 我們不得不做一些復(fù)雜的操作比如 手動(dòng)將參數(shù)轉(zhuǎn)換為數(shù)組 ：

function addit(theNumbers){
    // force arguments object into array
    var numArray = Array.prototype.slice.call(arguments) 
    return numArray.reduce((prevnum, curnum) => prevnum + curnum, 0)
}

addit(1,2,3,4) // returns 10

Rest parameters 只能應(yīng)用于函數(shù)的參數(shù)的一個(gè)子集，就像下面這樣，它只會(huì)將參數(shù)從第二個(gè)開(kāi)始轉(zhuǎn)換為數(shù)組：

function f1(date, ...lucknumbers){
    return 'The Lucky Numbers for ' + date + ' are: ' + lucknumbers.join(', ')
}

alert( f1('2017/09/29', 3, 32, 43, 52) ) // alerts "The Lucky Numbers for 2017/09/29 are 3,32,43,52"

3) JavaScript Promises

JavaScript ES6 Promises 使異步任務(wù)的處理方式變成線(xiàn)性， 這是大多數(shù)現(xiàn)代Web應(yīng)用程序中的一項(xiàng)任務(wù)。 而不是依靠回調(diào)函數(shù) —— 通過(guò)JavaScript框架（如jQuery）普及。JavaScript Promises 使用一個(gè)中心直觀的機(jī)制來(lái)跟蹤和響應(yīng)異步事件。它不僅使調(diào)試異步代碼變得更容易，而且使得編寫(xiě)它也是一種樂(lè)趣。

所有 JavaScript Promise 都是通過(guò) Promise() 構(gòu)造函數(shù)開(kāi)始和結(jié)束:

const mypromise = new Promise(function(resolve, reject){
 // 在這編寫(xiě)異步代碼
 // 調(diào)用 resolve() 來(lái)表示任務(wù)成功完成
 // 調(diào)用 reject() 來(lái)表示任務(wù)失敗
})

在內(nèi)部使用 resolve() 和 reject() 方法，當(dāng)一個(gè) Promise 被完成或拒絕時(shí)，我們可以分別向一個(gè) Promise 對(duì)象發(fā)出信號(hào)。 then() 與 catch() 方法隨后可以被調(diào)用，用以處理完成或拒絕 Promise 后的工作。

我用下面一個(gè)被注入 XMLHttpRequest 函數(shù)的 Promise 的變種，來(lái)一個(gè)接一個(gè)的檢索外部文件內(nèi)容：

function getasync(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.onload = () => resolve(xhr.responseText)
        xhr.onerror = () => reject(xhr.statusText)
        xhr.send()
    })
}

getasync('test.txt').then((msg) => {
    console.log(msg) // echos contents of text.txt
    return getasync('test2.txt')
}).then((msg) => {
    console.log(msg) // echos contents of text2.txt
    return getasync('test3.txt')
}).then((msg) => {
    console.log(msg) // echos contents of text3.txt
})

要掌握 JavaScript Promises 的關(guān)鍵點(diǎn)，例如 Promise 鏈和并行執(zhí)行 Promise，請(qǐng)閱讀 “Beginner’s Guide to Promises“.

4) JavaScript 異步函數(shù)

除了 JavaScript Promise，異步函數(shù)進(jìn)一步重寫(xiě)了傳統(tǒng)的異步代碼結(jié)構(gòu)，使其更具可讀性。每當(dāng)我向客戶(hù)展示帶有async 編程功能的代碼時(shí)，第一個(gè)反應(yīng)總是令人驚訝，隨之而來(lái)的是了解它是如何工作的好奇心。

一個(gè)異步函數(shù)由兩部分構(gòu)成:

1) 一個(gè)以 async 為前綴的常規(guī)函數(shù)

async function fetchdata(url){
    // Do something
    // Always returns a promise
}

2) 在異步函數(shù)（Async function）內(nèi)，使用 await 關(guān)鍵字調(diào)用異步操作函數(shù)

一個(gè)例子勝過(guò)千言萬(wàn)語(yǔ)。下面是基于上面示例重寫(xiě)的 Promise，以便使用 Async functions代替：

function getasync(url) { // same as original function
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.onload = () => resolve(xhr.responseText)
        xhr.onerror = () => reject(xhr.statusText)
        xhr.send()
    })
}

async function fetchdata(){ // main Async function
    var text1 = await getasync('test.txt')
    console.log(text1)
    var text2 = await getasync('test2.txt')
    console.log(text2)
    var text3 = await getasync('test3.txt')
    console.log(text3)
    return "Finished"
}

fetchdata().then((msg) =>{
    console.log(msg) // logs "finished"
})

上面的例子運(yùn)行時(shí)會(huì)輸出“test.txt”，“test2.txt”，“test3.txt”，最后是“Finished”。

如你所見(jiàn)，在異步函數(shù)中，我們把異步函數(shù) getasync() 當(dāng)作是同步函數(shù)調(diào)用 – 沒(méi)有 then() 方法或回調(diào)函數(shù)通知進(jìn)行下一步。無(wú)論何時(shí)遇到關(guān)鍵字 await，執(zhí)行都會(huì)暫停，直到 getasync() 解決，然后再轉(zhuǎn)到異步函數(shù)中的下一行。結(jié)果與純粹的基于 Promise，使用一串 then 方法的方式一樣。

要掌握異步函數(shù)，包括如何 await 并行執(zhí)行函數(shù)，請(qǐng)閱讀 “Introduction to JavaScript Async Functions- Promises simplified”

5) JavaScript 解構(gòu)

除了箭頭函數(shù)，這是我每天使用最多的 ES6 功能。ES6 解構(gòu)并非一個(gè)新功能，而是一個(gè)新的賦值語(yǔ)法，可以讓您快速解壓縮對(duì)象屬性和數(shù)組中的值，并將它們分配給各個(gè)變量。

var profile = {name:'George', age:39, hobby:'Tennis'}
var {name, hobby} = profile // destructure profile object
console.log(name) // "George"
console.log(hobby) // "Tennis"

這里我用解構(gòu)快速提取 profile 對(duì)象的 name 和 hobby 屬性 。

使用別名，你可以使用與你正在提取值的對(duì)象屬性不同的變量名：

var profile = {name:'George', age:39, hobby:'Tennis'}
var {name:n, hobby:h} = profile // destructure profile object
console.log(n) // "George"
console.log(h) // "Tennis"

嵌套對(duì)象解構(gòu)

解構(gòu)也可以與嵌套對(duì)象一起工作，我一直使用它來(lái)快速解開(kāi)來(lái)自復(fù)雜的JSON請(qǐng)求的值：

var jsondata = {
    title: 'Top 5 JavaScript ES6 Features',
    Details: {
        date: {
            created: '2017/09/19',
            modified: '2017/09/20',
        },
        Category: 'JavaScript',
    },
    url: '/top-5-es6-features/'
};

var {title, Details: {date: {created, modified}}} = jsondata
console.log(title) // 'Top 5 JavaScript ES6 Features'
console.log(created) // '2017/09/19'
console.log(modified) // '2017/09/20'

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

數(shù)組的解構(gòu)與在對(duì)象上的工作方式類(lèi)似，除了左邊的花括號(hào)使用方括號(hào)代替：

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a, b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Dennis"

你可以跳過(guò)某些數(shù)組元素，通過(guò)使用逗號(hào)（，）：

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a,,b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Sandy"

對(duì)我而言，解構(gòu)消除了傳統(tǒng)方式提取和分配對(duì)象屬性和數(shù)組值的所有摩擦。要充分掌握ES6解構(gòu)的復(fù)雜性和潛力，請(qǐng)閱讀”Getting to Grips with ES6: Destructuring“.

看完上述內(nèi)容，你們對(duì)JavaScript ES6的新特性有進(jìn)一步的了解嗎？如果還想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀。

網(wǎng)站欄目：JavaScriptES6的新特性
標(biāo)題URL：http://www.chinadenli.net/article46/gjcpeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、ChatGPT、服務(wù)器托管、網(wǎng)站建設(shè)、微信小程序、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)