浅析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 相关文章推荐
js三种排序算法分享
Aug 16 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
vue实现购物车列表
Jun 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将回调函数作用到给定数组单元的方法
2014/08/19 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python Matplotlib库入门指南
2015/05/18 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Django的信号机制详解
2017/05/05 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python函数式编程实例详解
2020/01/17 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
担保书怎么写
2014/04/01 职场文书
2014年实习期工作总结
2014/11/27 职场文书
中秋客户感谢信
2015/01/22 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript