JavaScript ES6 帶來了新的語法和新的強大功能钓觉，使您的代碼更現(xiàn)代，更易讀荡灾。它允許您編寫更少的代碼并執(zhí)行更多操作。 ES6 向我們介紹了許多強大的功能批幌，如箭頭函數(shù)，模板字符串荧缘，對象結(jié)構(gòu)，模塊等拦宣，讓我們來看看。
const and let
const 是 ES6 中用于聲明變量的新關(guān)鍵字鸵隧。 const 比 var 更強大。使用后豆瘫，無法重新分配變量。換句話說外驱，它是一個不可變的變量，除非它與對象一起使用昵宇。
這對于定位選擇器非常有用磅崭。例如，當(dāng)我們有一個觸發(fā)事件的按鈕時瓦哎，或者當(dāng)您想在 JavaScript 中選擇 HTML 元素時砸喻，請使用 const 而不是 var。這是因為 var 會被提升杭煎，當(dāng)不想重新分配變量時恩够，最好使用 const。
// ES5
var MyBtn = document.getElementId('mybtn');
// ES6
const MyBtn = document.getElementById('mybtn');
在上面的代碼中羡铲，const 不會更改蜂桶，也不能重新分配。如果您嘗試為其賦予新值也切，則會返回錯誤扑媚。
let name = "Said";
name = "Rick";
console.log(name); // Rick
let 可以重新分配并獲得新的價值腰湾。它創(chuàng)建了一個可變變量。
let 與 const 相同疆股，因為兩者都是塊級作用域费坊，這意味著該變量僅在其塊級范圍內(nèi)可用。
箭頭函數(shù)
箭頭函數(shù)非常棒旬痹，使您的代碼更具可讀性附井，更具結(jié)構(gòu)性，并且看起來像現(xiàn)代代碼两残，而不是使用這個：
// ES5
function myFunc(name) {
return 'Hello ' + name;
}
console.log(myFunc('said')); // Hello said
而使用 ES6 的寫法：
// ES6 Arrow function
const myFunc = name => {
return `Hi ${name}`;
}
console.log(myFunc('Said')); // Hi Said
// 或者不要 return 關(guān)鍵字
const myFunc = name => `Hi ${name}`;
console.log(myFunc('Said'));// Hi Said
如您所見永毅，箭頭功能似乎更具可讀性和清潔性！您將不再需要使用舊語法人弓。
此外沼死，您可以使用箭頭功能與 map，filter 和 reduce 內(nèi)置函數(shù)崔赌。
const myArray = ['tony', 'Sara', 'Said', 5];
// ES5
let Arr1 = myArray.map(function(item) {
return item;
});
console.log(Arr1);// ["tony", "Sara", "Said", 5]
// ES6
let Arr2 = myArray.map(item => item);
console.log(Arr2);// ["tony", "Sara", "Said", 5]
帶箭頭的 map 函數(shù)看起來比 ES5 中的 map 更清晰可讀意蛀。使用 ES6，您可以編寫更短的代碼健芭，你也可以用相同的方法使用 reduce 和 filter县钥。
模板字符串
模板字符串非常酷吟榴，當(dāng)我們想在字符串中使用變量時我們不必使用加號（+）運算符來連接字符串魁蒜。
舊語法：
// ES5
function myFunc1(name, age) {
return 'Hi ' + name + ' Your age is ' + age + ' year old';
}
console.log(myFunc('Said', 22)); // Hi Said, Your age is 22 year old
用 ES6 新語法：
// ES6
const myFunc = (name, age) => {
return `Hi ${name}, Your age is ${age} year old`;
}
// or
const myFunc = (name, age) => `Hi ${name}, Your age is ${age} year old`;
console.log(myFunc1('Said', 22)); // Hi Said, Your age is 22 year old
很簡單！這是舊語法和 ES6 之間的巨大差異吩翻。使用字符串時兜看，ES6 中的文字字符串看起來比 ES5 更有條理，結(jié)構(gòu)更好狭瞎。
默認參數(shù)
當(dāng)您忘記編寫參數(shù)時熊锭，它不會返回未定義的錯誤，因為該參數(shù)已在默認值中定義碗殷。因此，當(dāng)您使用遺漏參數(shù)運行函數(shù)時代乃，它將采用默認參數(shù)的值搁吓，并且不會返回錯誤！
看看這個例子：
const myFunc = (name, age) => `Hi ${name}, Your age is ${age} year old`;
console.log(myFunc('Said')); // Hi Said, Your age is undefined year old
上面的函數(shù)返回 undefined堕仔，因為我們忘了給它第二個參數(shù) age摩骨。
但是如果我們使用默認參數(shù)，當(dāng)我們忘記分配參數(shù)時,它將使用它的默認值滑频，將不會返回 undefined唤冈！
const myFunc = (name, age = 22) => `Hi ${name}, Your age is ${age} year old`;
console.log(myFunc('Said')); // Hi Said, Your age is 22 year old
如您所見你虹，即使我們錯過了第二個參數(shù)彤避，該函數(shù)也會返回一個值。現(xiàn)在使用默認參數(shù)我們可以提前處理錯誤董饰。
數(shù)組和對象解構(gòu)
解構(gòu)使得將數(shù)組或?qū)ο蟮闹捣峙浣o新變量更容易卒暂。
舊語法：
const contacts = {
name: 'said',
famillyName: 'Hayani',
age: 22
};
let name = contacts.name;
let famillyName = contacts.famillyName;
let myAge = contacts.age;
console.log(name); // said
console.log(famillyName); // Hayani
console.log(myAge); // 22
ES6 新語法：
const contacts = {
name: 'said',
famillyName: 'Hayani',
age: 22
};
let {name, famillyName, age} = contacts;
console.log(name); // said
console.log(famillyName); // Hayani
console.log(age); // 22
使用 ES5也祠，我們必須為每個變量分配每個值近速。使用 ES6，我們只需將我們的值放在大括號中以獲取對象的任何屬性奖亚。
注意：如果指定的變量與屬性名稱不同昔字，則返回 undefined干厚。例如螃宙，如果屬性的名稱是 name所坯，我們將其分配給 username變量芹助，它將返回undefined。
我們總是必須將變量命名為與屬性名稱相同无蜂。但是如果我們想要重命名變量蒙谓，我們可以使用冒號：代替。
const contacts = {
name: 'said',
famillyName: 'Hayani',
age: 22
};
let {name:otherName, famillyName, myAge} = contacts;
console.log(otherName);// said
對于數(shù)組酣倾，我們使用與對象相同的語法躁锡。我們只需用方括號替換花括號置侍。
const Arr = ['Lionel', 'John', 'Layla', 20];
let [value1, value2, value3] = Arr;
console.log(value1); // Lionel
console.log(value2); // John
console.log(value3); // Layla
Import and export
在 JavaScript 應(yīng)用程序中使用 import 和 export 使其更強大蜡坊。它們允許您創(chuàng)建單獨的可重用組件。
如果您熟悉任何 JavaScript MVC 框架抬伺，您將看到他們使用 import 和 export 出來在大多數(shù)時間處理組件灾梦。那么它們?nèi)绾握嬲鹱饔媚兀?/p>
很簡單！ export 允許您導(dǎo)出要在另一個 JavaScript 組件中使用的模塊能岩。我們使用 import 導(dǎo)入該模塊以在我們的組件中使用它萧福。
例如，我們有兩個文件钥屈。第一個名為 detailComponent.js坝辫，第二個名為 homeComponent.js。
在 detailComponent.js 中竭业，我們將導(dǎo)出 detail 函數(shù)未辆。
// ES6
export default function detail(name, age) {
return `Hello ${name}, your age is ${age} year old!`;
}
如果我們想在 homeComponent.js 中使用此函數(shù)锯玛，我們將只使用 import
import { detail } from './detailComponent';
console.log(detail('Said', 20)); // Hello Said, your age is 20 year old!
如果我們要導(dǎo)入多個模塊，我們只需將它們放在大括號內(nèi)炕桨。
import {detail, userProfile, getPosts} from './detailComponent';
console.log(detail('Said', 20));
console.log(userProfile);
console.log(getPosts));
Promise
Promise 是 ES6 的新功能肯腕。這是編寫異步代碼的方法实撒。例如知态，當(dāng)我們想要從 API 獲取數(shù)據(jù)時立叛，可以使用它，或者當(dāng)我們有一個需要時間執(zhí)行的函數(shù)時其做。Promise 使解決問題更容易妖泄，所以讓我們創(chuàng)建我們的第一個 Promise艘策！
const myPromise = () => {
return new Promise((resolve, reject) => {
resolve('Hi the Promise execute successfully');
})
}
console.log(myPromise()); // Promise {<resolved>: "Hi the Promise execute successfully"}
如果您登錄控制臺，它將返回一個 Promise却汉。因此荷并，如果我們想在獲取數(shù)據(jù)后執(zhí)行一個函數(shù)，我們將使用 Promise既穆。 Promise有兩個參數(shù)： resolve 和 reject 來處理預(yù)期的錯誤雀鹃。
注意：fetch函數(shù)返回一個Promise本身！
const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{
return fetch(url);
}
getData(url).
then(data=> data.json()).
then(result=> console.log(result));
現(xiàn)在囊颅，如果您登錄控制臺踢代，它將返回一個數(shù)據(jù)數(shù)組嗅骄。
Rest 參數(shù)和 Spread 運算符
Rest 參數(shù)用于獲取數(shù)組的參數(shù)，并返回一個新數(shù)組慕爬。
const arr = ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?'];
// 通過解構(gòu)獲取值
const [val1, val2, val3, ...rest] = arr;
const Func = (restOfArr) => {
return restOfArr.filter(item => {return item}).join(" ");
}
console.log(Func(rest)); // Hi Said How are you?
const arr = ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?'];
const Func = (...anArray) => anArray;
console.log(Func(arr)); // ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?']
spread 運算符與 rest 參數(shù)具有相同的語法医窿，但是 spread 運算符采用數(shù)組本身而不僅僅是參數(shù)姥卢。我們可以使用 Spread 參數(shù)來獲取數(shù)組的值渣聚，而不是使用 for 循環(huán)或任何其他方法。
const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?'];
const Func=(...anArray)=>{
return anArray;
}
console.log(Func(arr)); //["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"
Class
類是面向?qū)ο缶幊蹋∣OP）的核心括眠。它們使您的代碼更安全和封裝倍权。使用類可以為代碼提供一個很好的結(jié)構(gòu)并使其保持面向?qū)ο蟆?/p>
class myClass {
constructor() {
}
}
要創(chuàng)建一個類，請使用 class 關(guān)鍵字当船，后跟帶有兩個大括號的類的名稱。
class myClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const user = new myClass('Said', 22);
console.log(user.name); // Said
cosnole.log(user.age); // 22
現(xiàn)在我們可以使用 new 關(guān)鍵字訪問類方法和屬性苍息。
class myClass{
constructor(name,age){
this.name=name;
this.age=age;
}
}
const Home= new myClass("said",20);
console.log(Home.name)// said
要從其他類繼承壹置，請使用 extends 關(guān)鍵字，后跟要繼承的類的名稱盖喷。
class myClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
cosnole.log(`Hi ${this.name} your age is ${this.age} `);
}
}
// 繼承 myClass 方法和屬性
class UserProfile extends myClass {
username() {
console.log(this.name);
}
}
const profile = new UserProfile('Said', 22);
profile.sayHello();// Hi Said your age is 22;
profile.username();// Said
