数组Array-ES6新增的原型方法-forEach、filter、some、every、find、findIndex、map、reduce 好用、相似、但又不同

---

forEach()

作用：
forEach()显示的指定一个处理函数，在这个函数里，会依次遍历数组中的元素，可以对每个元素进行处理，请注意方法对数组的每个元素执行一次给定的函数
类似最普通的for(var i=0; i<arr1.length; i++){},只不过用forEach后不用写的那么啰嗦。
特别注意的是：forEach只可按需对调用的该数组每个元素进行处理，改造，是可对原数组的按需改变，回调函数并不返回新数组，回调函数handleFunc显示的返回值也不生成新数组

适应场景：
需要对调用数组进行相关值处理，改变这个数组或只拿调用数组做执行判断依据时使用

语法、代码示例：
指定一个function对数组arr1进行改造处理

const arr1 = ['a', 'b', 'c'];
const handleFunc = (item,index, arr) => {
    console.log(item)
    console.log(index)
    console.log(arr)
    // 其它处理逻辑
}
const arr2 = arr1.forEach(handleFunc);
console.log(arr2) // undefined

代码输出：

可以看到arr2值为 undefined arr1.forEach()不返回新数组或原数组

---

filter()

作用：

方法会创建并返回一个新数组，这个新数组的数据为filter中指定的回调函数handleFunc中设定的符合指定条件的原数组新的子集。

适应场景：
现有一个数组数据A，项目中某个功能需要对数组A的数据进行依次判断，返回符合条件的新数组 这样的需要就非常适合用到filter()来处理。

语法、代码示例：
代码演示A:
为了便于比较filter跟forEach的差异，这里只对forEach的演示代码做2处简单的更改或增加。可以明显的感觉到filter与forEach的不同。

const arr1 = ['a', 'b', 'c'];
const handleFunc = (item,index, arr) => {
    console.log(item)
    console.log(index)
    console.log(arr)
    // 其它处理逻辑

    return item === 'a' // 改动1 +
}
const arr2 = arr1.filter(handleFunc); // 改动2：forEach改为filter

console.log(arr2) // ["a"]

代码输出：

