乐趣区

JavaScript闯关笔记

介绍
通过 Array/Object/Function 基础类型编写。
看到自己不了解的或者比较新颖的用法便会写上。
不定时更新内容。
本文首发于我的个人网站: Timbok.top

目录

Array

迭代方法
split 和 join

Object
object 映射

Function

promise
async-await

Array
迭代方法
every() 方法对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true
const arr = [1,2,3,4];
const result = arr.every((item, index, arr)=>{
return item > 2;
});
console.log(result); // false
some() 方法 对数组中的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true
const arr = [1, 2, 3, 4];
const result = arr.some((item, index, arr)=>{
return item > 2;
});
console.log(result); // true
filter() 方法对数组中的每一项运行给定函数,返回该函数会返回 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, 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 函数的上下文中的。
参考文章

退出移动版