数组中的 find,filter,forEach,map 四个语法很相近, 为了方便记忆, 真正的掌握它们的用法, 所以就把它们总结在一起喽.
find(): 返回通过测试的数组的第一个元素的值
在第一次调用 callback 函数时会确定元素的索引范围, 因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到. 如果数组中一个尚未被 callback 函数访问到的元素的值被 callback 函数所改变, 那么当 callback 函数访问到它时, 它的值是将是根据它在数组中的索引所访问到的当前值. 被删除的元素仍旧会被访问到.
语法:
array.find(function(value, index, arr),thisValue)
value: 必须, 代表当前元素, 其他四个参数都是可选, index 代表当前索引值, arr 代表当前的数组, thisValue 代表传递给函数的值, 一般用 this 值, 如果这个参数为空, undefined 会传递给 this 值
返回值: 返回符合测试条件的第一个数组元素的值, 如果没有符合条件的则返回 undefined.
- var arr = [1,2,3,4,5,6,7];
- var ar = arr.find(function(elem){
- return elem>5;
- });
- console.log(ar);//6
- console.log(arr);//[1,2,3,4,5,6,7]
find()方法为数组中的每个元素都调用一次函数执行, 当数组中的元素在测试条件时返回 true,find()返回符合条件的元素, 之后的值不会再执行函数. 如果没有符合条件的元素则返回 undefined.
filter(): 创建一个新数组, 新数组中的元素是通过检查指定数组中符合条件的所有元素
filter 遍历的元素范围在第一次调用 callback 之前就已经确定了. 在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到. 如果已经存在的元素被改变了, 则他们传入 callback 的值是 filter 遍历到它们那一刻的值. 被删除或从来未被赋值的元素不会被遍历到.
语法:
array.filter(function(value, index, arr),thisValue)
value: 必须, 代表当前元素, 其他四个参数都是可选, index 代表当前索引值, arr 代表当前的数组, thisValue 代表传递给函数的值, 一般用 this 值, 如果这个参数为空, undefined 会传递给 this 值
返回值: 返回数组, 包含了符合条件的所有元素, 如果没有符合条件的则返回空数组
- var arr = [1,2,3,4,5,6,7];
- var ar = arr.filter(function(elem){
- return elem>5;
- });
- console.log(ar);//[6,7]
- console.log(arr);//[1,2,3,4,5,6,7]
map(): 返回一个新数组, 数组中的元素为原始数组元素调用函数处理后的值, map()方法按照原始数组元素顺序依次处理元素
map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数, callback 每次执行后的返回值 (包括 undefined) 组合起来形成一个新数组. callback 函数只会在有值的索引上被调用, 那些从来没被赋过值或者使用 delete 删除的索引则不会被调用.
使用 map 方法处理数组时, 数组元素的范围是在 callback 方法第一次调用之前就已经确定了. 在 map 方法执行的过程中, 原数组中新增加的元素将不会被 callback 访问到, 若已经存在的元素被改变或删除了, 则他们传递到 callback 的值是 map 方法遍历到他们的那一刻的值, 而被删除的元素将不会被访问到.
语法:
array.map(function(value, index, arr),thisValue)
value: 必须, 代表当前元素, 其他四个参数都是可选, index 代表当前索引值, arr 代表当前的数组, thisValue 代表传递给函数的值, 一般用 this 值, 如果这个参数为空, undefined 会传递给 this 值
返回值: 返回一个新数组, 数组中的元素为原始数组元素调用函数处理后的值
- var arr = [1,2,3,4,5,6,7];
- var ar = arr.map(function(elem){
- return elem*4;
- });
- console.log(ar);//[4, 8, 12, 16, 20, 24, 28]
- console.log(arr);//[1,2,3,4,5,6,7]
forEach(): 用于调用数组每个元素, 并将元素传递给回调函数(注意没有办法跳出或终止 forEach 语句, 除非抛出异常)
forEach 遍历的范围在第一次调用 callback 前就会确定. 调用 forEach 后添加到数组中的项不会被 callback 访问到. 如果已经存在的值被改变, 则传递给 callback 的值是 forEach 遍历到他们那一刻的值. 已删除的项不会被遍历到
语法:
array.forEach(function(value, index, arr),thisValue)
value: 必须, 代表当前元素, 其他四个参数都是可选, index 代表当前索引值, arr 代表当前的数组, thisValue 代表传递给函数的值, 一般用 this 值, 如果这个参数为空, undefined 会传递给 this 值
返回值: undefined
- var arr = [1,2,3,4,5,6,7];
- var sum = 0;
- var ar = arr.forEach(function(elem){
- sum+=elem*4;
- });
- console.log(ar);//undefined
- console.log(arr);//[1,2,3,4,5,6,7]
- console.log(sum);//112
forEach()返回值为 undefined, 里面即便有 return 语句, 返回值依然是 undefined
嗯, 现在总结一下
从上面的内容我们可以看出, 上面的四个语法以及参数的意义是一样的, 而且都不会对空数组进行检测, 也不会改变原始数组
现在说说各自的意义:
find()方法主要用来返回数组中符合条件的第一个元素(没有的话, 返回 undefined)
filter()方法主要用来筛选数组中符合条件的所有元素, 并且放在一个新数组中, 如果没有, 返回一个空数组
map()方法主要用来对数组中的元素调用函数进行处理, 并且把处理结果放在一个新数组中返回(如果没有返回值, 新数组中的每一个元素都为 undefined)
forEach()方法也是用于对数组中的每一个元素执行一次回调函数, 但它没有返回值(或者说它的返回值为 undefined, 即便我们在回调函数中写了 return 语句, 返回值依然为 undefined)
更多数组方面的知识点击 MDN
来源: http://www.bubuko.com/infodetail-3040538.html