JavaScript的map/reduce/filter/sort 高阶函数

最新推荐文章于 2022-07-08 18:13:54 发布
最新推荐文章于 2022-07-08 18:13:54 发布
阅读量260 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31751569/article/details/77795029
版权 
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
	
	// 高阶函数讲解
	
	//map 方法
	var arr = [1,2,3,4,5];
	var arr2 = arr.map(function(x){return x*10;});
	console.log(arr2); //[10,20,30,40,50]
	console.log(typeof arr2); //Object
	//第二种写法
	function foo(x){
		return x*10;
	}
	var arr3 = arr.map(foo);
	console.log(arr3);


	// reduce 方法
	var num = arr.reduce(function(x,y){return x+y;});
	console.log(num); // 15
	console.log(typeof num); // Number
	// 同样第二种写法
	


	// sort方法
	
	var arr4 = [1,2,10,20];
	arr4.sort();
	console.log(arr4); // [1,10,2,20] 
	//这是因为sort方法默认先把所有元素转化为String再排序，所以10 在 2 的前面
	
	function cmp(x,y){
		if(x<y) return -1;
		if(x>y) return 1;
		if(x==y) return 0;
	};

	arr4.sort(cmp);
	console.log(arr4);

	// 比较字符串，忽略大小写
	function cmp2(s1,s2){
		x = s1.toUpperCase();
		//x.toLowerCase();
		y = s2.toUpperCase();
		if(x<y) return -1;
		if(x>y) return 1;
		if(x==y) return 0;
	}

	var arr4 = ['Google', 'apple', 'Microsoft'];
	arr4.sort(cmp2);
	console.log(arr4);

	var arr5 = ['a','b','g','c'];
	arr5.sort();
	console.log(arr5);

	//友情提示： sort方法会直接对arr进行修改
	//map reduce filter不会
	

	// filter方法 去除偶数
	arr6 =[1,2,3,4,5,6,7,8,9,10];
	var arr7 = arr6.filter(function(x){return x%2 != 0});
	console.log(arr7);


	// 如何去除空字符串
	arr8 = ['A','','','D',null,undefined];
	function foo9(x){
		return x && x.trim();	
	}
	var arr9 = arr8.filter(foo9);
	console.log(arr9); // A D

	</script>
</body>
</html>

