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


Posted in Javascript onMarch 29, 2017

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方法将对象的键名生成一个数组,然后遍历这个数组。

// entries
let 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 用法总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
css配合jquery美化 select
Nov 29 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 #Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 #Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 #Javascript
js实现一个简单的数字时钟效果
Mar 29 #Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
Vue2组件tree实现无限级树形菜单
Mar 29 #Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 #Javascript
You might like
php数据库连接
2006/10/09 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
python实现多线程抓取知乎用户
2016/12/12 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
keras导入weights方式
2020/06/12 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
检察官就职演讲稿
2014/01/13 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
frg-100简单操作(设置)说明
2022/04/05 无线电