【菜农大丰收】论语义问题

Javascript中数组有这样几个原汁原味的方法

• forEach
• map
• every
• reduce

暂且说这几个，他们都带有遍历的特点，也就是

image.png

体现了一个“都”字
那么问题来了，这几个方法使用的语义是什么呢？
有没有遇到过应该用forEach的时候用了map呢

forEach 特点

• 每个元素参与到提供的函数中
• 无返回值
• 不改变原来数组

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

适合的语义
“把每行都写到文件里吧”，每一项和最终的结果不是运算得出的关系
作为一般情况下的for循环替代，但是forEach中只能通过抛异常来跳出迭代

map特点

• 每个元素都参与到提供的函数中
• 返回值是个新数组

• 新数组中的每个元素 = 提供的函数(原数组元素)
  map是最容易被误用做forEach场景的

  
  image.png

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

适合的语义
“给我个新数组，里面的项可不要像之前的数组中那样，无关的属性那么多”
每一项和最终的结果是有运算关系，往往是增减
注意最重要的一个与forEach的区别就是map是返回一个运算后的新数组的

every特点

文档翻译的有点绕嘴

image.png

• 每一项都要进行一波测试，用什么测试呢？就是你传进去的函数
• 测试结果是与的关系，也就是有一项不合格整体就是不合格
• 返回值就是测试结果

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

适合的语义
“ok，办工作居住证是吧？你提交的材料数组中每一项都要合格哦”

reduce特点

• 有积累 下一次迭代可以取到上一次的积累值
• 返回积累(常见的就是返回一个数组或者map或者数字)
• 也是不改变原数组

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

适合的语义
由于积累可以是多样的，所以reduce特别适合用来做"转换"，从一种形式转换为另一种形式，比如你有一个数组是[糖，盐]，开始点菜，餐单一开始是空map，map就是积累的池子，你用糖做完一道菜，咔嚓扔餐单里，餐单{拔丝地瓜:{巴拉巴拉}} ,然后做下一道用盐尖椒小炒肉，咔嚓再扔菜单里，餐单里就多了尖椒小炒肉。当然你也可以是餐单是个数组

这样可以避免写出如下代码

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

改下变为

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

至于find findIndex这些方法本身语义就很明确