Javascript ES語法詳解

Javascript ES(ECMAScript)是Javascript的標準化規范，目前最新的版本是ES10。熟練掌握Javascript ES語法是Web前端開發的基礎。

變量聲明

Javascript ES中使用var、let和const關鍵字來聲明變量。

var a = 1;
let b = 2;
const c = 'hello';

var聲明的變量可以重復聲明賦值，但是在函數作用域內都可以訪問到。let和const聲明的變量只可以在塊級作用域內訪問，且不能重復聲明。

箭頭函數

ES6新加入的箭頭函數，簡化了函數的書寫，使得函數表達式更加簡潔。

//普通函數
function add(x, y){
return x + y;
}
//箭頭函數
const add = (x, y) =>x + y;

箭頭函數可以省略花括號和return關鍵字，但是只適用于單行函數體。

模板字符串

模板字符串利用反引號來創建字符串模板，可以在其中插入表達式、變量和函數等等。

const name = 'Tom';
const str = `My name is ${name}.`;

使用${}來插入表達式、變量和函數等，使得字符串模板更加靈活。

解構賦值

可以使用解構賦值語法從數組或對象中取出值并賦值給變量。

const arr = [1, 2, 3];
const [a, b, c] = arr;
const obj = {name: 'Tom', age: 18};
const {name, age} = obj;

從數組中取出的變量名可以隨意命名，而從對象中取出的變量名必須和對象的key一致。

類

ES6中引入了類的概念，使得面向對象編程更加簡潔易懂。

class Person {
constructor(name, age){
this.name = name;
this.age = age;
}
sayHi(){
console.log(`Hi, my name is ${this.name}.`);
}
}
const person1 = new Person('Tom', 18);
person1.sayHi();

我們可以使用class關鍵字來定義類，可以使用constructor來初始化對象的屬性，可以使用類的方法來操作對象。

Promise

Promise是ES6中異步編程的主流方案之一，可以有效地避免回調地獄的問題。

const promise = new Promise((resolve, reject) =>{
//異步操作
setTimeout(() =>{
const num = Math.random();
if(num >0.5){
resolve(num);
} else {
reject('error');
}
}, 1000);
});
promise.then(num =>{
console.log(num);
}).catch(error =>{
console.log(error);
});

Promise中我們可以使用resolve和reject來返回異步操作的結果，在then方法中處理resolve返回的結果，在catch方法中處理reject返回的結果。

總結

Javascript ES語法是Web前端開發的基礎，熟練掌握各種關鍵字、數據類型、語法結構和DOM API等內容，可以使得我們的Javascript代碼更加高效、簡潔和規范。