Promise、数组的升维与降维

promise介绍

ES6教程传送门：http://es6.ruanyifeng.com/#docs/promise

Promise是什么？

Promise是一个构造函数，用于创建Promise对象
Promise对象：可以理解为一个处理异步操作的容器
promise本质不是控制异步代码的执行顺序（无法控制），而是控制异步代码结果处理的顺序
Promise作用：解决回调地狱
回调地狱：异步回调层层嵌套

promise使用

使用流程
1.创建promise实例对象

 let p = new Promise( (resolve,reject)=>{ //异步操作 } )

2.调用实例对象的then方法

 p.then(data=>{ //处理成功数据 } , err=>{ //处理失败结果 })

promise有三种状态

pending（进行中）
fulfilled（已成功）
rejected（已失败）

Promise状态改变只有两种情况（过程不可逆）

从pending（进行中）变为fulfilled（成功）
从pending（进行中）变为rejected（失败）

注意点

Promise对象在创建的时候，里面的异步就会立即执行
不要在创建promise的时候处理异步结果，应该调用resolve()或者reject()交给then()方法来处理
promise解决回调地狱：在上一个promise的then方法中返回下一个promise实例对象

需求：依次读取abcd四个文件

const fs = require('fs');//Promise是一个构造函数，用于创建promise实例//(1)调用Promise构造函数，生成promise实例对象
/*
参数：回调函数  (resolve,reject)=>{  //你想要的异步操作 }resolve : 完成回调reject  : 失败回调
*/
let p1 = new Promise((resolve, reject) => {//异步操作： 读取文件afs.readFile(`${__dirname}/data/a.txt`, 'utf8', (err, data) => {if (!err) {//成功/* (1)resolve：执行then方法里面的第一个函数(2)resolve底层原理：修改promise状态从pending（进行中）变为fulfilled（成功）*/resolve(data);} else {//失败/* (1)reject：执行then方法里面的第二个函数(2)rreject底层原理：修改promise状态从pending（进行中）变为rejected（失败）*/reject(err);}});
});let p2 = new Promise((resolve, reject) => {//异步操作： 读取文件afs.readFile(`${__dirname}/data/b.txt`, 'utf8', (err, data) => {if (!err) {//成功resolve(data);} else {//失败reject(err);}});
});let p3 = new Promise((resolve, reject) => {//异步操作： 读取文件afs.readFile(`${__dirname}/data/c.txt`, 'utf8', (err, data) => {if (!err) {//成功resolve(data);} else {//失败reject(err);}});
});let p4 = new Promise((resolve, reject) => {//异步操作： 读取文件afs.readFile(`${__dirname}/data/d.txt`, 'utf8', (err, data) => {if (!err) {//成功resolve(data);} else {//失败reject(err);}});
});//(2)调用promise实例的then方法//第一个参数： 成功的回调
//第二个参数： 失败的回调
p1.then(data=>{console.log(data);return p2;//在第一个promise的then方法中返回第二个promise对象
})
.then(data=>{//p2的thenconsole.log(data);return p3;
})
.then(data=>{//p3的thenconsole.log(data);return p4;
})
.then(data=>{//p4的thenconsole.log(data);
});

promise本质不是修改异步的顺序（异步永远是无序的），而是通过控制异步结果的顺序，从而实现异步代码有序执行。

Promise的方法

catch():捕捉then方法中的错误err
all():将多个Promise对象放入数组合并成一个promise要等所有的promise全部执行完毕才会执行then()
race() :将多个promise对象放入数组中合并成一个promise race: 任何一个promise执行完毕就会执行then():

/* 需求 ： 依次读取abcd四个文件
*/const fs = require('fs');//Promise是一个构造函数，用于创建promise实例//封装一个创建promise的函数
function createPromise(filename){return new Promise((resolve,reject)=>{fs.readFile(`${__dirname}/data/${filename}.txt`, 'utf8', (err, data) => {if (!err) {//成功resolve(data);} else {//失败reject(err);}});});
};let p1 = createPromise('a');
let p2 = createPromise('b');
let p3 = createPromise('c');
let p4 = createPromise('d');//(2)调用promise实例的then方法
//第一个参数： 成功的回调
//第二个参数： 失败的回调
p1.then(data=>{console.log(data);return p2;//在第一个promise的then方法中返回第二个promise对象
})
.then(data=>{//p2的thenconsole.log(data);return p3;
})
.then(data=>{//p3的thenconsole.log(data);return p4;
})
.then(data=>{//p4的thenconsole.log(data);
})
.catch(err=>{//catch : 上面任何一个then出错了都会进入这个方法console.log(err);
});//all()方法
//Promise.all([p1,p2,p3,p4]) : 多个promise合成一个
let pAll = Promise.all([p1,p2,p3,p4]);//(2)调用promise实例的then方法pAll.then(data=>{//执行时机： pAll中所有的promise全部都完成才会执行then//data : 数组。 数组中每一个元素就是每一个promise的结果console.log(data);});//race方法```js
//Promise.all([p1,p2,p3,p4]) : 多个promise合成一个
let pAll = Promise.race([p1,p2,p3,p4]);//(2)调用promise实例的then方法pAll.then(data=>{//执行时机： pAll中 任何一个 promise完成就会执行then//data : 第一个执行完毕的promise的结果console.log(data);});

数组降维

数组降维就是把一个二维数组变成一维数组

方式一：数组的concat()拼接数组

 /* 二维数组 ： 数组每一个元素都是一个数组*/let arr = [['a', 'b', 'c'],['d', 'e', 'f'],['g', 'h', 'i'],];console.log(arr);// 降维;//方式一：数组的concat()拼接数组let newArr = [];for (let i = 0; i < arr.length; i++) {newArr = newArr.concat(arr[i]);}console.log(newArr);

方式二：ES6拓展运算符

二维数组 ： 数组每一个元素都是一个数组*/let arr = [['a', 'b', 'c'],['d', 'e', 'f'],['g', 'h', 'i'],];console.log(arr);//方式二：使用ES6的拓展运算符 ...let newArr = [];for (let i = 0; i < arr.length; i++) {newArr.push(...arr[i]);}console.log(newArr);let newarr=[].concat(...arr1 );console.log(newarr)

多维数组降维一维数组

超过二维以上数组，暂且称它为多维数组

方式一：使用 reduce

遍历数组每一项，若值为数组则递归遍历，否则concat。

function flatten(arr) {  return arr.reduce((result, item)=> {return result.concat(Array.isArray(item) ? flatten(item) : item);}, []);
}

reduce是数组的一种方法，它接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce包含两个参数：回调函数，传给total的初始值

// 求数组的各项值相加的和：
arr.reduce((total, item)=> {  // total为之前的计算结果，item为数组的各项值return total + item;
}, 0);

方式二：toString/ join & split

调用数组的toString/join 方法，将数组变为字符串然后再用split分割还原为数组

//toString
function flatten(arr) {return arr.toString().split(',').map(function(item) {return Number(item);})
}
//join
function flatten(arr) {return arr.join().split(',').map(function(item) {return Number(item);})
}

因为split分割后形成的数组的每一项值为字符串，所以需要用一个map方法遍历数组将其每一项转换为数值型

方式三：递归

递归的遍历每一项，若为数组则继续遍历，否则concat

function flatten(arr) {var res = [];arr.map(item => {if(Array.isArray(item)) {res = res.concat(flatten(item));} else {res.push(item);}});return res;
}

方式四：扩展运算符
es6的扩展运算符能将二维数组变为一维
根据这个结果我们可以做一个遍历，若arr中含有数组则使用一次扩展运算符，直至没有为止。

function flatten(arr) {while(arr.some(item=>Array.isArray(item))) {arr = [].concat(...arr);}return arr;
}

总结
虽然说写了4种方法，但是核心也只有一个：
遍历数组arr，若arr[i]为数组则递归遍历，直至arr[i]不为数组然后与之前的结果concat。

数组升维

一维数组生成二维获者多维

利用对象的特点实现数组去重

对象特点
obj.name 取值：有：取值没有：undefined
obj.name = 1 赋值：有：修改没有：动态添加
对象的属性名不能重复

 let arr1 = [88, 20, 66, 50, 90, 88, 20, 66];let obj = {}; //利用属性名不能重复特点实现数组去重let newArr = [];for (let i = 0; i < arr1.length; i++) {if (!obj[arr1[i]]) {//!undefined=true  obj.name 取值 ：  有：取值  没有：undefinedobj[arr1[i]] = 1; // obj.name = 1  赋值 ： 有：修改  没有：动态添加newArr.push(arr1[i]);}}console.log(newArr);

未升维之前的一维数组

 //数组的降维 ，多用于对后端数据的重新整理var arr = [{type: '电子产品',name: 'iPhone',price: 8888}, {type: '家具',name: ' 桌子',price: 100}, {type: '食品',name: '瓜子',price: 10}, {type: '家具',name: '椅子',price: 380}, {type: '电子产品',name: '小米手机',price: 1380}, {type: '食品',name: '辣条',price: 5}, {type: '食品',name: '咖啡',price: 50}];// 声明一个空对象，及空数组var obj = {};var arrNew = [];arr.forEach(item => {if (obj[item.type] == undefined) { // 第一次出现 判断对象中是否含有obj[item.type] = 1; //赋值arrNew.push({type: item.type,data: [item]})} else { // 不是第一次出现// 判断当前的item2属于arrNew中的那一类arrNew.forEach((item2, index2) => {if (item.type == item2.type) {arrNew[index2].data.push(item2) //在该对象的data中添加}})}})

升维后的数组