Javascript中數(shù)組有這樣幾個原汁原味的方法

• forEach
• map
• every
• reduce

暫且說這幾個，他們都帶有遍歷的特點，也就是

image.png

體現(xiàn)了一個“都”字
那么問題來了，這幾個方法使用的語義是什么呢？
有沒有遇到過應該用forEach的時候用了map呢

forEach 特點

• 每個元素參與到提供的函數(shù)中
• 無返回值
• 不改變原來數(shù)組

let a = [1,2,3];
a.forEach((item)=>{
// 用每一項來干點什么
});

適合的語義
“把每行都寫到文件里吧”，每一項和最終的結(jié)果不是運算得出的關(guān)系
作為一般情況下的for循環(huán)替代，但是forEach中只能通過拋異常來跳出迭代

map特點

• 每個元素都參與到提供的函數(shù)中
• 返回值是個新數(shù)組

• 新數(shù)組中的每個元素 = 提供的函數(shù)(原數(shù)組元素)
  map是最容易被誤用做forEach場景的

  
  
  image.png

let a = [1,2,3];
let result = a.map(item=>item+1);

適合的語義
“給我個新數(shù)組，里面的項可不要像之前的數(shù)組中那樣，無關(guān)的屬性那么多”
每一項和最終的結(jié)果是有運算關(guān)系，往往是增減
注意最重要的一個與forEach的區(qū)別就是map是返回一個運算后的新數(shù)組的

every特點

文檔翻譯的有點繞嘴

image.png

• 每一項都要進行一波測試，用什么測試呢？就是你傳進去的函數(shù)
• 測試結(jié)果是與的關(guān)系，也就是有一項不合格整體就是不合格
• 返回值就是測試結(jié)果

    const supportedResult = Object.values(supportedTable).every(checkIsSupported);

適合的語義
“ok，辦工作居住證是吧？你提交的材料數(shù)組中每一項都要合格哦”

reduce特點

• 有積累 下一次迭代可以取到上一次的積累值
• 返回積累(常見的就是返回一個數(shù)組或者map或者數(shù)字)
• 也是不改變原數(shù)組

const complexObj = (keys = [], values = []) => {
    return keys.reduce((map, key, index) => {
        map[key] = values[index];
        return map;
    }, {});
};

適合的語義
由于積累可以是多樣的，所以reduce特別適合用來做"轉(zhuǎn)換"，從一種形式轉(zhuǎn)換為另一種形式，比如你有一個數(shù)組是[糖，鹽]，開始點菜，餐單一開始是空map，map就是積累的池子，你用糖做完一道菜，咔嚓扔餐單里，餐單{拔絲地瓜:{巴拉巴拉}} ,然后做下一道用鹽尖椒小炒肉，咔嚓再扔菜單里，餐單里就多了尖椒小炒肉。當然你也可以是餐單是個數(shù)組

這樣可以避免寫出如下代碼

const getSupportedMap = (version, browserCapabilities) => {
    const out = {};
    Object.keys(browserCapabilities).map((key) => {
        out[key] = version >= browserCapabilities[key].y;
    });
    return out;
};

改下變?yōu)?/p>

const getSupportedMap = (version, browserCapabilities) => {
    return Object.keys(browserCapabilities).reduce((map, key) => {
        map[key] = version >= browserCapabilities[key].y;
    }, {});
};

至于find findIndex這些方法本身語義就很明確