浅析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 相关文章推荐
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 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对二维数组进行排序的简单实例
2013/12/19 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP中16个高危函数整理
2019/09/19 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
jquery tab插件精简版分享
2011/09/10 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
python 的列表遍历删除实现代码
2020/04/12 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
捷克玩具商店:Bambule
2019/02/23 全球购物
职业培训师职业生涯规划
2014/02/18 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
化妆品活动策划方案
2014/05/23 职场文书
国庆节活动总结
2014/08/26 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书