浅析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 相关文章推荐
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
解决vuecli3中img src 的引入问题
Aug 04 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入门之连接mysql数据库的一个类
2012/04/21 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Python中super()函数简介及用法分享
2016/07/11 Python
浅谈Python处理PDF的方法
2017/11/10 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
一篇.NET面试题
2014/09/29 面试题
新员工欢迎词
2014/01/12 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
房屋转让协议书范本
2014/04/11 职场文书
师范大学生求职信
2014/06/13 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL
SQL Server内存机制浅探
2022/04/06 SQL Server