ES6数组遍历之forEach,map和filter

在之前我们需要去循环数组,通常使用的是for循环,去循环数组的下标,而在ES6中提供了一种新的方式进行遍历数组!在看这个之前我们先对比一下之前的遍历方式!

let phone=['小米','三星','苹果','一加','乐视','OPPO','VIVO','魅族','联想'];
for(var i=0;i<=phone.length;i++){
    console.log(phone[i])
}

forEach

我们可以使用ES6提供forEach进行循环,forEach循环实例

			let phone=['小米','三星','苹果','一加','乐视','OPPO','VIVO','魅族','联想'];
			phone.forEach((item,index,arr)=>{
				
				console.log(item+"手机真好用!"+arr)
			
			})

运行结果

可以使用foreach进行循环,然后再执行一个函数,函数的第一个参数是数组的每一项,第二个参数是数组的索引(index),第三表示改元素所在数组的全部数据(整个数组数据)

map

除此之外ES6还提供一个数组遍历的方式,map()这个map和上面的forEach有何区别呢?我们看一下代码分析

let phone=['小米','三星','苹果','一加','乐视','OPPO','VIVO','魅族','联想'];
let newphone=phone.map((x)=>{
	return x+'手机'
	console.log(x)
})
	console.log(phone,newphone)

运行结果

map方法和forEach有点类似,但是这个map方法三个参数和forEach一样,但是map返回的数组不会替换掉原数组,可以使用新的变量名接收这个新生成的数组!

filter

ES6还有一个数组的筛选方法,可以根据数据中数据进行筛选!

var result=[60,58,31,70,55,43,21,18,98,50,42,31,15,76,50,48,63,80,73,61];
			let jige=result.filter((x)=>{
				return x>=60;
			})
			console.log(jige)

    打印结果:

这个和forEach,map一样可以接收三个参数,和map一样返回的数组不会替换原数组,可以使用新数组接收,在return 可以设置返回的条件!

看完上面三种数组ES6新方法,下面看一下这个小结吧,对比一下三者的异同!

小结: forEach,map,filter都在对象内接收一个函数,这个函数都可以接收三个参数,第一个表示数组的子项,第二个表示数组的索引(index),第三表示遍历数组所在的数组全部数据!map,和filterreturn返回的新数组不会替换原数组,需要接收一个新变量存储新的数组!而filter的return可以设置筛选条件用于数组数据的筛选!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏布尔

想起温习一下JS中的this apply call arguments

很多时候讲到语言入门,大家会认为就是要了解一下语言的语法、数据类型和常用函数。这一课对于所有的计算机专业的毕业生来说都可以自学,然而在最近的实践中(带了两个实习...

21310
来自专栏达摩兵的技术空间

a>b的那些事

经常会遇到对比两个值大小关系的逻辑,常规的处理中我们都是处理两个数字或者数字类型的字符串。那么这里进行延伸拓展的练习,来避免一些开发中的采坑。

671
来自专栏技术专栏

python3入门与实践(六):函数式编程

一定程度下lambda可以替换命令式编程的函数,reduce可以替换命令式编程的循环

1001
来自专栏技术专栏

Scala入门与进阶(五)- 模式匹配

811
来自专栏Python小屋

当Python列表遇上复合赋值运算符+=

首先感谢集美大学蔡莉白老师发现这个问题并与我沟通交流,我在蔡老师提供的代码基础上又稍作扩展和补充。 对于列表x而言,x += y和x = x+y并不等价,在一定...

2863
来自专栏PHP实战技术

解构赋值,你不能不懂!

14510
来自专栏北京马哥教育

从Zero到Hero,一文掌握Python关键代码

本文整体梳理了 Python 的基本语法与使用方法,并重点介绍了对机器学习十分重要且常见的语法,如基本的条件、循环语句,基本的列表和字典等数据结构,此外还介绍...

2997
来自专栏北京马哥教育

Python正则表达式的七个使用范例

作为一个概念而言,正则表达式对于Python来说并不是独有的。但是,Python中的正则表达式在实际使用过程中还是有一些细小的差别。 本文是一系列关于Pyth...

3385
来自专栏aCloudDeveloper

全排列(含递归和非递归的解法)

全排列在近几年各大网络公司的笔试中出现的比较频繁 首先来看看题目是如何要求的。 用C++写一个函数, 如 Foo(const char *str), 打印出 s...

3209
来自专栏编程坑太多

js数组、json、js对象的区别与联系

1984

扫码关注云+社区