引见

经由过程Array/Object/Function基本范例编写。

看到自身不相识的或许比较新鲜的用法便会写上。

不定时更新内容。

本文首发于我的个人网站:
Timbok.top

目次

• Array

  • 迭代要领
  • split和join

• Object

  • object映照

• Function

  • promise
  • async-await

Array

迭代要领

1. every()要领对数组中的每一项运转给定函数，假如该函数对每一项都返回 true，则返回 true

const arr = [1,2,3,4];
const result = arr.every((item, index, arr)=>{
    return item > 2;
});
console.log(result); // false

1. some()要领 对数组中的每一项运转给定函数，假如该函数对任一项返回 true，则返回 true

const arr = [1, 2, 3, 4];
const result = arr.some((item, index, arr)=>{
    return item > 2;
});
console.log(result); // true

1. filter()要领对数组中的每一项运转给定函数，返回该函数会返回 true 的项构成的数组

const arr = [1, 2, 3, 4];
const result = arr.filter((item, index)=>{
    return item > 2;
});
console.log(result); // [3, 4]

1. map()要领 对数组中的每一项运转给定函数，返回每次函数挪用的效果构成的数组

const arr = [1, 2, 3, 4];
const result = arr.map((item, index)=>{
    return item * index;
});
console.log(result); // [0, 2, 6, 12]

1. forEach()要领 对数组中的每一项运转给定函数。这个要领没有返回值，本质上与运用 for 轮回迭代数组一样

const arr = [1, 2, 3, 4];
const result = arr.forEach((item, index)=>{
    // 实行某些操纵
});

1. 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, 6

split和join

split(): 用于把一个字符串支解成字符串数组。

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" 默认用，支解

Object

object映照

定义一个object作为设置对象来寄存差别状况，经由过程链表查找

const statusMap = {
    1:()=>{
        console.log('a1')
    },
    2:()=>{
        console.log('b2')
    }
    /* n.... */
}
// 实行
let a = 1 
statusMap[a]() // a1

如许比较清楚，将前提设置与详细实行星散。假如要增添其他状况，只修正设置对象即可。

Function

promise

ECMAscript 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.all

Promise.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-await

ES2017 规范引入了async 函数，使得异步操纵变得越发轻易。

async 函数是什么？一句话，它实在就是promise 和Generator 函数的语法糖。

async

async 用来示意函数是异步的，定义的函数会返回一个promise对象，可以运用then要领添加回调函数。

async function test() {
    return 123;
}

test().then(res => {
    console.log(res);// 123
});
若 async 定义的函数有返回值，return 123;相当于Promise.resolve(123),没有声明式的 return则相当于实行了Promise.resolve();

await

await 可以明白为是 async wait 的简写。await 必需出现在 async 函数内部，不能零丁运用。

function notAsyncFunc() {
    await Math.random();
}
notAsyncFunc();//Uncaught SyntaxError: Unexpected identifier

await 背面可以跟任何的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函数的高低文中的。

参考文章