数组中经常使用的方法【补充reduce、filter、flat...】｜内附思惟导图

在ES6中新增了不少有利于快速开发的内容，好比咱们的箭头函数、解构赋值、拓展剩余运算符、class建立类、模版字符串......等等；

同时数组和对象也新增了一些较为经常使用的方法，因为以前写的数组中的16种经常使用方法说过还有一些方法后续补充，但一直到如今尚未兑现承诺，今天小芝麻就先把欠下的还上😄

思惟导图

1、reduce

一、定义：

• 接收一个函数做为累加器，数组中的每一个值（从左到右）开始缩减（是个数递减，不是值），最终计算为一个值。

  （通常用于求和；计数,本次返回的结果会做为下一次的上一次进行计算。）

二、@params：callback，初始值

• callback(必须)：给数组中的每个元素依次执行传入的回调函数，不包括数组中被删除或从未被赋值的元素；
  • 回调函数的形参：接受四个参数：
    • 初始值（或者上一次回调函数的返回值），（必须）
    • 当前元素值，（必须）
    • 当前索引，（可选）
    • 调用 reduce 的数组。（可选）
• 初始值(可选)：做为第一次调用 callback函数时的第一个参数的值。
  • 若是没有提供初始值，则将使用数组中的第一个元素。
  • 在没有初始值的空数组上调用 reduce 将报错。

注意：

• 一、回调函数第一次执行时，accumulator 和currentValue的取值有两种状况：若是调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；
• 二、若是没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。
• 三、若是没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。若是提供initialValue，从索引0开始。

三、@return：

函数累计处理的结果

四、是否改变原数组：

不改变

五、使用方法:

数组.reduce(callback(accumulator, currentValue, 【index, array】), 【initialValue】)

• 用【】表示能够省略

六、应用

应用1：求和

• (不设置初始值时)

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});
复制代码

callback 被调用四次，每次调用的参数和返回值以下表：

由 reduce返回的值就是最后一次回调返回值 10。

• (设置初始值时)

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){ 
    return accumulator + currentValue; 
}, 10 );
复制代码

callback 被调用五次，每次调用的参数和返回值以下表：

应用2：累加对象数组里的值

要累加对象数组中包含的值，必须提供初始值，以便各项正确经过你的函数。

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    ,initialValue
);

console.log(sum) // logs 6
复制代码

应用3: 将二维数组转化为一维

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b);
  },
  []
);
// flattened is [0, 1, 2, 3, 4, 5]
复制代码

关于reduce暂且说这些，更多内容可参考MDN，Array.prototype.reduce()，里面写的很详细，小芝麻也是参考的MDN整理的😄

2、filter

一、定义：过滤

返回数组中条件成立项，把不成立的过滤掉，若是回调函数返回true，就把这一项放到新数组中返回

二、@params：callback，thisArg

• callback(必须)：用来测试数组的每一个元素的函数。返回 true 表示该元素经过测试，保留该元素，false 则不保留。
  • 回调函数的形参：它接受三个参数：
    • 元素的值，（必须）
    • 元素的索引，（可选）
    • 被遍历的数组自己，（可选）
• thisArg(可选)：改变this指向
  • 执行 callback 时，用于 this 的值。

三、@return：

一个新的、由经过测试的元素组成的数组，若是没有任何数组元素经过测试，则返回空数组。

四、是否改变原数组：

不改变原数组;

五、使用方法：

var newArray = 数组.filter(callback(element, 【index, array】), 【thisArg】)

• 用【】表示能够省略

注意：

• 一、filter 遍历的元素范围在第一次调用 callback 以前就已经肯定了。
• 二、在调用 filter 以后被添加到数组中的元素不会被 filter 遍历到。
• 三、若是已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。
• 四、被删除或历来未被赋值的元素不会被遍历到。

六、应用：

应用1: 筛选排除全部较小的值

下例使用 filter 建立了一个新数组，该数组的元素由原数组中值大于 10 的元素组成。

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44] 
复制代码

应用2: 在数组中搜索

