当前位置:首页 > 日记 > 正文

浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结

浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结

1.map

有返回值,返回一个新的数组,每个元素为调用func的结果。

let list = [1, 2, 3, 4, 5];let other = list.map((d, i) => {  return d * 2;});console.log(other);// print: [2, 4, 6, 8, 10]

2.filter

有返回值,返回一个符合func条件的元素数组

let list = [1, 2, 3, 4, 5];let other = list.filter((d, i) => {  return d % 2;});console.log(other);// print: [1, 3, 5]

3.some

返回一个boolean,判断是否有元素符合func条件,如果有一个元素符合func条件,则循环会终止。

let list = [1, 2, 3, 4, 5];list.some((d, i) => {  console.log(d, i);  return d > 3;});// print: 1,0 2,1 3,2 4,3// return false

4.every

返回一个boolean,判断每个元素是否符合func条件,有一个元素不满足func条件,则循环终止,返回false。

let list = [1, 2, 3, 4, 5];list.every((d, i) => {  console.log(d, i);  return d < 3;});// print: 1,0 2,1 3,2// return false

5.forEach

没有返回值,只针对每个元素调用func。

优点:代码简介。

缺点:无法使用break,return等终止循环。

let list = [1, 2, 3, 4, 5];let other = [];list.forEach((d, i) => {  other.push(d * 2);});console.log(other);// print: [2, 4, 6, 8, 10]

6.for in

for-in循环实际是为循环”enumerable“对象而设计的,for in也可以循环数组,但是不推荐这样使用,for–in是用来循环带有字符串key的对象的方法。

缺点:只能获得对象的键名,不能直接获取键值。

var obj = {a:1, b:2, c:3};for (var prop in obj) { console.log("obj." + prop + " = " + obj[prop]);}// print: "obj.a = 1" "obj.b = 2" "obj.c = 3"

7.for of

for of为ES6提供,具有iterator接口,就可以用for of循环遍历它的成员。也就是说,for of循环内部调用的是数据结构的Symbol.iterator方法。

for of循环可以使用的范围包括数组、Set和Map结构、某些类似数组的对象(比如arguments对象、DOM NodeList对象)、后文的Generator对象,以及字符串。

有些数据结构是在现有数据结构的基础上,计算生成的。比如,ES6的数组、Set、Map都部署了以下三个方法,调用后都返回遍历器对象。

entries

entries() 返回一个遍历器对象,用来遍历[键名, 键值]组成的数组。对于数组,键名就是索引值;对于Set,键名与键值相同。Map结构的iterator接口,默认就是调用entries方法。

keys

keys() 返回一个遍历器对象,用来遍历所有的键名。

values

values() 返回一个遍历器对象,用来遍历所有的键值。

这三个方法调用后生成的遍历器对象,所遍历的都是计算生成的数据结构。

// 字符串let str = "hello";for (let s of str) { console.log(s); // h e l l o}// 遍历数组let list = [1, 2, 3, 4, 5];for (let e of list) {  console.log(e);}// print: 1 2 3 4 5// 遍历对象obj = {a:1, b:2, c:3};for (let key of Object.keys(obj)) { console.log(key, obj[key]);}// print: a 1 b 2 c 3

说明:对于普通的对象,for...in循环可以遍历键名,for...of循环会报错。

一种解决方法是,使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组。

// entrieslet arr = ['a', 'b', 'c'];for (let pair of arr.entries()) { console.log(pair);}// [0, 'a']// [1, 'b']// [2, 'c']

以上所述是小编给大家介绍的浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

react router 4.0以上的路由应用详

react router 4.0以上的路由应用详

路由,详解,电脑软件,react,router,本文介绍了react router 4.0以上的路由应用,分享给大家,具体如下:在4.0以下的react router中,嵌套的路由可以放在一个router标签中,形式如下,嵌套的路由也直接放在一起。<Route component={App}> <Route path=…

利用js查找数组中指定元素并返回该

利用js查找数组中指定元素并返回该

