深淺克隆和Promise非同步編程

深克隆和淺克隆

淺克隆

arr.slice(0)
arr.concat()
let obj2 = {... obj} 

深克隆

function deepClone(obj){
    //判斷參數是不是一個對象
    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詳解

局部地獄

回調地獄：上一個回調函數中繼續做事情，而且繼續回調（在真實項目的AJAX請求中經常出現回調地獄）=>非同步請求、不方便代碼的維護

Promise的誕生就是為瞭解決非同步請求中的回調地獄問題：它是一種設計模式，ES6中提供了一個JS內置類Promise，來實現這種設計模式

 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函數執行（只不過我們一般會在executor函數中處理一個非同步操作）
• PROMISE本身有三個狀態 =>[[PromiseStatus]]
  • pending 初始狀態
  • fulfilled 代表操作成功（resolved）
  • rejected 代表當前操作失敗

new Promise的時候先執行executor函數，在這裡開啟了一個非同步操作的任務（此時不等：把其放入到EventQuque任務隊列中），繼續執行

• p1.then基於THEN方法，存儲起來兩個函數（此時這兩個函數還沒有執行）；當executor函數中的非同步操作結束了，基於resolve/reject控制Promise狀態，從而決定執行then存儲的函數中的某一個

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這種每一次執行then返回的新實例的狀態，由then中存儲的方法執行的結果來決定最後的狀態（上一個THEN中某個方法執行的結果，決定下一個then中哪一個方法會被執行）
• =>不論是成功的方法執行，還是失敗的方法執行（THEN中的兩個方法），凡是執行拋出了異常，則都會把實例的狀態改為失敗
• =>方法中如果返回一個新的PROMISE實例，返回這個實例的結果是成功還是失敗，也決定了當前實例是成功還是失敗
• =>剩下的情況基本上都是讓實例變為成功的狀態 （方法返回的結果是當前實例的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);
		}); 

• TEHN中也可以只寫一個或者不寫函數

  • .then(fn)
  • .then(null,fn)

遇到一個THEN，要執行成功或者失敗的方法，如果此方法並沒有在當前THEN中被定義，則順延到下一個對應的函數

• Promise.all(arr)：返回的結果是一個PROMISE實例（ALL實例），要求ARR數組中的每一項都是一個新的PROMIE實例，
• PROMISE.ALL是等待所有數組中的實例狀態都為成功才會讓“ALL實例”狀態為成功，VALUE是一個集合，存儲著ARR中每一個實例返回的結果；凡是ARR中有一個實例狀態為失敗，“ALL實例”的狀態也是失敗
• Promise.race(arr)：和ALL不同的地方，RACE是賽跑，也就是ARR中不管哪一個先處理完，處理完的結果作為“RACE實例”的結果

async / await

• AWAIT會等待當前PROMISE的返回結果，只有返回的狀態是RESOLVED情況，才會把返回結果賦值給RESULT

• AWAIT不是同步編程，是非同步編程（微任務）:當代碼執行到此行（先把此行），構建一個非同步的微任務（等待PROMISE返回結果，並且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是失敗狀態，則AWAIT不會接收其返回結果，AWAIT下麵的代碼也不會在繼續執行（AWAIT只能處理PROMISE為成功狀態的時候）

 async function fn() {
	let reason = await p3;
	console.log(reason);
}
fn(); */