浅析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 相关文章推荐
表单提交验证类
Jul 14 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
php判断表是否存在的方法
2015/06/18 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
详解vue-router基本使用
2017/04/18 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python3基础之条件与循环控制实例解析
2014/08/13 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
python爬虫增加访问量的方法
2019/08/22 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
详解python metaclass(元类)
2020/08/13 Python
用python批量下载apk
2020/12/29 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
仓库规划计划书
2014/04/28 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
网络研修心得体会
2016/01/08 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python