数组方法

数组方法

数组方法1、forEach（）2、map（）3、filter（）4、every（）、 some（）5、reduce（) 总结

 

1、forEach（）

Javascript数组forEach()方法为数组中的每个元素调用一个函数。

        let arr6 = ['a', 'b', 'c', 'd'];
        arr6.forEach(function(item, index, array){
            console.log(item);//数组元素
            console.log(index);//元素索引
            console.log(array);//原数组本身
        });

得到一下结果：

forEach（）函数没有返回值；

---

2、map（）

Javascript数组map()方法创建一个新数组，其结果是在此数组中的每个元素上调用提供的函数。

**map 方法会给原数组中的每个元素都按顺序调用一次 callbackFn 函数。**

callbackFn 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。

因为 map 生成一个新数组，当你不打算使用返回的新数组却使用 map 是违背设计初衷的，请用 forEach 或者 for-of 替代。

如果有以下情形，则不该使用 map：

• 你不打算使用返回的新数组；或

• 你没有从回调函数中返回值。

callbackFn 函数会被自动传入三个参数：数组元素，元素索引，原数组本身。

        let arr7 = [1, 2, 3];
        let new_arr7 = arr7.map(function(item, index, array) {
            return item * item
        })
        console.log(new_arr7)
        console.log(arr7);// 并未改变原数组(比较forEach)
​
​
        const numbers = [1, 4, 9];
        const roots = numbers.map(function(数组元素，元素索引,原数组本身){
            return item * item
        });
​
        // roots 现在是     [1, 2, 3]
        // numbers 依旧是   [1, 4, 9]
​

尝试下面的代码：

 

map（）函数也称映射，将对应的元素按顺序执行callbackFn回调函数，再将这些新产生的新元素组成一个新数组。

因为 map 生成一个新数组，当你不打算使用返回的新数组却使用 map 是违背设计初衷的，请用 forEach 或者 for-of 替代。

大概意思就是如果你不需要对新元素操作，你就用不到该函数。

---

3、filter（）

filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。（过滤筛选)

filter() 为数组中的每个元素调用一次 callbackFn 函数，并利用所有使得 callbackFn 返回 true的元素创建一个新数组。

callbackFn 被调用时传入三个参数：

1. 元素的值

2. 元素的索引

3. 被遍历的数组本身

filter() 不会改变原数组。（同map）

function isBigEnough(value) {
  return value >= 10;
}
​
const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

        let arr8 = [
            {
                name:'a',
                height: 177
            },
            {
                name: 'b',
                height: 188
            },
            {
                name: 'c',
                height: 181
            }
        ]
        let higher = arr8.filter(function(i){
            return i.height > 180
        })
        console.log(higher);
​

find（）找到目标元素并返回的是目标元素。只找到，不找全。

---

4、every（）、 some（）

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

两个都返回布尔值。

every（）每一个元素都满足条件true。

some（）只要有一个元素满足条件true。

---

5、reduce（)

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数（回调函数），每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值。所以如果你不给一个初始值，那么index将从1开始，而不是从0。

• callbackFn

  一个“reducer”函数，包含四个参数：

  previousValue：上一次调用 callbackFn 时的返回值。

  在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。

  就是函数执行一次后的结果值，第一次没执行采用的结果就是你一开始给的初始值。

   

  currentValue：数组中正在处理的元素。

  在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。

   

  currentIndex：数组中正在处理的元素的索引。

  若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始。array：用于遍历的数组。

• initialValue 可选

  作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。

// Array.ruduce(function(previousValue, currentValue,currentIndex){},initialValue)
// 和前面差不多： Array.ruduce(function(previousValue, item,index){ },initialValue)
//ruduce()本身两个参数，第二个参数可选。第一个参数即回调函数里，又有三个参数。
​
​
let sum = [1, 2, 3].reduce(function (previousValue, currentValue) {
  return previousValue + currentValue
}, 0)
// sum is 6
//初始previousValue是0。函数每一次执行都会把结果保存给previousValue,然后去和currentValue相加。
​

总结

到此至少掌握：

• forEach（）、map（）。

• 这几个回调函数的参数类似