浅析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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
JavaScript实现商品评价五星好评
Nov 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 INI配置文件的解析实现分析
2011/01/04 PHP
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
javascript call和apply方法
2008/11/24 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
用python实现面向对像的ASP程序实例
2014/11/10 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
捐助倡议书范文
2014/04/15 职场文书
军训口号
2014/06/13 职场文书
英语专业自荐书
2014/06/13 职场文书
老人节标语大全
2014/10/08 职场文书
升职自荐信怎么写
2015/03/05 职场文书
2015年招生工作总结
2015/05/04 职场文书
MySQL数据库 安全管理
2022/05/06 MySQL
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL
Java中的Kotlin 内部类原理
2022/06/16 Java/Android