深浅克隆和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(); */

深浅克隆和Promise异步编程

深克隆和浅克隆

浅克隆

深克隆

Promise详解

局部地狱

async / await

相关推荐