本文為個人學習筆記整理，僅供交流參考，非專業教學資料，內容請自行甄別

---

一、let與var

??let與var是定義變量的兩種方式。一般推薦使用前者，主要是考慮到以下的這些因素：

1.1、越獄問題

{var a = 10;let b = 20;
}
console.log(a);
console.log(b);

??這段代碼的運行結果：

??a和b的作用域都應該是在大括號中的，而使用var定義的a變量，作用域超出了大括號。

1.2、變量的重復聲明

var a = 1;
var a = 2;
var a = 3;
console.log(a)

??這段代碼的運行結果，前兩次賦值的a被覆蓋了。

// 報錯
let b = 4;
let b = 5;
console.log(b)

??這段代碼的運行結果，let聲明的同一個變量不能重復賦值

1.3、變量提升問題

console.log(a);
var a = 10;

??這段代碼的運行結果，打印出的a為空：

console.log(b);
let b = 2;

??這段代碼的運行結果，報錯，因為使用let聲明的變量，在打印時還沒有進行賦值操作

二、解構

??解構分為數組解構，對象解構和方法解構

2.1、數組解構

let arr = [1,2,3];//如果需要獲取數組中的某一個元素，常規寫法
console.log(arr[0]);//解構
let [x,y,z] = arr;
console.log(x)
console.log(y)
console.log(z)

2.2、對象解構

let person = {name:"zhangsan",age:18,email:"2458677367@gmail.com"
}//獲取對象中的某個屬性，常規寫法
console.log(person.name)
console.log(person.age)
console.log(person.email)//將對象解構
let {name,age}=person;
console.log(name)
console.log(age)

2.3、方法解構

//方法解構
function test({name,age}){console.log(name)console.log(age)
}//傳入對象
test(person)

三、鏈判斷

??我定義一個這樣的對象：

let message = {body:{user:{name:'John',}}
};

??常規判空的寫法，如果對象結構層級復雜，那么判空相對也會很復雜

let result = (message && message.body && message.body.user && message.body.user.name) || "default";
console.log(result)

??es6的鏈判斷：

let result0 = message?.body?.user?.name || "default";
console.log(result0);

四、參數默認值

??假設我定義了一個方法，需要接收a和b兩個參數，但是在調用時只傳入了一個參數：

function test(a,b){// b = b || 1return a + b;
}console.log(test(1));

??會報錯，因為1需要和空值做運算。

??傳統的給參數默認值，可以是：

function test(a,b){b = b || 1return a + b;
}

??而es6規范，支持在函數的參數定義上，給予默認值：

function test1(a,b = 5){return a + b;
}console.log(test1(1));

??如果用戶傳遞了值，則按照用戶傳遞的為準：

function test1(a,b = 5){return a + b;
}console.log(test1(1,10));

??注意，默認值只能給函數中的最后一個參數設置。

五、箭頭函數

??箭頭函數就相當于JAVA中的lambda表達式，是函數式編程的體現：

//箭頭函數
//傳統做法
function print(arg){console.log(arg);
}print(2);//箭頭函數
let print1 = arg => console.log(arg);
print1(3);

六、模板字符串

??如果需要進行字符串動態拼接，傳統方式：

let arg1 = "1926";
let arg2 = "1848";
let info = "測試參數1:["+arg1+"],測試參數2:["+arg2+"]"console.log(info);

??采用es6的模板字符串，需要將""換成``，并且使用${}的方式取值。

let info1 = `測試參數1:[${arg1}],測試參數2:[${arg2}]`
console.log(info1);

七、異步操作

??在es6中，promise代表異步操作，并且封裝了異步操作的結果：

//promise
//是js中的異步操作
console.log("start")
let promise = fetch("https://jsonplaceholder.typicode.com/posts/1")
//無需等待上一步操作的結果
console.log("finish")//promise操作成功之后
promise.then(success=>{console.log("success");
});
//promise操作失敗之后
promise.catch(err=>{console.log("fail:" + err);
});

八、Async

??async也是將函數轉換為異步的一種方式，如果需要將某個函數進行異步處理，可以使用自己封裝promise的方式：

// 異步方式1
function test2(arg0){return new Promise((resolve,reject)=>{if (arg0 % 2 === 0){resolve(arg0)}else {reject("arg0不是偶數")}})
}//獲取promise正確與錯誤的結果
test2(100).then(data=>console.log(data)).catch(error=>console.log(error));

??也可以直接在function前加入async關鍵字，被async關鍵字修飾的function，返回的依舊是一個promise對象。在處理異常時，最好的方式是直接使用throw new Error關鍵字進行拋出，否則async并不知道是then還是catch接收到的異常。

//異步方式2 async
async function test3(arg0){if (arg0 % 2 === 0){return arg0}else {// return "arg0不是偶數"throw new Error("arg0不是偶數")}
}//如果使用async 出現了異常但是沒有拋出，async并不知道是then還是catch接收到的
test3(101).then(data=>console.log("then接收到" + data)).catch(error=>console.log("catch接收到" + error));

九、Await

??await是異步轉同步的一種方式。還是以之前的fetch異步獲取數據為例，首先fetch得到的是一個promise對象，需要通過then，catch進行處理。在將結果使用.json進行轉換時，得到的又是另一個promise對象，依舊要進行then，catch的處理。

//讀取網頁數據案例，兩個異步操作
function getFile() {let urlResult = fetch("https://jsonplaceholder.typicode.com/posts/1");urlResult.then((res) => {let urlResJson = res.json();urlResJson.then((res) => {console.log(res)})}).catch((err) => {console.log(err)})
}getFile()

??而使用await關鍵字，則是將promise的異步操作轉為同步：

async function getFile1() {let urlResult = await fetch("https://jsonplaceholder.typicode.com/posts/1");let urlResJson = await urlResult.json();console.log(urlResJson)
}getFile1()

十、模塊化

??如果一個js文件，需要導入另一個js文件中的內容，可以通過import和export關鍵字實現：
??user.js

const user = {username :"zhangsan",age:18
}const isAdult = (age) =>{if (age > 18){console.log("成年人")}else {console.log("未成年人")}
}//導出用戶實體和方法
export {user,isAdult
}

??main.js

import {user,isAdult
} from "./user.js";isAdult(user.age)

??如果在html中引入，則需要加上type="module"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>測試模塊化</title><script src="lib/module/main.js" type="module"></script>
</head>