map、forEach与filter实例详解

一、Js自带的map()方法
1.方法概述
map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
2.格式说明

var newArray = ["1","2","3"].map(fucntion(e,i,arr){return parseInt(e,10)})

map中回调函数中的第一个参数为：当前正在遍历的元素
map中回调函数中的第二个参数为：当前元素索引
map中回调函数中的第三个参数为：原数组本身

3.使用说明
3.1 支持return返回值；
3.2 return是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份数组中的对应项改变了）
3.3 map只能对元素进行加工处理，产生一个新的数组对象。而不能用它来进行筛选（筛选用filter），为什么不能，看个例子就知道了：
4.例子
4.1 在字符串中使用
在一个String上使用map方法获取字符串中每个字符所对应的ASCII码组成的数组

var map = Array.prototype.map
var a = map.call("Hello World", function(e){return e.charCodeAt(0);})
// a的值为[72,101,108,108,111,32,87,111,114,108,100]

5.易犯错的点

5.1 很多时候，map给回调函数传的是一个值，但是也有可能传2个、3个值，例如下面的例子

var map = Array.prototype.map
var a = map.call("Hello World", function(e){return e.charCodeAt(0);})
// a的值为[72,101,108,108,111,32,87,111,114,108,100]

为什么会这样，因为parseInt就是一个函数，它就是作为map的一个回调函数，parseInt接收两个参数，一个是String，一个是进制

上面的函数就可以化为：

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

即

["1","2","3"].map(function(string, radix){return parseInt(string, radix)})
// 所以才返回结果为：[1, NaN, NaN]

6.与map相关

6.1 Map对象

es6提供一个对象Map，看看这个Map建的对象到底是啥东西

它是一个对象，size是它的属性，里面的值封装在[[Entries]]这个数组里面

myMap.set(1, "a"); // 相当于java的map.put();
myMap.set(2, "b");
myMap.set(3, "c");
myMap.size();
myMap.get(1);
myMap.get(2);
myMap.get(3);

二、Js自带的forEach()方法
1.方法概述
forEach()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
2.格式说明
forEach方法中的function回调有三个参数，

第一个参数为：当前正在遍历的元素
第二个参数为：当前元素索引
第三个参数为：原数组本身

[].forEach(function(value, index, array))

3.使用说明
3.1 这个方法没有返回值，仅仅是遍历数组中的每一项，不对原来数组进行修改
但是可以自己通过数组索引来修改原来的数组
3.2 forEach()不能遍历对象，可以使用for in
4.缺点
4.1 您不能使用break语句中断循环，也不能使用return语句返回到外层函数
4.2 ES5推出的，实际性能比for还弱
5.例子
5.1 通过数组索引改变原数组

var obj = [1,2,3,4,5,6]
var res = obj.forEach(function(item, index, arr) {arr[index] = item * 10;
})
console.log(res); // --> undefined
console.log(obj); // --> [10,20,30,40,50,60]

5.2 如果数组在迭代的时候被修改，则当前元素与前面的元素会跳过。因为forEach()不会在迭代之前创建数组的副本

var words = ['1', '2', '3', '4'];
words.forEach(function(word) {console.log(word);if (word === '2') {words.shift();}
});
// 1
// 2
// 4

6. 与forEach相关

6.1 $.each 与 for in

可遍历数组，可遍历对象

6.1.1遍历数组

var arr = [1，2，3，4，5]
var res = $.each(arr, function(index, value){console.log(index, value);
})
console.log(res); // 返回值，被遍历的函数

6.1.2遍历对象

var obj = {name: "psg", age: 22, gender: "male"};
// for in 遍历
for(var key in obj) {console.log(key, obj[key]);
}
// $.each 遍历
$.each(obj, function(key, value) {console.log(key, value);
})

三、Js自带的filter()方法
1.方法概述
filter()方法是对原数组进行过滤筛选，产生一个新的数组对象
2.注意事项
2.1 filter()不会对空数组进行检测（如果对空数组进行筛选，返回值位undefined）
2.2 filter()不会改变原始数组
2.3 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组
3.格式说明
forEach方法中的function回调有三个参数，

第一个参数为：当前正在遍历的元素
第二个参数为：当前元素索引
第三个参数为：原数组本身

[].filter(function(value, index, array)， thisValue)

4.例子

4.1 在一个Array中，删除偶数，只保留奇数

var arr = [1, 2, 3, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function(x) {return x % 2 !== 0;
});
r; // [1，3，5，9，15]

4.2 把一个Array中的空字符串删掉

var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function(e) {return s && s.trim(); // 注意：IE9一下的版本没有trim()方法
});
r; // ['A', 'B', 'C']

4.3 巧妙去除Array的重复元素

var r, arr = ['A', 'B', 'C', 'D', 'B', 'A']
r = arr.filter(function(e, i, self) {return self.indexOf === i;
})
console.log(r); // --> ['A', 'B', 'C', 'D']

4.4 筛选素数

function get_primes(arr) {var i;return arr.filter(function (element) {var flag = true;if (element < 2) {flag = false;} else {for (var i = 2; i < element; i++) {if (element % i == 0) {flag = false;break;}}}return flag;})
}

觉得帮助到你的点赞、收藏一下吧

需要更多教程，微信扫码即可

map、forEach与filter实例详解相关推荐

jetty java 实例_java 在Jetty9中使用HttpSessionListener和Filter实例详解
这篇文章主要介绍了java 在Jetty9中使用HttpSessionListener和Filter的相关资料,需要的朋友可以参考下 java 在Jetty9中使用HttpSessionListene ...
【配置映射】—Entity Framework实例详解
前两篇博文中的配置属性和配置关系都是配置映射,配置属性是属性的映射,配置关系式关系的映射,本篇从讲讲实体的映射. 首先,配置实体映射到表,使用ToTable方法,它接受两个参数,第一个参数是表的名称, ...
怎样在两个局域网内共享一台打印机。常用网络命令及命令实例详解
怎样在两个局域网内共享一台打印机怎样在两个局域网内共享一台打印机我们公司有两间办公室,原先布线的时候用一个路由器延伸出多个接口预埋在墙里并做上插头,IP地址是自动分配的,网关是192.168.0. ...
【查询】—Entity Framework实例详解
Entity Framework 查询使用集成查询,简称LINQ.LINQ是一个查询框架,并不限于Entity Framework使用,同样不限于数据库.LINQ Provider 负责将LINQ查询 ...
java中将json字符串_Java中JSON字符串与java对象的互换实例详解
在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JSON等,JSON作为一个轻量级的数据格式比xml效率要高,XML需要很多的标签,这无疑占据了网络流量,JSON在这方面则做的很好, ...
微信小程序php后台支付,微信小程序支付功能实现PHP实例详解
微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
Java中JSON字符串与java对象的互换实例详解
这篇文章主要介绍了在java中,JSON字符串与java对象的相互转换实例详解,非常不错,具有参考借鉴价值,需要的朋友可以参考下在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JS ...
php mysql PDO 查询操作的实例详解
php mysql PDO 查询操作的实例详解 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 ...
c语言编程输入螺旋数组,C语言经典题目螺旋矩阵实例详解
C语言经典题目螺旋矩阵实例详解 C语言经典题目螺旋矩阵 //N阶螺旋矩阵 #include #include int main() { int N,i,j,n,num=1; int a[10][ ...

map、forEach与filter实例详解

map、forEach与filter实例详解相关推荐

最新文章

热门文章