浅析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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
JavaScript 异步时序问题
Nov 20 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中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
类似框架的js代码
2006/11/09 Javascript
用脚本调用样式的几种方法
2006/12/09 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
简述JS控制台的使用
2018/07/15 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
架构师岗位职责
2013/11/18 职场文书
新课培训心得体会
2014/09/03 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
党员自评材料范文
2014/12/17 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
公司2015年终工作总结
2015/05/26 职场文书
银行培训心得体会范文
2016/01/09 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书