下例使用 filter() 根据搜索条件来过滤数组内容。

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/** * 基于搜索条件（查询）的数组筛选项 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']
复制代码

参考自：MDN，Array.prototype.filter()

3、find

对应的findIndex方法，与find用法都相同，只不过返回的第一次知足条件哪一项的索引，就不单独介绍啦😄

一、定义：

从左到右循环，直到找到知足条件的那一项，把这项返回；若是没有找到,那么返回undefined；

二、@params：callback，thisArg

• callback(必须)：在数组每一项上执行的函数，
  • 回调函数的形参：它接受三个参数：
    • 元素的值，（必须）
    • 元素的索引，（可选）
    • 被遍历的数组自己，（可选）
• thisArg(可选)：改变this指向
  • 执行 callback 时，用于 this 的值。

三、@return：

数组中第一个知足所提供测试函数的元素的值，不然返回 undefined。

四、是否改变原数组：

不改变原数组

五、使用方法：

数组.find(callback(element, 【index, array】), 【thisArg】)

• 用【】表示能够省略

注意：

• 一、在第一次调用callback函数时会肯定元素的索引范围，所以在 find方法开始执行以后添加到数组的新元素将不会被 callback函数访问到。
• 二、若是数组中一个还没有被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是所访问到的当前值。
• 三、被删除的元素仍旧会被访问到，可是其值已是undefined了。

六、应用：

寻找数组中的质数

下面的例子是从一个数组中寻找质数（若是找不到质数则返回undefined）

function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) { return false; } } return element > 1; } console.log([4, 6, 8, 12].find(isPrime)); // undefined, 没有找到 console.log([4, 5, 8, 12].find(isPrime)); // 5 复制代码

参考自：MDN，Array.prototype.find()

4、some

一、定义：

在数组中只要有一项条件成立就返回true，若是都不成立就返回false

二、@params：

• callback(必须)：在数组每一项上执行的函数，
  • 回调函数的形参：它接受三个参数：
    • 元素的值，（必须）
    • 元素的索引，（可选）
    • 被遍历的数组自己，（可选）
• thisArg(可选)：改变this指向
  • 执行 callback 时，用于 this 的值。

三、@return：

• true
• false

四、是否改变原数组：

不改变原数组

五、使用方法：

数组.some(callback(element, 【index, array】), 【thisArg】)

• 用【】表示能够省略

注意：

• 一、some() 遍历的元素的范围在第一次调用 callback. 前就已经肯定了。
• 二、在调用 some() 后被添加到数组中的值不会被 callback 访问到。
• 三、若是数组中存在且还未被访问到的元素被 callback 改变了，则其传递给 callback 的值是 some() 访问到它那一刻的值。
• 四、已经被删除的元素不会被访问到。

5、every

用法基本与some 相同，与some 的区别就是:some是找到一个符合的就返回true，every是找到一个不符合的就返回false

一、定义：

数组的每项都必须知足回调函数的条件(返回true)，只要有一个不知足，就返回false

二、@return：

找到第一个返回false的值;就再也不向后继续查找；返回一个布尔值；若是全部的成员的回调都返回true，这个结果就是true

6、flat

一、定义：

按照一个可指定的深度递归遍历数组，并将全部元素与遍历到的子数组中的元素合并为一个新数组返回。

二、@params：

• depth(可选) ： 深度
  • 指定要提取嵌套数组的结构深度，默认值为 1。

三、@return:

一个包含数组与子数组中全部元素的新数组。

四、是否改变原数组：

不改变原数组

五、使用方法：

var newArray = 数组.flat([depth])

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// =>[1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// =>[1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// =>[1, 2, 3, 4, 5, 6]
复制代码

注意：

• 一、使用 Infinity，可展开任意深度的嵌套数组

//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
复制代码

• 二、flat() 方法会移除数组中的空项:

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// => [1, 2, 4, 5]
复制代码

参考自：MDN

数组的方法补充就到这里了，还有一些不是很经常使用的方法，没有在这里一一例举啦～～