JavaScript闖關筆記

時間 2019-11-08

標籤 javascript 闖關筆記欄目 JavaScript 简体版

原文原文鏈接

介紹

經過Array/Object/Function基礎類型編寫。前端

看到本身不瞭解的或者比較新穎的用法便會寫上。segmentfault

不定時更新內容。數組

本文首發於個人我的網站: Timbok.toppromise

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])dom

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; 
複製代碼

有返回值async

// 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(): 用於把一個字符串分割成字符串數組。ide

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 回來的數據了。
複製代碼