简介

 

  数组的遍历方法又称为数组的迭代器方法，迭代器是程序设计中的一种软件设计模式，在js中，我们可以使用它来在数组中遍历而无需关心其内部实现的细节。

 

  以下的遍历方法均不会对原数组产生影响，也就是说，我们如果在内部对其子项进行赋值，并不会修改原数组的值。注：本文不包含普遍for循环，for-of循环，while等遍历数组的方法。

 

方法介绍

 

1.forEach()方法

 

  forEach（参数1，参数2）方法本身可以接收两个参数，第一个参数是一个函数，并且数组中的每一个元素均会调用一遍这个函数（稀疏数组除外）。一般来说，我们只会传入第一个参数（且为必传项），此处也不对其他参数多做介绍。下述其他方法的传参情况与forEach（）相同。

 

  且下述方法中，作为参数传入的函数其本身也有参数值，分别为：数组元素的值，数组元素的索引和数组本身。即：

 

myArray.forEach(

 

    function (数组元素的值，数组元素的索引，数组本身) {

 

    }

 

)

 

补充：function（a） { return a+3} 为没有函数名称的匿名函数， 其可写成箭头函数的形式

 

a => a+3

 

示例:

 

let myArray = [1,2,3];

 

// num=>{} 箭头函数,相当于一个匿名函数

 

// function(num) { num = num * 3 }

 

myArray.forEach(num => {

 

    num = num * 3;

 

});

 

console.log(myArray) //打印结果为[ 1, 2, 3 ]

 

  forEach()方法没有返回值，且没有像普通for循环一样可以终止迭代的break语句，并且正如上文所说，我们在此处对num进行的改变不会更改到myArray数组中。

 

2.map()方法

 

  map()与forEach（）方法不同的点在于，map（）方法的第一个参数函数会接收我们每个数组的元素，并可以返回一个值。而整个map（）方法的返回值就是这个函数的返回值所构成的数组。

 

  例：

 

let myArray = [1,2,3]

 

let result = myArray.map(num => {

 

    num *= 3

 

    return num

 

});

 

console.log(result,"\n原数组",myArray)

 

// 打印结果为

 

// [ 3, 6, 9 ] 

 

// 原数组 [ 1, 2, 3 ]

 

3.filter()

 

  filter()方法也有返回值，但他期望参数函数的返回值是一个boolean类型，也就是说它期望参数函数为断言函数。它的返回值是一个满足条件的myArray中的元素组成的数组。

 

示例：

 

let myArray = [1,2,3]

 

let result = myArray.filter(num => {

 

    num *= 3

 

    return num > 5

 

});

 

console.log(result)

 

//[ 2, 3 ]

 

  我们可以看到num值经过运算后为3、6、9，其中6和9满足大于5的条件。其返回值是数组中的2、3这两个元素，而不是运算后的结果。

 

4.一些非常用方法

 

find（）和 findIndex()

 

  这两个方法与filter（）相似，但他们会在找到第一个满足条件的值时停止迭代，find()方法会返回该元素的值，而findIndex（）方法会返回这个元素在数组中的索引。例：

 

let myArray = [1,2,3]

 

let result = myArray.find(num => {

 

    num *= 3

 

    return num > 5

 

});

 

console.log(result) // 打印值为： 2

 

let myArray = [1,2,3]

 

let result = myArray.findIndex(num => {

 

    num *= 3

 

    return num > 5

 

});

 

console.log(result) // 打印值为： 1

 

every() 和 some()

 

  every（）和some（）函数返回值为boolean类型，亦会使用一个断言函数作为第一个入参，但只有数组中所有元素都满足断言函数的条件时，every（）才会返回true，当有一个元素不满足条件时，every()会停止遍历并返回false。

 

let myArray = [4,1,2,3];

 

let count = 0; // 用于记录遍历的次数

 

let result = myArray.every(num => {

 

    count++;

 

    num *= 3;

 

    return num > 5;

 

});

 

