浅析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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
详解JS中的attribute属性
Apr 25 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
浅探express路由和中间件的实现
Sep 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中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
python类中super()和__init__()的区别
2016/10/18 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
Django实现表单验证
2018/09/08 Python
python pytest进阶之fixture详解
2019/06/27 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Python 中如何写注释
2020/08/28 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
环境建设实施方案
2014/03/14 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js