细数 Js 中那些遍历方法使用范围

引言

写代码或算法的时候经常需要使用到循环，es5 及 es6 推出了很多的循环方式，很多循环方式只能在数组或者某种数据类型中才能使用，这就经常导致我们不知道在哪出现了 bug，这里就总结一下循环方式及使用范围。

借用一张图来展开讲：

forEach()

范围：数组

forEach 方法用于调用数组的每个元素，并将元素传递给回调函数。

语法

array.forEach(callbackFn(currentValue, index, arr), thisValue)

function(currentValue, index,arr) 必须。

数组中的每个元素都会执行这个函数

currentValue： 必须。当前元素
index：        可选。当前元素的索引值。
arr：          可选。当前元素所属的数组对象

代码：

let arr = [1, 2, 3, 4, 5]
arr.forEach((item, index, arr) => {
  console.log(index + ':' + item)
  console.log(arr)
})

thisValue 可选。

用来绑定回调函数内部 this 变量（前提是回调函数不能是箭头函数，因为箭头函数没有 this）：

代码：

let arr = [1, 2, 3, 4, 5]
let arr1 = [9, 8, 7, 6, 5]
arr.forEach(function (item, index, arr) {
  console.log(this[index]) //  9 8 7 6 5
}, arr1)

map()

范围：数组

map() 方法会返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。该方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测，它会返回一个新数组，不会改变原始数组。

语法

array.map(function(currentValue,index,arr), thisValue)

该方法的第一个参数为回调函数，他有三个参数：

currentValue： 必需。当前元素
index：        可选。当前元素的索引值。
arr：          可选。当前元素所属的数组对象

let arr = [1, 2, 3];
arr.map((item, index, arr) => {
  console.log(index+":"+item)
  return item+1;
})
// 返回值： [2, 3, 4]

第二个参数用来绑定参数函数内部的 this 变量，可选：

let arr = ['a', 'b', 'c']
;[1, 2].map(function (item, index, arr) {
  console.log(index + ':' + item)
  return this[item]
}, arr)
// 返回值： ['b', 'c']

该方法可以进行链式调用：

let arr = [1, 2, 3]
arr.map((item) => item + 1).map((item) => item + 1)
// 返回值： [3, 4, 5]

every()

范围：数组

该方法会对数组中的每一项进行遍历，只有所有元素都符合条件时，才返回 true，否则就返回 false。

该方法接受一个函数作为参数，该函数有三个参数：

currentValue： 必需。当前元素
index：        可选。当前元素的索引值。
arr：          可选。当前元素所属的数组对象


let arr = [1, 2, 3, 4, 5]
arr.every(item => item > 0)
// 结果： true

some()

范围：数组

该方法会对数组中的每一项进行遍历，只要有一个元素符合条件，就返回 true，否则就返回 false。

该方法接受一个函数作为参数，该函数有三个参数：

currentValue： 必需。当前元素
index：        可选。当前元素的索引值。
arr：          可选。当前元素所属的数组对象


let arr = [1, 2, 3, 4, 5]
arr.some(item => item > 4)
// 结果： true

filter()

范围：数组

filter()方法用于过滤数组，满足条件的元素会被返回。

它的参数是一个回调函数，所有数组元素依次执行该函数，返回结果为 true 的元素会被返回。

该方法会返回一个新的数组，不会改变原数组。

该方法的第一个参数为回调函数，他有三个参数：

currentValue： 必需。当前元素
index：        可选。当前元素的索引值。
arr：          可选。当前元素所属的数组对象

let arr = [1, 2, 3, 4, 5]
arr.filter(item => item > 2)
// 结果：[3, 4, 5]

同样，他也有第二个参数，用来绑定参数函数内部的 this 变量。

我们可以使用 filter()方法来移除数组中的 undefined、null、NAN 等值

let arr = [1, undefined, 2, null, 3, false, '', 4, 0]
arr.filter(Boolean)

reduce()

范围：数组

让数组中的前项和后项做某种计算,并累计最终值

语法

arr.reduce(callback, [initialValue])

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组

callback （执行数组中每个值的函数，包含四个参数）

1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）


initialValue （作为第一次调用 callback 的第一个参数。）

例子

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
console.log(arr, sum);

打印结果：
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

reduceRight()

范围：数组

