溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“ES6核心知識點有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“ES6核心知識點有哪些”文章能幫助大家解決問題。
let與const的用途與var類似，都是用來聲明變量的，但在實際運用中他倆都有各自的特殊用途。
因為ES5只有全局作用域和函數作用域，沒有塊級作用域，所以使用過程中會帶來不合理的效果，比如下代碼：
var name = 'apple'
while (true) {
var name = 'banana'
console.log(name) //banana
break
}
console.log(name) //banana
以上代碼中，兩次都輸出了banana，是不是內層的變量覆蓋了外層的變量了？而let則實際上為JavaScript新增了塊級作用域。用它所聲明的變量，只在let命令所在的代碼塊內有效。
let name = 'apple'
while (true) {
let name = 'banana'
console.log(name) //banana
break
}
console.log(name) //apple
const也用來聲明變量，但是聲明的是常量。一旦聲明，常量的值就不能改變。
const PI = Math.PI
PI = 12; //這里會報錯
const有一個很好的應用場景，就是當我們引用第三方庫的時聲明的變量，用const來聲明可以避免未來不小心重命名而導致出現bug：
const monent = require('moment')
ES6中新增的箭頭操作符=> 簡化了函數的書寫。操作符左邊為輸入的參數，而右邊則是進行的操作以及返回的值，箭頭函數是ES6 最最常用的一個新特性。
定義一個箭頭函數很簡單，基本語法是：
([param] [, param]) => {
statements
}
param => expression
param 是參數，根據參數個數不同，分這幾種情況：
() => { ... } // 零個參數用 () 表示；
x => { ... } // 一個參數可以省略 ()；
(x, y) => { ... } // 多參數不能省略 ()；
箭頭函數還有個厲害的功能，解決了javascript語言中關鍵字this指向的頭痛問題。箭頭函數沒有自己內部的 this 指針。在箭頭函數中， this 指針是繼承于其所在的作用域。也就是說箭頭函數內部的this是函數外層的this。看下面的代碼：
var a = 1;
var test = {
a: 100,
c: function() {
console.log(this.a);
},
d: () => {
console.log(this.a);
}
}
test.c(); //100
test.d(); //1
ES6中允許使用反pie號 ` （一般在鍵盤tab鍵上方）來創建字符串，此種方法創建的字符串里面可以包含由美元符號加花括號包裹的變量${vraible}。
$("#result").append(`
<p>歡迎 <b>${json.user}</b></p>
<p>您目前有積分：${json.fen}</p>
`);
我們不需要在輸出多行字符串時使用rn和+號來將字符串拼接，而ES6使用反pie號就可以讓模板字符串中所有的空格、新行、縮進，都原樣輸出在生成的字符串中。
我們在調用自定義函數時，怕忘了傳參數，如調用animal()，傳統的做法就是加上這一句type = type || 'cat' 來指定默認值。
function animal(type){
type = type || 'cat'
console.log(type)
}
animal()
而使用ES6可以這么寫：
function animal(type = 'cat'){
console.log(type)
}
animal()
到這里是不是有種寫php的感覺了。
ES6引入了Class類的概念，這樣寫的javascript代碼更像面向對象編程的語法，如果你會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定義了一個“類”，可以看到里面有一個constructor方法，這就是構造方法，而this關鍵字則代表實例對象。簡單地說，constructor內定義的方法和屬性是實例對象自己的，而constructor外定義的方法和屬性則是所有實例對象可以共享的。
Class之間可以通過extends關鍵字實現繼承，這比ES5的通過修改原型鏈實現繼承，要清晰和方便很多。上面定義了一個Boy類，該類通過extends關鍵字，繼承了Human類的所有屬性和方法。
值得一提的是，ES6的繼承機制，實質是先創造父類的實例對象this（所以必須先調用super方法），然后再用子類的構造函數修改this。子類必須在constructor方法中調用super方法，否則新建實例時會報錯。這是因為子類沒有自己的this對象，而是繼承父類的this對象，然后對其進行加工。如果不調用super方法，子類就得不到this對象。
ES6允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（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"}
反過來可以這么寫：
let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many) //animal 2
關于“ES6核心知識點有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
