JavaScript数组迭代方法

前言：

数组的迭代方法是很基础的东西，经常出现在我们开发中，比如常见的map,forEach等等，不常用的reduce，reduceRight等。

本着不熟悉即是不会的想法，借此整理一些基础。

迭代这个概念有些拗口，涉及其他概念，迭代和可迭代对象。有空再研究详述。这里可以认为是遍历（循环）方法。

 

数组的迭代方法有：

map,

forEach,

filter,

reduce,

reduceRight,

every,

some,

indexof,

lastIndexOf,

find,

findIndex,

 

 

map(callbackfn, thisArg?)  -- 迭代每个元素，并根据其传入的回调方法的返回值，返回一个新数组。

具体：map(callbackfn: (value: number, index: number, array: Array) => any, thisArg?: any): Array;

根据上面类型注释可以看出，map接受两个参数，

第一个是必填参数：是一个回调函数，有返回值。该回调参数接收三个值，第一个值是遍历的元素值，第二个值是迭代元素的索引，第三个参数是迭代数组本身。

第二个是可选参数，用于传入回调函数作为this

注意：1、map不会改变原数组，但是如果引用类型下，如：对象下的属性改变会相应改变。

　　　2、map不会对没有值的数组来执行函数

例：

const num = [1, 2, 3, 4, 5];
const num1 = num.map((item, index, array) => {
    return item * 2
});

// num1 [2,4,6,8,10]

 

forEach(callbackfn, thisArg?) -- 迭代每个元素，并根据将其传入其回调函数

具体：forEach(callbackfn: (value: number, index: number, array: Array) => any, thisArg?: any): void;

根据上面类型注释可以看出，forEach接受两个参数，

第一个是必填参数：是一个回调函数。该回调参数接收三个值，第一个值是遍历的元素值，第二个值是迭代元素的索引，第三个参数是迭代数组本身。

第二个是可选参数，用于传入回调函数作为this

注意：1、forEach不会改变原数组，但是如果引用类型下，如：对象下的属性改变会相应改变。

　　　2、forEach不会对没有值的数组来执行函数

 例：

const num = [1, 2, 3, 4, 5];
const num1 = num.forEach((item, index, array) => {
    console.log(item)
    return item * 2
});
 
// log 
// 1
// 2
// 3
// 4
// 5

// forEach 无返回值，故如下
// num1 = undefined

 

filter(callbackfn, thisArg?)-- 迭代每个元素，并根据其回调函数判断，并根据其条件过滤元素，返回一个新的数组

具体：filter(callbackfn: (value: number, index: number, array: Array) => boolean, thisArg?: any): Array;

根据上面类型注释可以看出，filter接受两个参数，

第一个是必填参数：是一个回调函数，有返回值，且返回值会被转为Boolean。该回调参数接收三个值，第一个值是遍历的元素值，第二个值是迭代元素的索引，第三个参数是迭代数组本身。

第二个是可选参数，用于传入回调函数作为this

注意：1、filter不会改变原数组，但是如果引用类型下，如：对象下的属性改变会相应改变。

　　　2、filter不会对没有值的数组来执行函数

　　　3、其回调函数需要返回一个Boolean值，非布尔值将隐式转换

例：

const num = ['yes', 'no', 'yes', 'no', 'no'];
const allYes = num.filter(myFunction);

function myFunction(value, index, array) {
  return value === 'yes';
}

// allYes 为 ['yes','yes']

 

reduce(callbackfn, initialValue?)-- 从数组左到右迭代每个元素，并根据其回调函数产生的返回的值，传入下一次回调中的首个参数。

具体：reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;

根据上面类型注释可以看出，reduce接受两个参数，

第一个是必填参数：是一个回调函数，有返回值，返回值为泛型。该回调参数接收四个值，第一个值是初始值或者上次回调返回的值，第二个值是遍历的元素值，第三个值是迭代元素的索引，第四个参数是迭代数组本身。

