浅析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操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
webpack 模块热替换原理
Apr 09 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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通过session防url攻击方法
2014/12/10 PHP
tagName的使用,留一笔
2006/06/26 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
理解javascript封装
2016/02/23 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
python 动态调用函数实例解析
2019/10/21 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
python代码区分大小写吗
2020/06/17 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
大学生标准推荐信范文
2013/11/25 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
机关作风建设整改方案
2014/10/27 职场文书
解除同居协议书
2015/01/29 职场文书
银行先进个人总结
2015/02/15 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
功夫熊猫观后感
2015/06/10 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
浅谈Redis的事件驱动模型
2022/05/30 Redis