ES6核心知識(shí)點(diǎn)有哪些

這篇文章主要介紹“ES6核心知識(shí)點(diǎn)有哪些”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“ES6核心知識(shí)點(diǎn)有哪些”文章能幫助大家解決問(wèn)題。

1. let和const

let與const的用途與var類似，都是用來(lái)聲明變量的，但在實(shí)際運(yùn)用中他倆都有各自的特殊用途。

因?yàn)镋S5只有全局作用域和函數(shù)作用域，沒(méi)有塊級(jí)作用域，所以使用過(guò)程中會(huì)帶來(lái)不合理的效果，比如下代碼：

var name = 'apple' while (true) {    var name = 'banana'    console.log(name)  //banana    break } console.log(name)  //banana

以上代碼中，兩次都輸出了banana，是不是內(nèi)層的變量覆蓋了外層的變量了？而let則實(shí)際上為JavaScript新增了塊級(jí)作用域。用它所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。

let name = 'apple' while (true) {    let name = 'banana'    console.log(name)  //banana    break } console.log(name)  //apple

const也用來(lái)聲明變量，但是聲明的是常量。一旦聲明，常量的值就不能改變。

const PI = Math.PI PI = 12;  //這里會(huì)報(bào)錯(cuò)

const有一個(gè)很好的應(yīng)用場(chǎng)景，就是當(dāng)我們引用第三方庫(kù)的時(shí)聲明的變量，用const來(lái)聲明可以避免未來(lái)不小心重命名而導(dǎo)致出現(xiàn)bug：

const monent = require('moment')

2.箭頭函數(shù)

ES6中新增的箭頭操作符=> 簡(jiǎn)化了函數(shù)的書(shū)寫。操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值，箭頭函數(shù)是ES6 最最常用的一個(gè)新特性。

定義一個(gè)箭頭函數(shù)很簡(jiǎn)單，基本語(yǔ)法是：

([param] [, param]) => {   statements } param => expression

param 是參數(shù)，根據(jù)參數(shù)個(gè)數(shù)不同，分這幾種情況：

() => { ... } // 零個(gè)參數(shù)用 () 表示；

x => { ... } // 一個(gè)參數(shù)可以省略 ()；

(x, y) => { ... } // 多參數(shù)不能省略 ()；

箭頭函數(shù)還有個(gè)厲害的功能，解決了javascript語(yǔ)言中關(guān)鍵字this指向的頭痛問(wèn)題。箭頭函數(shù)沒(méi)有自己內(nèi)部的 this 指針。在箭頭函數(shù)中， this 指針是繼承于其所在的作用域。也就是說(shuō)箭頭函數(shù)內(nèi)部的this是函數(shù)外層的this?？聪旅娴拇a：

var a = 1; var test = {    a: 100,    c: function() {        console.log(this.a);    },    d: () => {        console.log(this.a);    } } test.c(); //100 test.d(); //1

3.模板字符串

ES6中允許使用反pie號(hào) ` （一般在鍵盤tab鍵上方）來(lái)創(chuàng)建字符串，此種方法創(chuàng)建的字符串里面可以包含由美元符號(hào)加花括號(hào)包裹的變量${vraible}。

$("#result").append(`   <p>歡迎 <b>${json.user}</b></p>   <p>您目前有積分：${json.fen}</p> `);

我們不需要在輸出多行字符串時(shí)使用rn和+號(hào)來(lái)將字符串拼接，而ES6使用反pie號(hào)就可以讓模板字符串中所有的空格、新行、縮進(jìn)，都原樣輸出在生成的字符串中。

4.函數(shù)參數(shù)默認(rèn)值

我們?cè)谡{(diào)用自定義函數(shù)時(shí)，怕忘了傳參數(shù)，如調(diào)用animal()，傳統(tǒng)的做法就是加上這一句type = type || 'cat' 來(lái)指定默認(rèn)值。

function animal(type){    type = type || 'cat'      console.log(type) } animal()

而使用ES6可以這么寫：

function animal(type = 'cat'){    console.log(type) } animal()

到這里是不是有種寫php的感覺(jué)了。

5.Class類

ES6引入了Class類的概念，這樣寫的javascript代碼更像面向?qū)ο缶幊痰恼Z(yǔ)法，如果你會(huì)PHP或Java，那下面的代碼你一看就明白了：

class Human {    constructor(name) {        this.name = name;      }     sleep() {        console.log(this.name + " is sleeping");      } } let man = new Human("Davis"); man.sleep();     //Davis is sleeping class Boy extends Human {    constructor(name, age) {        super()        this.name = name;        this.age = age;    }    info() {        console.log(this.name + 'is ' + this.age + 'years old');    } } let son = new Boy('Faker','8'); son.sleep();    // Faker is sleeping son.info();     //  Faker is 8 years old

上面代碼首先用class定義了一個(gè)“類”，可以看到里面有一個(gè)constructor方法，這就是構(gòu)造方法，而this關(guān)鍵字則代表實(shí)例對(duì)象。簡(jiǎn)單地說(shuō)，constructor內(nèi)定義的方法和屬性是實(shí)例對(duì)象自己的，而constructor外定義的方法和屬性則是所有實(shí)例對(duì)象可以共享的。

Class之間可以通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承，這比ES5的通過(guò)修改原型鏈實(shí)現(xiàn)繼承，要清晰和方便很多。上面定義了一個(gè)Boy類，該類通過(guò)extends關(guān)鍵字，繼承了Human類的所有屬性和方法。

值得一提的是，ES6的繼承機(jī)制，實(shí)質(zhì)是先創(chuàng)造父類的實(shí)例對(duì)象this（所以必須先調(diào)用super方法），然后再用子類的構(gòu)造函數(shù)修改this。子類必須在constructor方法中調(diào)用super方法，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)。這是因?yàn)樽宇悰](méi)有自己的this對(duì)象，而是繼承父類的this對(duì)象，然后對(duì)其進(jìn)行加工。如果不調(diào)用super方法，子類就得不到this對(duì)象。

6.解構(gòu)賦值

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

let cat = 'ken' let dog = 'lili' let zoo = {cat: cat, dog: dog} console.log(zoo)  //Object {cat: "ken", dog: "lili"}

上面的代碼用ES6可以這么寫：

let cat = 'ken' let dog = 'lili' let zoo = {cat, dog} console.log(zoo)  //Object {cat: "ken", dog: "lili"}

反過(guò)來(lái)可以這么寫：

let dog = {type: 'animal', many: 2} let { type, many} = dog console.log(type, many)   //animal 2

關(guān)于“ES6核心知識(shí)點(diǎn)有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。