深克隆和淺克隆
淺克隆
arr.slice(0)
arr.concat()
let obj2 = {... obj}
深克隆
function deepClone(obj){
//判斷參數(shù)是不是一個對象
let objClone = new obj.constructor();
if(obj && typeof obj==="object"){
for(key in obj){
if(obj.hasOwnProperty(key)){
//判斷ojb子元素是否為對象，如果是，遞歸復制
if(obj[key]&&typeof obj[key] ==="object"){
objClone[key] = deepClone(obj[key]);
}else{
//如果不是，簡單復制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
Promise詳解
局部地獄
回調(diào)地獄：上一個回調(diào)函數(shù)中繼續(xù)做事情，而且繼續(xù)回調(diào)（在真實項目的AJAX請求中經(jīng)常出現(xiàn)回調(diào)地獄）=>異步請求、不方便代碼的維護
Promise的誕生就是為了解決異步請求中的回調(diào)地獄問題：它是一種設計模式，ES6中提供了一個JS內(nèi)置類Promise，來實現(xiàn)這種設計模式
function ajax1() {
return new Promise(resolve => {
$.ajax({
url: '/student',
method: 'get',
data: {
class: 1
},
success: resolve
});
});
}
function ajax2(arr) {
return new Promise(resolve => {
$.ajax({
url: '/score',
method: 'get',
data: {
stuId: arr
},
success: resolve
});
});
}
function ajax3() {
return new Promise(resolve => {
$.ajax({
url: '/jige',
// ...
success: resolve
});
});
}
ajax1().then(result => {
return ajax2(result.map(item => item.id));
}).then(result => {
return ajax3();
}).then(result => {
});
- PROMISE是用來管理異步編程的，它本身不是異步的：new
Promise的時候會立即把executor函數(shù)執(zhí)行（只不過我們一般會在executor函數(shù)中處理一個異步操作）
- PROMISE本身有三個狀態(tài) =>[[PromiseStatus]]
- pending 初始狀態(tài)
- fulfilled 代表操作成功（resolved）
- rejected 代表當前操作失敗
new Promise的時候先執(zhí)行executor函數(shù)，在這里開啟了一個異步操作的任務（此時不等：把其放入到EventQuque任務隊列中），繼續(xù)執(zhí)行
- p1.then基于THEN方法，存儲起來兩個函數(shù)（此時這兩個函數(shù)還沒有執(zhí)行）；當executor函數(shù)中的異步操作結束了，基于resolve/reject控制Promise狀態(tài)，從而決定執(zhí)行then存儲的函數(shù)中的某一個
let p1 = new Promise((resolve, reject) => {
setTimeout(_ => {
let ran = Math.random();
console.log(ran);
if (ran < 0.5) {
reject('NO!');
return;
}
resolve('OK!');
}, 1000);
});
- THEN：設置成功或者失敗后處理的方法
THEN方法結束都會返回一個新的Promise實例（THEN鏈）
p1.then(result => {
console.log(`成功：` + result);
}, reason => {
console.log(`失敗：` + reason);
});
- p2/p3這種每一次執(zhí)行then返回的新實例的狀態(tài)，由then中存儲的方法執(zhí)行的結果來決定最后的狀態(tài)（上一個THEN中某個方法執(zhí)行的結果，決定下一個then中哪一個方法會被執(zhí)行）
- =>不論是成功的方法執(zhí)行，還是失敗的方法執(zhí)行（THEN中的兩個方法），凡是執(zhí)行拋出了異常，則都會把實例的狀態(tài)改為失敗
- =>方法中如果返回一個新的PROMISE實例，返回這個實例的結果是成功還是失敗，也決定了當前實例是成功還是失敗
- =>剩下的情況基本上都是讓實例變?yōu)槌晒Φ臓顟B(tài) （方法返回的結果是當前實例的value值：上一個then中方法返回的結果會傳遞到下一個then的方法中）
let p1 = new Promise((resolve, reject) => {
resolve(100);
});
let p2 = p1.then(result => {
console.log('成功：' + result);
return result + 100;
}, reason => {
console.log('失?。? + reason);
return reason - 100;
});
let p3 = p2.then(result => {
console.log('成功：' + result);
}, reason => {
console.log('失?。? + reason);
});
遇到一個THEN，要執(zhí)行成功或者失敗的方法，如果此方法并沒有在當前THEN中被定義，則順延到下一個對應的函數(shù)
- Promise.all(arr)：返回的結果是一個PROMISE實例（ALL實例），要求ARR數(shù)組中的每一項都是一個新的PROMIE實例，
- PROMISE.ALL是等待所有數(shù)組中的實例狀態(tài)都為成功才會讓“ALL實例”狀態(tài)為成功，VALUE是一個集合，存儲著ARR中每一個實例返回的結果；凡是ARR中有一個實例狀態(tài)為失敗，“ALL實例”的狀態(tài)也是失敗
- Promise.race(arr)：和ALL不同的地方，RACE是賽跑，也就是ARR中不管哪一個先處理完，處理完的結果作為“RACE實例”的結果
async / await
async function fn() {
console.log(1);
let result = await p2;
console.log(result);
let AA = await p1;
console.log(AA);
}
fn();
console.log(2); */
- 如果PROMISE是失敗狀態(tài)，則AWAIT不會接收其返回結果，AWAIT下面的代碼也不會在繼續(xù)執(zhí)行（AWAIT只能處理PROMISE為成功狀態(tài)的時候）
async function fn() {
let reason = await p3;
console.log(reason);
}
fn(); */
|