ilvseyinfu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js终止map循环_JavaScript 用 for 循环太 low？你是不是有什么误解
weixin_39821189的博客
12-03 1万+
今天要吐槽下，我时不时地看到有些文章说“循环语句不好，你应该用 filter，map 和 reduce ”——每次看到有文章鼓吹，所有需要循环的场景一律用这几个函数式方法，我都恨得牙痒痒。没错，这些函数式方法确实有它们的用途。我不是说你不能用它们，而是说不能不管三七二十一，到处滥用。在许多情况下，如果你想写性能好的代码，for 循环基本上是更好的选择。map, filter 和reduce等方法的...
Javascript 中的map/reduce
weixin_34402090的博客
03-16 281
看到一个提问的回答巧妙地使用了map/reduce操作，很优雅，所以来学习和总结一下javascript自带的map/reduce的使用技巧，文章不会讲的很深，纯当科普一下知识点，如有解释的不正确的地方，欢迎指正。 1.map 1.1 方法概述 map() 方法通过对原数组中的每个元素进行一定的操作（共同调用一个方法），返回一个新的数组。...
js方法 提前结束循环
qq_44376306的博客
07-08 2119
2. Array.forEach() 3. for...in... 4. Array.map() 5. Array.some() 6. Array.every() 7. Array.filter()
JS - map
[暂停使用]任先阳
12-03 174
const statusMapData = [ [1, [11, [12]]], [2, [21, [22]]], [3, [31, [32]]], ]; const statusMap = new Map(statusMapData); /** * statusMap * 0 =&gt; [11,[12]] * 1 =&gt; [21,[...
8个问题看你是否真的懂 JS
前端技术小哥
07-25 171
译者：前端小智链接：https://juejin.im/post/5d2d146bf265da1b9163c5c9原文链接：https://dev.to/aman_sin...
详解JavaScript 高阶函数
10-14
在JavaScript中，有几种常见的高阶函数，如`Array.map()`、`Array.reduce()`、`Array.filter()`和`Array.flat()`，它们在处理数组数据时特别有用。 `Array.map()` 是一种高阶函数，用于对数组中的每个元素应用一个...
Javascript中的高阶函数介绍
10-24
主要介绍了Javascript中的高阶函数介绍,本文讲解了什么是高阶函数、Javascript的高阶函数、还原高阶函数、高阶函数使用实例等内容,需要的朋友可以参考下
深入学习JavaScript 高阶函数
10-16
JavaScript中的高阶函数是编程中的一个核心概念，它在函数式编程中占据着重要的地位。高阶函数的主要特点是能够处理函数作为输入参数或者输出结果，这使得代码更加灵活且易于复用。在JavaScript中，由于函数本身被视...
JavaScript高阶函数_动力节点Java学院整理
10-19
主要介绍了JavaScript高阶函数，详细讲解了什么是高阶函数和高阶函数的用法，有兴趣的可以了解下
Javascript 高阶函数使用介绍
10-24
主要介绍了Javascript 高阶函数使用介绍,需要的朋友可以参考下
js终止map循环_JavaScript中对数组几种常见循环方式性能对比
weixin_39966909的博客
12-03 1086
数组Array循环遍历//for循环for(let i = 0; i < 1000; i++) {//执行操作}// while 循环while(true) {//需要有终止条件才会停止执行}//map 循环arr.map(v => {//执行操作})// forEach 循环arr.forEach(v => {//执行操作})以上几种循环...
js终止map循环_【JS】浅析项目中常用到的循环：some、every、map、filter
weixin_39669761的博客
12-03 4454
每一种遍历都有不同的适用场景，下面就来简单的总结一下：some()是对数组中每一项遍历，只要有一项返回true，则返回true，即：有true为true举个栗子：var 打印结果为：1，2，3，4 函数返回true，遍历到第四次的时候遇到了一个符合表达式的之后跳出循环，整体结果返回trueevery()是对数组中每一项遍历，每一项返回true,则返回true。如果有一项为false，则整体为fal...
使用JavaScript的Map/Reduce函数将一个字符串转换成数值
GTboy100的博客
08-18 818
一、题目  在不使用JavaScript内置的parseInt()和Number函数的情况下，利用map和reduce函数实现一个string2int()函数，其功能是将一个数字字符串转换成对应的数值。  思路：把一个字符串’13579’先变成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以写出一个把字符串转换为对应数值的函数。 二、代码（思路） 1.把数字字符串变成字符串数组 var string = '13579'; var result = str.split(''); co
js中map，reduce，filter的使用
10 种最常见的 Javascript 错误
05-05 2571
在页面显示数据时我们经常需要进行数据处理以后然后再让它在页面显示出来，在javascript中我们常用的函数有map（），reduce（），filter（）；map（）的使用    map 方法会迭代数组中的每一个元素，并根据回调函数来处理每一个元素，最后返回一个新数组。注意，这个方法不会改变原始数组。    举个栗子当一个数组需要把每个元素都进行加3处理时，使用map方法就很简单了var old...
js return continue break区别
weixin_30376453的博客
07-11 740
面向对象编程语法中我们会碰到break ,continue, return这三个常用的关键字，那么关于这三个关键字的使用具体的操作是什么呢？我们在使用这三关键字的时候需要注意和需要理解的规则是什么呢？让我们开始介绍吧： js编程语法之break语句： break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句。 由于它是用来退出循环或者switch语句，所以只有...
js数组map方法
weixin_30408165的博客
12-26 932
https://www.cnblogs.com/xuan52rock/p/4460949.htmlmap定义和方法map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。map()方法按照原始数组元素顺序依次处理元素。注意：map不会对空数组进行检测map不会改变原始数组arr.map(function(currentValue，index，arr),thisVal...
JS中的 map, some, every, forEach 用法总结，跳出循环 return false break不起作用
热门推荐
唯一的切慕，唯一的诗歌……
07-16 4万+
~ 之前对于forEach方法了解的不多，在使用时，突然发现return true fasle break没有反应，仔细一看，还是大有文章，遂记…… 当想跳出循环可以使用every 和 some方法，下面是简单的总结 every 当内部return false时跳出整个循环（return true;也是需要写） //every()当内部return false时跳出整个循环 let li...
js中map和for循环的迭代终止
weixin_43497384的博客
05-31 2万+
map循环和for循环如果不加return false都迭代不会终止，会一直执行到循环结束 如下图 this.state.tab.map((res)=>{ if(res.name.includes(this.state.value)){ console.log(123) }else{ ...
高阶函数的reduce
最新发布
06-24
在 JavaScript 中，`Array.prototype.reduce()` 就是一个典型的高阶函数，它用于对数组中的所有元素应用一个累加操作，从而简化了数据的处理过程。 `reduce()` 方法执行一个由您提供的 reducer 函数（高阶函数），...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值