console.log(result,"遍历的次数为",count) 

 

// 打印值为： false 遍历的次数为 2

 

  而some（）函数只要有一个满足条件便会停止遍历，返回true值。

 

let myArray = [4,1,2,3];

 

let count = 0; // 用于记录遍历的次数

 

let result = myArray.some(num => {

 

    count++;

 

    num *= 3;

 

    return num > 5;

 

});

 

console.log(result,"遍历的次数为",count) 

 

// 打印值为： true 遍历的次数为 1

 

  此处需要注意的是 myArray数组的元素经过乘3运算后的结果为1、6、9，其中6和9满足大于5的条件，但其返回的是myArray中的元素，也就是没有经过运算的2和3。（不满足条件的元素不会被返回，此处与map（）不同，map() 返回的数组长度与原数组一样。）

 

对于稀疏数组的处理

 

  稀疏数组定义:

 

稀疏数组就是其元素没有从0开始的索引的数组。正常情况下，数组的length属性表明数组中元素的个数。如果数组是稀疏的，则length属性的值会大于元素个数。

 

  正常的数组如 let myArray = [0,1,2]，这个数组的长度为3，元素个数为3，与数组长度相同，索引依次为0、1、2。

 

  稀疏数组简单实践：

 

let testArray = new Array(10);  //数组长度为10

 

testArray[20] = 1 //数组长度为21

 

console.log(testArray) // 打印结果为 [ <20 empty items>, 1 ]

 

  此时数组长度为21，而元素只有一个，这就变成了一个稀疏数组。而造就稀疏数组的实际应用场景可能在运用delete删除数组元素时发生，如：

 

let myArray = [1,2,3]

 

delete  myArray[1]

 

console.log(myArray,"数组的长度为",myArray.length)

 

console.log(1 in myArray)

 

// 打印结果为

 

// [ 1, <1 empty item>, 3 ] 数组的长度为 3

 

// 索引为1的元素是否存在 false

 

  delete并不会修改数组的长度，也不会改变其他元素的索引值，所以会形成一个稀疏数组。如果想要元素索引值随着数组元素的删减而变化，可以使用splice（）方法。

 

forEach()方法不会遍历稀疏数组中缺失元素

 

let myArray = [4,,2,3];

 

console.log("myArray",myArray)  

 

// 打印值为：myArray [ 4, <1 empty item>, 2, 3 ]

 

let count = 0; // 用于记录遍历的次数

 

myArray.forEach(num => {

 

    count++;

 

});

 

console.log("数组的长度为",myArray.length,"遍历的次数为",count) 

 

// 数组的长度为 4 遍历的次数为 3

 

map()也不会遍历稀疏数组中缺失元素，但其返回值数组与原数组长度相同，且缺失的元素位置也相同

 

let myArray = [4,,2,3];

 

console.log("myArray",myArray)

 

// 打印值为：myArray [ 4, <1 empty item>, 2, 3 ]

 

let count = 0; // 用于记录遍历的次数

 

let result = myArray.map(num => {

 

    count++;

 

    return num*3

 

});

 

console.log("数组的长度为",myArray.length,"遍历的次数为",count,"返回的数组为",result)

 

// 打印值为： 数组的长度为 4 

 

// 遍历的次数为 3 

 

// 返回的数组为 [ 12, <1 empty item>, 6, 9 ]

 

filter（）的返回值不会包含稀疏数组中缺失的元素

 

let myArray = [4,,2,3];

 

console.log("myArray",myArray)

 

// 打印值为：myArray [ 4, <1 empty item>, 2, 3 ]

 

let count = 0; // 用于记录遍历的次数

 

let result = myArray.filter(num => {

 

    count++;

 

    return num>1

 

});

 

console.log("数组的长度为",myArray.length,"遍历的次数为",count,"返回的数组为",result)

 

// 打印值为： 数组的长度为 4

 

// 遍历的次数为 3

 

// 返回的数组为 [ 4, 2, 3 ]