伪数组和promise,async,await的关系

发表于 | 分类于

何为伪数组
如果一个对象的所有键名都是正整数或者0，并且具有Length属性，那么这个对象就很像数组，语法上就非常像伪数组。

1
2
3
4
5
6
7
8
9
var obj = {
    0:'a',
    1:'b',
    2:'c',
    length:3
};
obj[0] //'a'
obj[1] //'b'
obj.length //3

对象obj是一个类似数组的对象，但是类似数组的对象并不是数组,因为它们不具备数组的方法，对象obj没有数组的push方法。
典型的”类似数组的对象”是函数的arguments对象，以及大多数DOM元素集，还有字符串/
数组的slice方法可以将类似数组的对象转变成真正的数组

1
2
3
4
5
function doSomething() {
    console.log(arguments);
    var args = Array.prototype.slice.call(arguments);
    return args;
}

ES6提供了array.from方法，将伪数组转化成真正的数组

1
2
3
4
5
let btns = document.getElementByTagName("button");
console.log(btns);
Array.from(btns).forEach(item => {
    console.log(item);
})

将伪数组转化成真正的数组
扩展运算符(…)也可以将某些数据结构转化为数组。只不过需要在背后调用遍历器接口Symbol.iterator
值得注意的是如果一个对象没有部署遍历器接口，使用扩展运算符是无法将类似数组对象转换成数组的

1
2
3
4
function doSomething(){
    return [...arguments];
}
doSomething('a','b','c');

Array.of相当于Array的构造器，会创建一个包含所有传入参数的数组，而不管参数的数量与类型：

1
2
3
items = Array.of(2); 
console.log(items[0]); //2
console.log(items.length); //2

promise相关

异步编程模式在前端开发中，显得越来越重要，从最开始的XHR到封装后的ajax都在试图解决异步编程中的问题，
传统ajax中，当异步请求之间的数据存在依赖关系的时候，就可能产生出多层的回调嵌套问题。俗称”回调地狱”,
promise的出现让我们告别了回调函数，写出了更加优雅的代码。
async/await的到来使得异步代码看起来像同步代码的替代方法。
promise的原理：
对一种异步操作的封装，可以通过独立的接口添加在异步操作执行成功，失败时执行的方法，主流的规范是promise/a+
promise的状态：pending初始状态,fulfilled成功,rejected失败.
promise实例必须实现then这个方法 then必须返回2个函数作为参数(resolve,reject)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var promise = new Promise(function(resolve,reject){
    var img = document.createElement("img");
    img.onload = function() {
        resolve(img);
    };
    img.onerror = function(){
        reject("图片加载失败");
    }
});
result.then(
    function(img){
console.log();
    }.then(function(img){
        console.log();
    })
)

promise的级联操作
result1.then(function(img){

}).then(function(img){

}).catch(function(ex){
console.log();
})
promise的all方法，可以并行执行所有任务。

1
2
3
4
5
6
7
8
9
var p1 = new Promise(function(resolve,reject){
    setTimeout(resolve,500,'p1');
})
var p2 = new Promise(function(resolve,reject){
    setTimeout(resolve,600,'p2');
})
promise.all([p1,p2]).then(function(results){
    console.log(results);
})

promise.race接收一个包含多个promise对象的数组，只要一个完成，就执行success.
async/await是写异步代码的新方式，优于回调函数和promise.
async/await基于promise实现的。不能用于普通的回调函数。
。。。。。。。与promise是一样的，是非阻塞的。
。。。。。。。使得异步代码看起来像同步代码一样，没有回调函数。但是改变不了js单线程，异步的本质。

1
2
3
4
const load = async function(){
    const result1 = await loading(src1);
    console.log(result1);
}

async,await相关

async/await较promise有诸多好处
1.简洁。使用async/await明显节约了不少代码。不需要写.then()方法。
2.中间值。调用promise1,使用promise1返回的结果去调用promise2

1
2
3
4
5
const makeRequest = async () => {
    const value1 = await promise1();
    const value2 = await promise2(value1);
    return promise3(value1,value2);
}