第二个是可选参数，可以作为初始值传输进入

注意：1、reduce() 方法能够接受一个初始值：

　　　2、reduce() 方法在每个数组元素上运行函数，以生成单个值。

　　　3、reduce() 方法在数组中从左到右工作。

　　　4、reduce() 方法不会减少原始数组。

例：

const num = [1, 2, 3, 4, 5];
const sum = num.reduce(myFunction);

function myFunction(total, value, index, array) {
    return total + value;
}

// sum 为 15

 

reduceRight(callbackfn, initialValue?) -- 与reduce同理，唯一不同则是遍历从右往左执行。
与reduceRight基本相同，不作举例。

 

every(predicate, thisArg?) -- 确定数组的所有成员是否满足指定的测试

every(predicate: (value: T, index: number, array: T[]) => any, thisArg?: any):Booearn

根据上面类型注释可以看出，every接受两个参数，有返回值，返回值是布尔值。

可以直接返回false，强制跳出遍历，否则将执行完遍历

第一个是必填参数：是一个回调函数，有返回值，且返回值会被转为Boolean。该回调参数接收三个值，第一个值是遍历的元素值，第二个值是迭代元素的索引，第三个参数是迭代数组本身。

第二个是可选参数，用于传入回调函数作为this

例：

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

// allOver18 为false

 

some(predicate, thisArg?) -- 确定数组的某一成员是否满足指定的测试

some(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;

根据上面类型注释可以看出，some接受两个参数，有返回值，返回值是布尔值。

可以在回调方法中直接返回true来跳出遍历，否则将执行遍历，直到满足条件。

第一个是必填参数：是一个回调函数，有返回值，且返回值会被转为Boolean。该回调参数接收三个值，第一个值是遍历的元素值，第二个值是迭代元素的索引，第三个参数是迭代数组本身。

第二个是可选参数，用于传入回调函数作为this

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
    console.log(index)
    return value > 18;
}

// log，只遍历了第一个元素就达成条件
// 45

// someOver18  为 true

 

indexOf(searchElement, fromIndex?) -- 返回数组中第一次出现的值的索引

indexOf(searchElement: T, fromIndex?: number): number;

根据上面类型注释可以看出，indexOf接受两个参数，有返回值，返回值是number类型, 如果搜索到，则返回索引值，否则返回-1

第一个是必填参数：是一个泛型值，用来当做被搜索元素。

第二个是可选参数，用于当做遍历的起始索引。

var numbers = [45, 4, 9, 16, 25];
var searchIndex= numbers.indexOf(4);

// searchIndex 为1

var searchIndex= numbers.indexOf(4123123);

// 查找不到
// searchIndex 为 -1

 

indexlastOf(searchElement, fromIndex?) -- 从数组的最后一个元素开始搜索，并返回搜索到值的索引

indexlastOf() 与 indexOf()作用相似，这里不做赘述。

 

find(predicate, thisArg?) --  返回通过测试函数的第一个数组元素的值。

find(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): T | undefined;

根据上面类型注释可以看出，find接受两个参数，返回值为泛型或者是undefined

第一个是必填参数：是一个回调函数，有返回值， 返回值未知。该回调参数接收三个值，第一个值是遍历的元素值，第二个值是迭代元素的索引，第三个参数是迭代数组本身。

第二个是可选参数，用于传入回调函数作为this

例：

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

// first 为 25

 

find(predicate, thisArg?) --  返回通过测试函数的第一个数组元素的索引。

findIndex(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): number;

根据上面类型注释可以看出，find接受两个参数，返回值为泛型或者是undefined

第一个是必填参数：是一个回调函数，有返回值， 返回值未知。该回调参数接收三个值，第一个值是遍历的元素值，第二个值是迭代元素的索引，第三个参数是迭代数组本身。

第二个是可选参数，用于传入回调函数作为this

例：

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

// first 为 3