JavaScript闯关笔记

介绍

经过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
复制代码

2. some()方法 对数组中的每一项运行给定函数，若是该函数对任一项返回 true，则返回 true

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

3. filter()方法对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组

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

4. map()方法 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

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

5. forEach()方法 对数组中的每一项运行给定函数。这个方法没有返回值，本质上与使用 for 循环迭代数组同样

const arr = [1, 2, 3, 4];
const result = arr.forEach((item, index)=>{
    // 执行某些操做
});
复制代码

6. 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 对象有如下两个特色:

一、对象的状态不受外界影响。Promise 对象表明一个异步操做，有三种状态：

• pending: 初始状态，不是成功或失败状态。
• fulfilled: 意味着操做成功完成。
• rejected: 意味着操做失败。

只有异步操做的结果，能够决定当前是哪种状态，任何其余操做都没法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其余手段没法改变。

二、一旦状态改变，就不会再变，任什么时候候均可以获得这个结果。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函数的上下文中的。

参考文章