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这些方法本身语义就很明确
