浅析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代码格式化和语法着色V2
Oct 14 Javascript
广告切换效果(缓动切换)
May 27 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
Javascript中的delete介绍
Sep 02 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 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 模拟登陆MSN并获得用户信息
2009/05/16 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php中的依赖注入实例详解
2019/08/14 PHP
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python在Console下显示文本进度条的方法
2016/02/14 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
详解python中__name__的意义以及作用
2019/08/07 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
Python 爬虫性能相关总结
2020/08/03 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
护理学专业推荐信
2013/12/03 职场文书
教师职称自我鉴定
2014/02/12 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
骨干教师个人总结
2015/02/11 职场文书
法定授权委托证明书
2015/06/18 职场文书
交通处罚决定书
2015/06/24 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
python的html标准库
2022/04/29 Python
win sever 2022如何占用操作主机角色
2022/06/25 Servers