JS之map、forEach、filter

Array.prototype.map

一、map()概念

定义：map()创建一个新数组，其中的元素是原数组元素调用一个函数处理后的结果。

会按照原数组的顺序处理元素。不会对空数组进行检测。“创建”，也就是说它不会改变原数组的内容。处理数组时，数组元素的范围是在 callback 方法第一次调用之前确定。在 map()执行过程中：原数组中新增加的元素将不会被 callback 访问到；若已经存在的元素被改变或删除了，则它们的传递到 callback 的值是 map()遍历到它们的那一时刻的值；而被删除的元素将不会被访问到。当不打算使用返回的新数组，或没有从回调函数中返回值时，不建议用map()。没有办法中止或者跳出map() 循环，即不可用return、break。使用箭头函数，thisArg 参数会被忽略。

二、语法

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

currentValue: 必选，当前元素的的值。index: 可选，当前元素的索引.arr: 可选，当前元素所属的数组对象。thisValue: 可选，对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

三、举个简单的栗子

var arr = [1,2,3,4,5]; var map01 = arr.map(x=>x*x); console.log(map01); //(5) [1, 4, 9, 16, 25]

四、易错的例子

【MDN】map 方法中的 callback 函数只有一个参数是必需的，就是正在被遍历的当前数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。看这个例子：

["1", "2", "3"].map(parseInt);

结果是[1,NaN,NaN],而不是[1,2,3]!！ 这是因为parseInt函数是有两个参数的，第一个是要转为整数的表达式，第二个是转换的基数（一个在2~36范围内的数），而在这里第二个参数本来是回调函数中的index参数。 parseInt(string, radix) -> map(parseInt(value, index)) first iteration (index is 0): parseInt(“1”, 0); // 忽略0，结果：1 second iteration (index is 1): parseInt(“2”, 1); // 不可能有1进制，结果：NaN third iteration (index is 2): parseInt(“3”, 2); // 二进制得不到3，结果：NaN

解决办法：

写一个在内部已经指定了parseInt方法转换进制的函数；使用箭头函数语法,其实就是为parseInt()指定只有一个参数 ['1', '2', '3'].map( str => parseInt(str) ); 改为使用number(),但要注意二者的区别。

五、兼容旧环境

map被添加到第5版的ECMA-262标准中；因此，它可能不存在于标准的所有实现中。可以通过在脚本开头插入以下代码来解决此问题 查看MDN

Array.prototype.forEach()

一、概念

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

升序为数组中含有效值的每一项执行一次callback函数。那些已删除或者未初始化的项将被跳过。同样不会改变原数组的值（但是callback可能会改变原数组）。总是返回 undefined 值，并且不可链式调用！遍历的范围在第一次调用 callback 前就会确定。调用 forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了（例如使用 shift()），之后的元素将被跳过。没有办法中止或者跳出 forEach() 循环，即不可用return、break。使用箭头函数，thisArg 参数会被忽略。

二、语法

array.forEach(callback(currentValue, index, array) { // do something }, thisArg)

参数含义与map()的相同

三、例子

来看一个迭代时被删除的例子：

var words = ['one', 'two', 'three', 'four']; words.forEach(function(word) { console.log(word); if (word === 'two') { words.shift(); } }); // one two four

因为第二项被删除，后面的项都往前移了，three变成刚刚已经遍历过的索引为1的项，被跳过。

使用箭头函数的例子：

var arr = [1, 2, 3]; arr.forEach((v, i, arr) => { //或用 map console.log(this); }, arr) // window // window // window

四、兼容旧版本

forEach 是在第五版本里被添加到 ECMA-262 标准的；这样它可能在标准的其他实现中不存在，可以在调用 forEach 之前 插入下面的代码，在本地不支持的情况下使用 forEach()。该算法是 ECMA-262 第5版中指定的算法。查看MDN

map与forEach的区别

由上可以看到，它们基本上可以互换。最主要的区别在于，map()会分配内存空间存储新数组并返回，不会改变原来的数组，而forEach()不返回，但允许callback更改原始数组的元素。

Array.prototype.filter()

一、概念

定义：filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

返回一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。不会改变原数组。遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。

二、语法[MDN]

var newArray = arr.filter(callback(element, index, array), thisArg) callback: 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。element: 数组中当前正在处理的元素。index: 可选,正在处理的元素在数组中的索引。array: 可选,调用了 filter 的数组本身。thisArg: 可选,执行 callback 时，用于 this 的值。否则，callback 的 this 值在非严格模式下将是全局对象，严格模式下为 undefined。callback 函数最终观察到的 this 值是根据通常函数所看到的 "this"的规则确定的。

三、简单的例子

var f = [1, 2, 3, 4].filter(function(f) { return f >= 3; }); console.log(f); // [3, 4]

四、兼容旧版本

filter 被添加到 ECMA-262 标准第 5 版中，因此在某些实现环境中不被支持。可以把下面的代码插入到脚本的开头来解决此问题，该代码允许在那些没有原生支持 filter 的实现环境中使用它。该算法是 ECMA-262 第 5 版中指定的算法。查询MDN

Array.prototype.some()&Array.prototype.every()

那顺便讲一下some()和every()吧hhh~

一、语法

array.some(function(currentValue,index,arr),thisValue) array.every(function(currentValue,index,arr),thisValue)

同样也只有currentValue是必需的，含义参考以上方法的参数含义，很好理解啦。

二、概念

两个方法都返会布尔值。some()测试数组中是否存在某个元素符合回调函数，找到这个元素之后返回true，并且不会再继续测试之后的元素，否则返回false。every()测试数组中是否所有元素都符合回调函数，若找到一个元素不符合，则返回false，并且不再测试之后的元素，否则返回true。两个方法都不会改变原数组。两个方法都不会对空数组进行检测。在es5时才被加入为标准，要考虑兼容问题（IE、firefox）