该方法和的上面的 reduce()用法几乎一致，只是该方法是对数组进行倒序查找的。而 reduce()方法是正序执行的。

var arr = [1, 2, 3, 4]
var sum = arr.reduceRight((prev, cur, index, arr) => {
  console.log(prev, cur, index)
  return prev + cur
}, 5)
console.log(arr, sum)

for…in

for…in 主要用于对数组或者对象的属性进行循环操作。循环中的代码每执行一次，就会对对象的属性进行一次操作。

语法：

for (var in object) {
执行的代码块
}

其中两个参数：

var ：必须。指定的变量可以是数组元素，也可以是对象的属性。
object： 必须。指定迭代的的对象。

var obj = {a: 1, b: 2, c: 3};
for (var i in obj) {
    console.log('键名：', i);
    console.log('键值：', obj[i]);
}

需要注意，该方法不仅会遍历当前的对象所有的可枚举属性，还会遍历其原型链上的属性。

除此之外，该方法遍历数组时候，遍历出来的是数组的索引值，遍历对象的时候，遍历出来的是键值名。

for…of

个人最常用的遍历方法

范围：数组，字符串，Map,Set，类数组除了对象

我感觉 for of 是为了取代 for in 而提出来的，功能更强大

for...of 许遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

语法：

var arr = [{ name: 'bb' }, 5, 'test']
for (item of arr) {
  console.log(item)
}

var arr = ['a', 'b', 'c', 'd']
for (let a in arr) {
  console.log(a) // 0 1 2 3
}
for (let a of arr) {
  console.log(a) // a b c d
}

该方法只会遍历当前对象的属性，不会遍历其原型链上的属性。

注意：

它可以正确响应 break、continue 和 return 语句。

for-of 循环不支持遍历普通对象，因为没有迭代器对象。如果想要遍历一个对象的属性，可以用 for-in 循环

find()

范围：数组

find() 方法返回通过函数内判断的数组的第一个元素的值。该方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时， find() 返回符合条件的元素，之后的值不会再调用执行函数。

如果没有符合条件的元素返回 undefined

注意: find() 对于空数组，函数是不会执行的。该方法并没有改变数组的原始值。

该方法的第一个参数也是一个函数，它有三个参数：

currentValue ：必需。当前元素
index ：可选。当前元素的索引
arr ：可选。当前元素所属的数组对象

let arr = [1, 2, 3, 4, 5]
arr.find(item => item > 2)
// 结果： 3

findIndex()

findIndex() 方法返回传入一个测试函数符合条件的数组第一个元素位置（索引）。该方法为数组中的每个元素都调用一次函数执行：

注意: findIndex() 对于空数组，函数是不会执行的。该方法并没有改变数组的原始值。

该方法的第一个参数也是一个函数，它有三个参数：

currentValue ：必需。当前元素
index ：可选。当前元素的索引
arr ：可选。当前元素所属的数组对象

let arr = [1, 2, 3, 4, 5]
arr.findIndex(item => item > 2)
// 结果： 2

find()和 findIndex()两个方法几乎一样，只是返回结果不同：

find()：返回的是第一个符合条件的值

findIndex：返回的是第一个返回条件的值的索引值

entries()

var fruits = ['Banana', 'Orange', 'Apple', 'Mango']
fruits.entries()

entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

迭代对象中数组的索引值作为 key，数组元素作为 value。

[0, "Banana"]
[1, "Orange"]
[2, "Apple"]
[3, "Mango"]

# 细数 Js 中那些遍历方法使用范围

# 引言

# forEach()

# function(currentValue, index,arr) 必须。

# 数组中的每个元素都会执行这个函数

# thisValue 可选。

# 用来绑定回调函数内部 this 变量（前提是回调函数不能是箭头函数，因为箭头函数没有 this）：

# map()

# every()

# some()

# filter()

# reduce()

# reduceRight()

# for…in

# for…of

# find()

# findIndex()

# entries()

细数 Js 中那些遍历方法使用范围

引言

forEach()

function(currentValue, index,arr) 必须。

数组中的每个元素都会执行这个函数

thisValue 可选。

用来绑定回调函数内部 this 变量（前提是回调函数不能是箭头函数，因为箭头函数没有 this）：

map()

every()

some()

filter()

reduce()

reduceRight()

for…in

for…of

find()

findIndex()

entries()