内附思维导图

在ES6中新增了很多有利于快速开发的内容,比如我们的箭头函数、解构赋值、拓展剩余运算符、class创建类、模版字符串……等等;

同时数组和对象也新增了一些较为常用的方法,由于之前写的数组中的16种常用方法说过还有一些方法后续补充,但一直到现在还没有兑现承诺,今天小芝麻就先把欠下的还上😄

思维导图

51.数组中常用的方法【补充reduce、filter、flat...】 - 图1

一、reduce

1、定义:

  • 接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减(是个数递减,不是值),最终计算为一个值。
    (一般用于求和;计数,本次返回的结果会作为下一次的上一次进行计算。)

2、@params:callback,初始值

  • callback(必须):给数组中的每一个元素依次执行传入的回调函数,不包括数组中被删除或从未被赋值的元素;

    • 回调函数的形参:接受四个参数:
      • 初始值(或者上一次回调函数的返回值),(必须)
      • 当前元素值,(必须)
      • 当前索引,(可选)
      • 调用 reduce 的数组。(可选)
  • 初始值(可选):作为第一次调用callback函数时的第一个参数的值。

    • 如果没有提供初始值,则将使用数组中的第一个元素。
    • 在没有初始值的空数组上调用 reduce 将报错。

51.数组中常用的方法【补充reduce、filter、flat...】 - 图2

注意:

  • 1、回调函数第一次执行时,accumulatorcurrentValue的取值有两种情况:如果调用reduce()时提供了initialValueaccumulator取值为initialValuecurrentValue取数组中的第一个值;
  • 2、如果没有提供 initialValue,那么accumulator取数组中的第一个值,currentValue取数组中的第二个值。
  • 3、如果没有提供initialValuereduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

3、@return:

函数累计处理的结果

4、是否改变原数组:

不改变

5、使用方法:

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

  • 用【】表示可以省略

6、应用

应用1:求和

  • (不设置初始值时)
  1. [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  2. return accumulator + currentValue;
  3. });
  4. 复制代码

callback 被调用四次,每次调用的参数和返回值如下表:

51.数组中常用的方法【补充reduce、filter、flat...】 - 图3reduce返回的值就是最后一次回调返回值10

  • (设置初始值时)
  1. [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  2. return accumulator + currentValue;
  3. }, 10 );
  4. 复制代码

callback 被调用五次,每次调用的参数和返回值如下表:

51.数组中常用的方法【补充reduce、filter、flat...】 - 图4

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

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

  1. var initialValue = 0;
  2. var sum = [{x: 1}, {x:2}, {x:3}].reduce(
  3. (accumulator, currentValue) => accumulator + currentValue.x
  4. ,initialValue
  5. );
  6. console.log(sum) // logs 6
  7. 复制代码

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

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

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

二、filter

1、定义:过滤

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

2、@params:callback,thisArg

  • callback(必须):用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。

    • 回调函数的形参:它接受三个参数:
      • 元素的值,(必须)
      • 元素的索引,(可选)
      • 被遍历的数组本身,(可选)
  • thisArg(可选):改变this指向

    • 执行 callback 时,用于 this 的值。

51.数组中常用的方法【补充reduce、filter、flat...】 - 图5

3、@return:

一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。

4、是否改变原数组:

不改变原数组;

5、使用方法:

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

  • 用【】表示可以省略

注意:

  • 1、filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。
  • 2、在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。
  • 3、如果已经存在的元素被改变了,则他们传入 callback 的值是 filter 遍历到它们那一刻的值。
  • 4、被删除或从来未被赋值的元素不会被遍历到。

6、应用:

应用1: 筛选排除所有较小的值

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

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

应用2: 在数组中搜索

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

  1. var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
  2. /**
  3. * 基于搜索条件(查询)的数组筛选项
  4. */
  5. function filterItems(query) {
  6. return fruits.filter(function(el) {
  7. return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  8. })
  9. }
  10. console.log(filterItems('ap')); // ['apple', 'grapes']
  11. console.log(filterItems('an')); // ['banana', 'mango', 'orange']
  12. 复制代码

参考自:MDN,Array.prototype.filter()

三、find

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

1、定义:

从左到右循环,直到找到满足条件的那一项,把这项返回;如果没有找到,那么返回undefined;

2、@params:callback,thisArg

  • callback(必须):在数组每一项上执行的函数,

    • 回调函数的形参:它接受三个参数:
      • 元素的值,(必须)
      • 元素的索引,(可选)
      • 被遍历的数组本身,(可选)
  • thisArg(可选):改变this指向

    • 执行 callback 时,用于 this 的值。

51.数组中常用的方法【补充reduce、filter、flat...】 - 图6

3、@return:

数组中第一个满足所提供测试函数的元素的值,否则返回 undefined。

4、是否改变原数组:

不改变原数组

5、使用方法:

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

  • 用【】表示可以省略

注意:

  • 1、在第一次调用callback函数时会确定元素的索引范围,因此在 find方法开始执行之后添加到数组的新元素将不会被 callback函数访问到。
  • 2、如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变,那么当callback函数访问到它时,它的值是所访问到的当前值。
  • 3、被删除的元素仍旧会被访问到,但是其值已经是undefined了。

6、应用:

寻找数组中的质数

下面的例子是从一个数组中寻找质数(如果找不到质数则返回undefined

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

参考自:MDN,Array.prototype.find()

四、some

1、定义:

在数组中只要有一项条件成立就返回true,如果都不成立就返回false

2、@params:

  • callback(必须):在数组每一项上执行的函数,

    • 回调函数的形参:它接受三个参数:
      • 元素的值,(必须)
      • 元素的索引,(可选)
      • 被遍历的数组本身,(可选)
  • thisArg(可选):改变this指向

    • 执行 callback 时,用于 this 的值。

3、@return:

  • true
  • false

4、是否改变原数组:

不改变原数组

5、使用方法:

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

  • 用【】表示可以省略

注意:

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

五、every

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

1、定义:

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

2、@return:

找到第一个返回false的值;就不再向后继续查找;返回一个布尔值;如果所有的成员的回调都返回true,这个结果就是true

六、flat

1、定义:

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

2、@params:

  • depth(可选) : 深度

    • 指定要提取嵌套数组的结构深度,默认值为 1。

3、@return:

一个包含数组与子数组中所有元素的新数组。

4、是否改变原数组:

不改变原数组

5、使用方法:

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

  1. var arr1 = [1, 2, [3, 4]];
  2. arr1.flat();
  3. // =>[1, 2, 3, 4]
  4. var arr2 = [1, 2, [3, 4, [5, 6]]];
  5. arr2.flat();
  6. // =>[1, 2, 3, 4, [5, 6]]
  7. var arr3 = [1, 2, [3, 4, [5, 6]]];
  8. arr3.flat(2);
  9. // =>[1, 2, 3, 4, 5, 6]
  10. 复制代码

注意:

  • 1、使用 Infinity,可展开任意深度的嵌套数组
  1. //使用 Infinity,可展开任意深度的嵌套数组
  2. var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
  3. arr4.flat(Infinity);
  4. // => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  5. 复制代码
  • 2、flat() 方法会移除数组中的空项:
  1. var arr4 = [1, 2, , 4, 5];
  2. arr4.flat();
  3. // => [1, 2, 4, 5]
  4. 复制代码

参考自:MDN

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