数组 forEach、filter、map 理解

RyanHoo 发布于2019-08-20 18:58 / 2844人阅读

摘要：调用时使用参数。返回表示保留该元素通过测试，则不保留。返回值一个新的通过测试的元素的集合的数组范例参数用来测试数组的每个元素的函数。执行时的用于的值。返回值一个新数组，每个元素都是回调函数的结果。

参考文档

Array MDN

forEach、filter、map 1. forEach 1.1 参数 1.1.1 callback

用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。
返回true表示保留该元素（通过测试），false则不保留。

1.1.2 thisArg

可选。执行 callback 时的用于 this 的值。

1.2 返回值

一个新数组，每个元素都是回调函数的结果。

1.3 范例

var arr = [1 , 2 , 3 , 4];
var thisArg = {name: "grayVTouch"};
arr.forEach(function(val , index , arr){
    arr[index] = val.toUpperCase();
    console.log(this); // {name: "grayVTouch"}
} , thisArg);

console.log(arr);

2. filter 2.1 参数 2.1.1 callback

用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。
返回true表示保留该元素（通过测试），false则不保留。

2.1.2 thisArg

可选。执行 callback 时的用于 this 的值。

2.2 返回值

一个新的通过测试的元素的集合的数组

2.3 范例

var arr = [1 , 2 , 3 , 4];
var thisArg = {name: "grayVTouch"};
var res = arr.filter(function(val , index , arr){
    console.log(this); // {name: "grayVTouch"}
    
    if (val > 3) {
        return true;
    }
    
    return false;
} , thisArg);

console.log(arr);
console.log(res);

3. map 3.1 参数 3.1.1 callback

用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。
返回true表示保留该元素（通过测试），false则不保留。

3.1.2 thisArg

可选。执行 callback 时的用于 this 的值。

3.2 返回值

一个新数组，每个元素都是回调函数的结果。

3.3 范例

var arr = [1 , 2 , 3 , 4];
var thisArg = {name: "grayVTouch"};
var res = arr.map(function(val , index , arr){
    console.log(this); // {name: "grayVTouch"}
    return val + "数据测试";
} , thisArg);

console.log(arr);
console.log(res);

云服务器 GPU云服务器 js数组遍历foreach php数组和map js 传递map数组 js将数组转成map

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84959.html

JavaScript es5中的Array常用的forEach、map、filter、indexOf

摘要：的的区别和相同之处就是数组的遍历循环，回调支持三个参数，第个是遍历的数组内容第个是对应的数组索引，第个是数组本身他是没有返回值得，不需要再下面，更进一步，除了接受一个必须的回调函数参数，还可以接受一个可选的上下文参数改变回调函数里面 Array的forEach、map的区别和相同之处 forEach 1、 forEach就是数组的遍历、循环，回调支持三个参数，第1个是遍历的数组内容；...

xuexiangjys 2019-08-20 15:37 评论0 收藏0
forEach、map、filter、find、sort、some等易错点整理

摘要：最近手头上做了一个很大的后台管理项目，前端对复杂数据的处理要求颇高，也确实让自己发现了很多之前被忽视的细节。鸣人佐助卡卡西佐助佐助佐助但是很遗憾及更早版本也不支持。最近手头上做了一个很大的后台管理项目，前端对复杂数据的处理要求颇高，也确实让自己发现了很多之前被忽视的细节。在此特整理出来，希望不熟悉的朋友们们以后可以绕开我踩的这些坑。本文初衷在于帮助大家梳理一些数组操作上的重点和易...

AJie 2019-08-23 16:50 评论0 收藏0
JavaScript学习之数组(下)

摘要：数组篇方法函数可以将函数作为参数传入，并将数组中每个元素代入函数进行处理返回，返回一个新的数组可以看出可以传入两个参数，第一个参数中函数可以填入三个参数，数组的元素，数组的索引，数组本身第二个参数用来绑定回调函数内部的注意点当元素为空位，，数组篇 map()方法 map函数可以将函数作为参数传入，并将数组中每个元素代入函数进行处理返回，返回一个新的数组 arr.map(functio...

Labradors 2019-08-23 12:14 评论0 收藏0
Array和常用API

摘要：返回值自写一下函数这就是一个简单的自写的一个函数，代表操作的数组，代表用来操作数组的函数，传入数组和函数。返回值返回排序后的数组。分隔符指定一个字符串来分隔数组的每个元素。生成新数组元素的函数，使用三个参数。什么是数组在阮一峰的《JavaScript 标准参考教程（alpha）》中的解释是：数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表...

coordinate35 2019-08-22 18:41 评论0 收藏0
如何在 JS 循环中正确使用 async 与 await

摘要：蛤当你尝试在循环中使用时，事情就会变得复杂一些。这意味着循环中的应该按顺序执行。在循环中使用首先，使用对数组进行遍历。在中使用如果在中使用始终返回数组，这是因为异步函数总是返回。在循环中使用当你使用时，希望筛选具有特定结果的数组。 async 与 await 的使用方式相对简单。蛤当你尝试在循环中使用await时，事情就会变得复杂一些。想阅读更多优质文章请猛戳GitHub博客,一年...

liujs 2019-08-23 17:57 评论0 收藏0