浅析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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
36个正则表达式(开发效率提高80%)
Nov 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/06/18 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
js实现简单计算器
2015/11/22 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
python修改字典内key对应值的方法
2015/07/11 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
window下eclipse安装python插件教程
2017/04/24 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
最热门的自我评价
2013/12/30 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
新年团拜会主持词
2014/04/02 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
2015学校年度工作总结
2015/05/11 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
银行求职信范文
2019/05/13 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python