[譯]JavaScript ES6 讓我們寫得少，做得多
JavaScript ES6 帶來了新的語法和新的強大功能，使您的程式碼更現代，更易讀。它允許您編寫更少的程式碼並執行更多操作。 ES6 向我們介紹了許多強大的功能，如箭頭函式，模板字串，物件結構，模組等，讓我們來看看。
const and let
const 是 ES6 中用於宣告變數的新關鍵字。 const比 var 更強大。使用後，無法重新分配變數。換句話說，它是一個不可變的變數，除非它與物件一起使用。
這對於定位選擇器非常有用。例如，當我們有一個觸發事件的按鈕時，或者當您想在 JavaScript 中選擇 HTML 元素時，請使用 const 而不是 var。這是因為 var 會被提升，當不想重新分配變數時，最好使用 const。
// ES5
var MyBtn = document.getElementId('mybtn');
// ES6
const MyBtn = document.getElementById('mybtn');
複製程式碼
在上面的程式碼中，const 不會更改，也不能重新分配。如果您嘗試為其賦予新值，則會返回錯誤。
let name = "Said"; name = "Rick"; console.log(name); // Rick 複製程式碼
let 可以重新分配並獲得新的價值。它建立了一個可變變數。
let 與 const 相同，因為兩者都是塊級作用域，這意味著該變數僅在其塊級範圍內可用。
箭頭函式
箭頭函式非常棒，使您的程式碼更具可讀性，更具結構性，並且看起來像現代程式碼，而不是使用這個：
// 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 關鍵字
const myFunc = name => `Hi ${name}`;
console.log(myFunc('Said'));// Hi Said
複製程式碼
如您所見，箭頭功能似乎更具可讀性和清潔性！您將不再需要使用舊語法。
此外，您可以使用箭頭功能與 map，filter 和 reduce 內建函式。
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 函式看起來比 ES5 中的 map 更清晰可讀。使用 ES6，您可以編寫更短的程式碼，你也可以用相同的方法使用reduce 和 filter。
模板字串
模板字串非常酷，當我們想在字串中使用變數時我們不必使用加號（+）運算子來連線字串。
舊語法：
// 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 更有條理，結構更好。
預設引數
當您忘記編寫引數時，它不會返回未定義的錯誤，因為該引數已在預設值中定義。因此，當您使用遺漏引數執行函式時，它將採用預設引數的值，並且不會返回錯誤！
看看這個例子：
const myFunc = (name, age) => `Hi ${name}, Your age is ${age} year old`;
console.log(myFunc('Said')); // Hi Said, Your age is undefined year old
複製程式碼
上面的函式返回 undefined，因為我們忘了給它第二個引數 age。
但是如果我們使用預設引數，當我們忘記分配引數時,它將使用它的預設值，將不會返回 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
複製程式碼
如您所見，即使我們錯過了第二個引數，該函式也會返回一個值。現在使用預設引數我們可以提前處理錯誤。
陣列和物件解構
解構使得將陣列或物件的值分配給新變數更容易。
舊語法：
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
複製程式碼
對於陣列，我們使用與物件相同的語法。我們只需用方括號替換花括號。
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 應用程式中使用 import 和 export 使其更強大。它們允許您建立單獨的可重用元件。
如果您熟悉任何 JavaScript MVC 框架，您將看到他們使用 import 和 export 出來在大多數時間處理元件。那麼它們如何真正起作用呢？
很簡單！ export 允許您匯出要在另一個 JavaScript 元件中使用的模組。我們使用 import 匯入該模組以在我們的元件中使用它。
例如，我們有兩個檔案。第一個名為 detailComponent.js，第二個名為 homeComponent.js。
在 detailComponent.js 中，我們將匯出 detail 函式。
// ES6
export default function detail(name, age) {
return `Hello ${name}, your age is ${age} year old!`;
}
複製程式碼
如果我們想在 homeComponent.js 中使用此函式，我們將只使用 import
import { detail } from './detailComponent';
console.log(detail('Said', 20)); // Hello Said, your age is 20 year old!
複製程式碼
如果我們要匯入多個模組，我們只需將它們放在大括號內。
import {detail, userProfile, getPosts} from './detailComponent';
console.log(detail('Said', 20));
console.log(userProfile);
console.log(getPosts));
複製程式碼
Promis
Promise 是 ES6 的新功能。這是編寫非同步程式碼的方法。例如，當我們想要從 API 獲取資料時，可以使用它，或者當我們有一個需要時間執行的函式時。Promise 使解決問題更容易，所以讓我們建立我們的第一個 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。因此，如果我們想在獲取資料後執行一個函式，我們將使用 Promise。 Promise有兩個引數： resolve 和 reject 來處理預期的錯誤。
注意：fetch函式返回一個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));
複製程式碼
現在，如果您登入控制檯，它將返回一個數據陣列。
Rest 引數和 Spread 運算子
Rest 引數用於獲取陣列的引數，並返回一個新陣列。
const arr = ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?'];
// 通過解構獲取值
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 引數具有相同的語法，但是 spread 運算符采用陣列本身而不僅僅是引數。我們可以使用 Spread 引數來獲取陣列的值，而不是使用 for 迴圈或任何其他方法。
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
類是面向物件程式設計（OOP）的核心。它們使您的程式碼更安全和封裝。使用類可以為程式碼提供一個很好的結構並使其保持面向物件。
class myClass {
constructor() {
}
}
複製程式碼
要建立一個類，請使用 class 關鍵字，後跟帶有兩個大括號的類的名稱。
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
複製程式碼
現在我們可以使用 new 關鍵字訪問類方法和屬性。
class myClass{
constructor(name,age){
this.name=name;
this.age=age;
}
}
const Home= new myClass("said",20);
console.log(Home.name)//said
複製程式碼
要從其他類繼承，請使用 extends 關鍵字，後跟要繼承的類的名稱。
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
複製程式碼
原文：ofollow,noindex">medium.freecodecamp.org/write-less-…