介绍通过Array/Object/Function基础类型编写。看到自己不了解的或者比较新颖的用法便会写上。不定时更新内容。本文首发于我的个人网站: Timbok.top目录Array迭代方法split和joinObjectobject映射Functionpromiseasync-awaitArray迭代方法every()方法对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 trueconst arr = [1,2,3,4];const result = arr.every((item, index, arr)=>{ return item > 2;});console.log(result); // falsesome()方法 对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 trueconst arr = [1, 2, 3, 4];const result = arr.some((item, index, arr)=>{ return item > 2;});console.log(result); // truefilter()方法对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组const arr = [1, 2, 3, 4];const result = arr.filter((item, index)=>{ return item > 2;});console.log(result); // [3, 4]map()方法 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组const arr = [1, 2, 3, 4];const result = arr.map((item, index)=>{ return item * index;});console.log(result); // [0, 2, 6, 12]forEach()方法 对数组中的每一项运行给定函数。这个方法没有返回值，本质上与使用 for 循环迭代数组一样const arr = [1, 2, 3, 4];const result = arr.forEach((item, index)=>{ // 执行某些操作});reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。对空数组是不会执行回调函数的。arr.reduce(callback,[initialValue])callback （执行数组中每个值的函数，包含四个参数）previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））currentValue （数组中当前被处理的元素）index （当前元素在数组中的索引）array （调用 reduce 的数组）initialValue （作为第一次调用 callback 的第一个参数。）无返回值const arr = [1, 2, 3];arr.reduce((pev, item)=>{ console.log(pev, item);}, 0);// 运行结果依次为：0 1; undefined 2; undefined 3; 有返回值// pev为上次迭代return的值const arr = [1, 2, 3, 4];const result = arr.reduce((pev, item)=>{ console.log(pev); return pev + item;}, 0);console.log(result); // 10// pev运行结果依次为：0, 1, 3, 6split和joinsplit(): 用于把一个字符串分割成字符串数组。const string = ‘1, 2, 3, 4, 5’;string.split(’,’); // [“1”, “2”, “3”, “4”, “5”]如果string为空，则返回一个空数组const string = ‘’;string.split(’,’); // [""]string.split(); // [""]join(): 用于把数组中的所有元素放入一个字符串。const array = [1, 2, 3, 4, 5];array.join(); // ‘1,2,3,4,5’ 默认用，分割array.join(’|’); // “1|2|3|4|5” 默认用，分割Objectobject映射定义一个object作为配置对象来存放不同状态，通过链表查找const statusMap = { 1:()=>{ console.log(‘a1’) }, 2:()=>{ console.log(‘b2’) } /* n…. */}// 执行let a = 1 statusMapa // a1这样比较清晰，将条件配置与具体执行分离。如果要增加其他状态，只修改配置对象即可。FunctionpromiseECMAscript 6 原生提供了 Promise 对象。Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。Promise 对象有以下两个特点:1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending: 初始状态，不是成功或失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。简单实现：function _promise(params) { return new Promise((resolve, reject)=>{ params>0 ? resolve(‘正数’) : reject(‘负数’); });}_promise(1).then(res=>console.log(res)) // 正数_promise(-1).catch(res=>console.log(res)) // 负数Promise.allPromise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。let p1 = new Promise((resolve, reject) => { resolve(‘成功了’)})let p2 = new Promise((resolve, reject) => { resolve(‘success’)})let p3 = Promise.reject(‘失败’)Promise.all([p1, p2]).then((result) => { console.log(result) //[‘成功了’, ‘success’]}).catch((error) => { console.log(error)})Promise.all([p1,p3,p2]).then((result) => { console.log(result)}).catch((error) => { console.log(error) // ‘失败’})需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。Promise.race顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。let p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve(‘success’) },1000)})let p2 = new Promise((resolve, reject) => { setTimeout(() => { reject(‘failed’) }, 500)})Promise.race([p1, p2]).then((result) => { console.log(result)}).catch((error) => { console.log(error) // 打开的是 ‘failed’})async-awaitES2017 标准引入了async 函数，使得异步操作变得更加方便。async 函数是什么？一句话，它其实就是promise 和Generator 函数的语法糖。asyncasync 用来表示函数是异步的，定义的函数会返回一个promise对象，可以使用then方法添加回调函数。async function test() { return 123;}test().then(res => { console.log(res);// 123});若 async 定义的函数有返回值，return 123;相当于Promise.resolve(123),没有声明式的 return则相当于执行了Promise.resolve();awaitawait 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部，不能单独使用。function notAsyncFunc() { await Math.random();}notAsyncFunc();//Uncaught SyntaxError: Unexpected identifierawait 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。function sleep(second) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(’ enough sleep~’); }, second); })}function normalFunc() { console.log(’normalFunc’);}async function awaitDemo() { await normalFunc(); console.log(‘something, ~~’); let result = await sleep(2000); console.log(result);// 两秒之后会被打印出来}awaitDemo();// normalFunc// VM4036:13 something, // VM4036:15 enough sleep希望通过上面的 demo，大家可以理解我上面的话。错误处理上述的代码好像给的都是resolve的情况，那么reject的时候我们该如何处理呢？function sleep(second) { return new Promise((resolve, reject) => { setTimeout(() => { reject(‘want to sleep’); }, second); })}async function errorDemo() { let result = await sleep(1000); console.log(result);}errorDemo();// VM706:11 Uncaught (in promise) want to sleep// 为了处理Promise.reject 的情况我们应该将代码块用 try catch 包裹一下async function errorDemoSuper() { try { let result = await sleep(1000); console.log(result); } catch (err) { console.log(err); }}errorDemoSuper();// want to sleep// 有了 try catch 之后我们就能够拿到 Promise.reject 回来的数据了。最后一点，await必须在async函数的上下文中的。参考文章
...