特别注意：filter的返回值是一个新的数组，而这个新数组就是filter()指定的回调函数handleFunc的显示返回值(即对数组单项数据符合自定义条件的累加）
如果回调函数handleFunc不显示的指定返回数据，那么filter()的返回值为空数组[]。

代码演示B:
为了更好的加深filter印象我们再来一个demo，项目中有个需求：当用户选择小于100元以下商品时，只显示价格小于100的商品，那么就需要我们针对现有商品数据过滤掉大于100的数据。

const arr1 = [
    {
        id: 1001,
        title: '商品A',
        price: 80
    },
    {
        id: 1002,
        title: '商品B',
        price: 90
    },
    {
        id: 1003,
        title: '商品C',
        price: 101
    },
    {
        id: 1004,
        title: '商品D',
        price: 118
    }
];
const handleFunc = (item,index, arr) => {
    return item.price < 100 // 需要返回的数据要符合这个条件，自动返回所有单项数据符合这个条件的累加数组
}
const arr2 = arr1.filter(handleFunc);

console.log(arr2); // 返回handleFunc 返回的符合条件的新数组数据

代码输出：

小结：filter的方便在于相较于过去没有filter的时候我们处理类似的问题，需要写普通的for循环做遍历判断处理，每个人写可能还会有各不同，而filter通过指定规则的handleFunc,
固定的使用方式，我们只需关注符合条件的逻辑判断条件的书写，大大减少了各色代码的书写，使得工程师关注点更专注。

---

some()

作用：
有没有符合自定义条件的至少1个的数据(也就是只要有一个数据符合条件那么 some的结果就返回true)

适应场景：

语法、代码示例：

相较于filter的“代码演示B” 只做了一处更改，就是，将filter改为some，其它完全不变，同样可以直观感受它们的区别。

const arr1 = [
    {
        id: 1001,
        title: '商品A',
        price: 80
    },
    {
        id: 1002,
        title: '商品B',
        price: 90
    },
    {
        id: 1003,
        title: '商品C',
        price: 101
    },
    {
        id: 1004,
        title: '商品D',
        price: 118
    }
];
const handleFunc = (item,index, arr) => {
    return item.price < 100 // 也是要跟filter一样要回调函数要显示的返回，或用es6箭头函数 对单个表达式的默认返回
}
console.log(arr1.some(handleFunc)); // 修改 使用some方法

代码输出：

小结：就是只要有一个条件符合，那么回调函数结果就是true，否则就是false，值得注意的是回调函数必须显示的返回值 否则不论是有没有条件满足，
some的返回结果都是false

---

every()


作用：
指定一个回调函数给every，这个回调函数中判断数组每一项是否都满足自定义条件，注意是都满足，只有都满足条件最终every返回值则为true，否则，
但凡有一个不满足条件都返回false

通俗的讲：
　　看看这组商品价格都小于100吗，哦不，我看还有2个商品要大于100（此时every返回值为false）

语法、代码示例：
同样，相校于some的演示代码，我们只改了一处，即some方法改为every，其他代码完全与some演示代码一样，很容易感受出异同。

需求：以下商品价格都小于100吗

const arr1 = [
    {
        id: 1001,
        title: '商品A',
        price: 80
    },
    {
        id: 1002,
        title: '商品B',
        price: 90
    },
    {
        id: 1003,
        title: '商品C',
        price: 101
    },
    {
        id: 1004,
        title: '商品D',
        price: 118
    }
];
const handleFunc = (item,index, arr) => {
    return item.price < 100 
}
console.log(arr1.every(handleFunc)); // some改为every

小结：就是必须每一项条件都符合，那么回调函数结果就是true，否则就是false，值得注意的是回调函数也必须显示的返回值 否则不论即使条件都满足，
every的返回结果都是false

提示：
当然以上代码我们还可以这么写

const handleFunc = (item,index, arr) => {
    return item.price < 100 
}

我们改为一行写，也不是啥不得了的写法，就是ES6的简写，就是当返回的表达式只有单行时，可以省略掉大括号，以及箭头函数可以省略最后的return，因为这么写默认跟上加return效果一致：

const handleFunc = (item,index, arr) => item.price < 100

---

find()

作用：

find的回调函数会从上往下遍历数组的每一项是否符合diy的条件，看谁先符合就把哪个数组单项数据返回。一个符合条件的数组项都没有则返回undefined。

应用场景：
需要获取数组中越近符合条件数据的场景。

const arr1 = [
    {
        id: 1001,
        title: '商品A',
        price: 80
    },
    {
        id: 1002,
        title: '商品B',
        price: 90
    },
    {
        id: 1003,
        title: '商品C',
        price: 101
    },
    {
        id: 1004,
        title: '商品D',
        price: 118
    }
];
const handleFunc = (item,index, arr) => item.price < 100
console.log(arr1.find(handleFunc)); // 使用find方法，返回符合条件的最近数组单项的数据，没有符合则默认返回undefined

---

findIndex()

作用：

使用findIndex方法，返回符合条件的最近数组单项的数据的索引，没有符合则默认返回-1

跟find方法使用一样的demo，仅仅改为findIndex方法，很明显感知到跟find方法的区别

const arr1 = [
    {
        id: 1001,
        title: '商品A',
        price: 80
    },
    {
        id: 1002,
        title: '商品B',
        price: 90
    },
    {
        id: 1003,
        title: '商品C',
        price: 101
    },
    {
        id: 1004,
        title: '商品D',
        price: 118
    }
];
const handleFunc = (item,index, arr) => item.price < 100
console.log(arr1.findIndex(handleFunc)); // 使用findIndex方法，返回符合条件的最近数组单项的数据的索引，没有符合则默认返回-1

---

map()

作用：
对目标数据进行处理，并返回一个处理后的新数组

应用场景：

需要对原数组进行处理，根据diy处理规则返回新的数组数据

演示C：

const arr1 = [11,22,33];
const handleFunc = (item,index, arr) => item * 100
console.log(arr1.map(handleFunc));

演示D：如果操作的目标数组每个元素都是对象型的，那么处理完毕后返回的新数组的单项数据项只包括return 时参与运算或逻辑判断的key

const arr1 = [
    {
        id: 1001,
        title: '商品A',
        price: 80
    },
    {
        id: 1002,
        title: '商品B',
        price: 90
    },
    {
        id: 1003,
        title: '商品C',
        price: 101
    },
    {
        id: 1004,
        title: '商品D',
        price: 118
    }
];
const handleFunc = (item,index, arr) => item.price * 100
console.log(arr1.map(handleFunc));

演示E:如果想在map处理后返回原数组项所有的key，可以这样

const arr1 = [
    {
        id: 1001,
        title: '商品A',
        price: 80
    },
    {
        id: 1002,
        title: '商品B',
        price: 90
    },
    {
        id: 1003,
        title: '商品C',
        price: 101
    },
    {
        id: 1004,
        title: '商品D',
        price: 118
    }
];
const handleFunc = (item,index, arr) => {
        return {
            id: item.id, // 不修改
            title: item.title += '你好', // 修改标题  当然key title也可以改
            price: item.price * 100 // 修改价格
        }
    }
console.log(arr1.map(handleFunc));

---

reduce()

作用：
可以对数组的每一项元素执行求和，回调函数有自己的固定写法，结果为数组每一项的总和。

适应场景:
计算数组每一项求和的情况

代码演示F:

const arr1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(arr1.reduce(reducer)); // 输出 10

代码演示G:

当然也可以这么写(只是上面的写法从参数变量语义上你能感觉到它的机制)

const arr1 = [1, 2, 3, 4];
const reducer = (a, b) => a + b;

 // 1 + 2 + 3 + 4
console.log(arr1.reduce(reducer)); // 输出 10

  

---