元素,查找,索引,示例,组中,前言这篇文章主要给大家介绍的是利用js查找数组中指定元素并返回该元素的所有索引的相关资料,文中给出了详细的示例代码,下面话不多说,来看看详细的代码示例吧。示例代码//在数组中查找所有出现的x,并返回一个包含匹…

PPT2007中怎样设置若隐若现的半透

PPT2007中怎样设置若隐若现的半透

设置,半透明,若隐若现,背景,效果,  半透明背景效果与水印效果大同小异,给我们一种若隐若现的朦胧美。此效果,不仅可以让文件显得更加的有创意,而且在PPT中还可以为幻灯片增色。以下是小编为您带来的关于PPT2007中设置若隐若现的半透明背景效…

利用Angular+Angular-Ui实现分页(代

利用Angular+Angular-Ui实现分页(代

分页,代码,简单,电脑软件,Angular,今天我们来看看一种只实现分页没有查询的例子吧,先看效果:采用了Angular-UI中的分页组件,关于Angular-UI如何使用请移步这里https://angular-ui.github.io/bootstrap/中的bootstrap章节(其中ui-router等我也建…

微信禁止下拉查看URL的处理方法

微信禁止下拉查看URL的处理方法

处理方法,电脑软件,URL,场景:微信下拉时可以查看到URL,本身是微信的一种安全策略之一,也是一种用户交互友好的体验;效果原理:微信下拉弹性效果其实是浏览器本身的一种特性,重点就是scroll值的一种体现;处理策略:1、直接禁止mobile端的touchmove事件…

wps2016如何设置文档不同页眉

wps2016如何设置文档不同页眉

页眉,文档,方法,设置,如何设置,  在wps编辑文档时,可能由于各章节的标题不同,所以其要求页眉的内容也不同,那么,我们怎样去设置不同章节的页眉呢?下面给大家分享wps2016设置不同页眉的方法,欢迎大家来到学习。wps2016设置不同页眉的方法如图所…

JS简单实现自定义右键菜单实例

JS简单实现自定义右键菜单实例

右键菜单,简单实现,自定义,实例,电脑软件,RT,一个简单的例子,仅仅讲述原理 复制代码 代码如下:<div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>假设我要把上面这个div设置为右键菜单,先随意…

excel做趋势图的方法图解教程

excel做趋势图的方法图解教程

趋势,方法,教程,绘制,电脑软件,  咱们学理工科的学生经常需要处理数据,并作出相应的趋势图。如何作图呢,下面小编来为大家详细介绍做趋势图的图解教程,希望对你有帮助!Excel做趋势图的方法首先,选中数据区域,连名称一起选上。选择插入&mdash;散…

对word2013文档进行加密的两种方法

对word2013文档进行加密的两种方法

文档,方法,加密,两种,电脑软件,  一些情况下需要对office文档进行保护设置,加密就是其中一种很有效的方法,其他保护文档的方法还有限制编辑、限制访问和添加数字签名等。那么下面就由小编给大家分享下对word2013文档进行设置密码的技巧,希望…

怎么在word中制作文档封面在word中

怎么在word中制作文档封面在word中

文档,步骤,方法,封面,电脑软件,  一篇优秀的文档除了内容具体详细外,&ldquo;精致美观&rdquo;也是必不可少的要求之一。一份美观的文档往往能让你在领导心中的印象分提高不少!下面下编教你怎么在word中制作文档封面。在word中制作文档封面…

Vue之Watcher源码解析(1)

Vue之Watcher源码解析(1)

源码,电脑软件,Vue,Watcher,上一节最后再次调用了mount函数,我发现竟然跳到了7000多行的那个函数,之前我还说因为声明早了被覆盖,看来我错了!就是这个函数:// Line-7531 Vue$3.prototype.$mount = function(el, hydrating) { el = el && inB…

学好js,这些js函数概念一定要知道【

学好js,这些js函数概念一定要知道【

推荐,函数,电脑软件,js,函数创建方式 1.声明方式 例如:function consoleTip (){ console.log("tip!"); } 2.表达式方式 例如:var consoleTip = function(){ console.log("tip!"); }两种方式的区别: 1.表达式方式适合用来定义只使用一次的…