js map、forEach、filter、reduce、some、every

请参考 MDN

1.map方法

概述:map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

语法:

1
2
3
let array = arr.map(function callback(currentValue, index, array) {
// Return element for new_array
}[, thisArg])

参数

  • callback:生成新数组元素的函数,使用三个参数:
    • currentValue:callback 的第一个参数,数组中正在处理的当前元素。
    • index:callback 的第二个参数,数组中正在处理的当前元素的索引。
    • array:callback 的第三个参数,map 方法被调用的数组。
  • thisArg:可选的。执行 callback 函数时 使用的this 值。
  • 返回值:一个新数组,每个元素都是回调函数的结果。

  • 描述:map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

  • callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身。

  • 如果 thisArg 参数有值,则每次 callback 函数被调用的时候,this 都会指向 thisArg 参数上的这个对象。如果省略了 thisArg 参数,或者赋值为 null 或 undefined,则 this 指向全局对象 。

  • map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)。

  • 使用 map 方法处理数组时,数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中:原数组中新增加的元素将不会被 callback 访问到;若已经存在的元素被改变或删除了,则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值;而被删除的元素将不会被访问到。

1
2
3
4
5
6
7
8
9
10
11
var kvArray = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}];
var reformattedArray = kvArray.map(function(obj){
var rObj = {};
rObj[obj.key] = obj.value; // 这步一开始感到奇怪,对象居然也可以用数组下标的方式取到,自己试了下果然可以
return rObj;
})
reformattedArray; // [{1: 10}, {2: 20}, {3: 30}]
kvArray; // [{key: 1, value: 10}, {key: 2, value: 20}]
// 对象用类似数组下标的方式取值 []
var test = {a: 1};
test['a']; // 1

注意

1
2
3
4
5
6
7
8
9
10
11
12
["1", "2", "3"].map(parseInt); // [1, NaN, NaN]而不是[1,2,3],why?
// parseInt其实是有两个参数的,只是平常我们将它第二个参数省略了
// parseInt的第二个参数其实是 进制数,而我们用 map 时会传递三个参数
// 第三个参数会被 parseInt 忽略,但是第二个传的是 index(下标),
// parseInt 会将传过来的 index 当作进制数,所以结果是 [1, NaN, NaN]
//
//
//
function returnInt(element) {
return parseInt(element, 10);
}
['1', '2', '3'].map(returnInt); // [1, 2, 3]

2.forEach方法

概述:forEach() 方法对数组的每个元素执行一次提供的函数。

语法:

1
2
3
4
array.forEach(callback(currentValue, index, array){
//do something
}, this)
array.forEach(callback[, thisArg])

参数:

  • callback:为数组中每个元素执行的函数,该函数接收三个参数:
    • currentValue(当前值):数组中正在处理的当前元素。
    • index(索引):数组中正在处理的当前元素的索引。
    • array:forEach()方法正在操作的数组。
  • thisArg:可选参数。当执行回调 函数时用作this的值(参考对象)。
  • 返回值:undefined

  • 描述:forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数,那些已删除(使用delete方法等情况)或者未初始化的项将被跳过(但不包括那些值为 undefined 的项)(例如在稀疏数组上)。

  • callback 函数会被依次传入三个参数:数组当前项的值、数组当前项的索引、数组对象本身

  • 如果给forEach传递了thisArg参数,当调用时,它将被传给callback 函数,作为它的this值。否则,将会传入 undefined 作为它的this值。callback函数最终可观察到this值,这取决于 函数观察到this的常用规则。

  • forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变,则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()) ,之后的元素将被跳过 - 参见下面的示例。

  • forEach() 为每个数组元素执行callback函数;不像map() 或者reduce() ,它总是返回 undefined值,并且不可链式调用。典型用例是在一个链的最后执行副作用。

如果数组在迭代时被修改了,则其他元素会被跳过。

下面的例子输出”one”, “two”, “four”。当到达包含值”two”的项时,整个数组的第一个项被移除了,这导致所有剩下的项上移一个位置。因为元素 “four”现在在数组更前的位置,”three”会被跳过。 forEach()不会在迭代之前创建数组的副本。

1
2
3
4
5
6
7
8
9
10
var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
console.log(word);
if (word === "two") {
words.shift();
}
});
// one
// two
// four

3.reduce方法

概述:reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。
语法:arr.reduce([callback, initialValue])
参数

  • callback:执行数组中每个值的函数,包含四个参数:
    • previousValue:上一次调用回调函数返回的值,或者是提供的初始值(initialValue)
    • currentValue:数组中当前被处理的元素
    • currentIndex:当前被处理元素在数组中的索引, 即currentValue的索引.如果有initialValue初始值, 从0开始.如果没有从1开始.
    • array:调用 reduce 的数组
  • initialValue: 可选参数, 作为第一次调用 callback 的第一个参数。
  • 返回值:最后一次调用回调函数返回的结果

  • 描述:回调函数第一次执行时,previousValue 和 currentValue可能是两个不同值其中的一个,如果reduce有initialValue参数,那么 previousValue 等于 initialValue ,并且currentValue 等于数组中的第一个值;如果reduce没有 initialValue 参数,那么previousValue 等于数组中的第一个值,currentValue等于数组中的第二个值。

  • 注意: 如果没有 initialValue 参数, reduce 从 index 为1开始执行回调函数, 跳过第一个index. 如果有initialValue参数, reduce 将从index为 0 开始执行回调。

  • 如果数组是空的并且没有initialValue参数, 将会抛出TypeError错误. 如果数组只有一个元素并且没有初始值initialValue, 或者有initialValue但数组是空的, 这个唯一的值直接被返回而不会调用回调函数.

1
2
3
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
}, 0); // 10

4.filter方法

概述:filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法:

1
var new_array = arr.filter(callback[, thisArg])

参数:

  • callback:用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。返回true表示保留该元素(通过测试),false则不保留。
  • thisArg:可选。执行 callback 时的用于 this 的值。

返回值: 一个新的通过测试的元素的集合的数组

  • 描述:filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过,不会被包含在新数组中。

  • callback 被调用时传入三个参数:元素的值、元素的索引、被遍历的数组

  • 如果为 filter 提供一个 thisArg 参数,则它会被作为 callback 被调用时的 this 值。否则,callback 的 this 值在非严格模式下将是全局对象,严格模式下为 undefined。

  • filter 不会改变原数组。

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

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

5.every方法

概述:every() 方法测试数组的所有元素是否都通过了指定函数的测试。

语法:arr.every(callback[, thisArg])

参数

  • callback:用来测试每个元素的函数。
  • thisArg:执行 callback 时使用的 this 值。
  • 描述:every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 true,every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。

  • callback 被调用时传入三个参数:元素值,元素的索引,原数组。

  • 如果为 every 提供一个 thisArg 参数,则该参数为调用 callback 时的 this 值。如果省略该参数,则 callback 被调用时的 this 值,在非严格模式下为全局对象,在严格模式下传入 undefined。

  • every 不会改变原数组。

  • every 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 every 之后添加到数组中的元素不会被 callback 访问到。如果数组中存在的元素被更改,则他们传入 callback 的值是 every 访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。

1
2
3
4
5
6
7
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

6.some方法

概述:some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

语法:arr.some(callback[, thisArg])

参数

  • callback:用来测试每个元素的函数。
  • thisArg:执行 callback 时使用的 this 值。
  • 描述:some 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some 将会立即返回 true。否则,some 返回 false。callback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。

  • callback 被调用时传入三个参数:元素的值,元素的索引,被遍历的数组。

  • 如果为 some 提供了一个 thisArg 参数,将会把它传给被调用的 callback,作为 this 值。否则,在非严格模式下将会是全局对象,严格模式下是 undefined。

  • some 被调用时不会改变数组。

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

1
2
3
4
5
6
7
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
passed = [12, 5, 8, 1, 4].some(isBigEnough);
// passed is true