浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结

发布时间 - 2026-01-11 00:25:22    点击率:

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

对数组中的每一个元素进行遍历,遇到return true退出循环

var list=[1,2,3,4,5,6]

var sum = 0;

list.some(obj->{
  sum = sum + obj;
  
  if(obj === 5)
    return true
})

console.log(sum);

//sum == 10

返回一个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

对数组中的每一个元素进行遍历,遇到return false退出循环

var list=[1,2,3,4,5,6]
var sum = 0;
list.euery(obj->{
  sum = sum + obj;  
  if(obj === 5)
    return false
})
console.log(sum);
//sum == 10

返回一个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

对数组中的每一个元素进行遍历,直到循环完成

var list=[1,2,3,4,5,6]
var sum = 0;
list.some(obj->{
  sum = sum + obj;
    if(obj === 3)
    return true
  if(obj === 4)
    return false
  if(obj === 5)
    return
})
console.log(sum);
//sum == 21

没有返回值,只针对每个元素调用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 用法总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


# js  # map  # filter  # some  # every  # foreach  # for  # in  # of  # JS中的常见数组遍历案例详解(forEach  #  map  #  filter  #  sort  #  reduce  #  every)  # JS中some和every的区别和用法详解  # 简述JS中forEach()、map()、every()、some()和filter()的用法  # JS数组方法some、every和find的使用详情  # JS中的every()对空数组总返回true原理分析  # 遍历  # 数据结构  # 键名  # 键值  # 返回值  # 组中  # 小编  # 有一个  # 的是  # 都是  # 是在  # 在此  # 基础上  # 可以用  # 给大家  # 可以使用  # 报错  # 这三个  # 解决方法  # 所述 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  企业在线网站设计制作流程,想建设一个属于自己的企业网站,该如何去做?  微信公众帐号开发教程之图文消息全攻略  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛,就是里面都是武汉人的?  Laravel如何实现多对多模型关联?(Eloquent教程)  BootStrap整体框架之基础布局组件  如何在建站之星绑定自定义域名?  Laravel观察者模式如何使用_Laravel Model Observer配置  Bootstrap整体框架之JavaScript插件架构  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  高性价比服务器租赁——企业级配置与24小时运维服务  如何快速启动建站代理加盟业务?  清除minerd进程的简单方法  Laravel安装步骤详细教程_Laravel环境搭建指南  nginx修改上传文件大小限制的方法  Java解压缩zip - 解压缩多个文件或文件夹实例  canvas 画布在主流浏览器中的尺寸限制详细介绍  香港服务器租用费用高吗?如何避免常见误区?  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站?  如何在建站宝盒中设置产品搜索功能?  Swift中循环语句中的转移语句 break 和 continue  Laravel如何使用集合(Collections)进行数据处理_Laravel Collection常用方法与技巧  使用C语言编写圣诞表白程序  Laravel如何创建自定义Facades?(详细步骤)  Python图片处理进阶教程_Pillow滤镜与图像增强  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  如何用PHP工具快速搭建高效网站?  Python文件异常处理策略_健壮性说明【指导】  创业网站制作流程,创业网站可靠吗?  Windows家庭版如何开启组策略(gpedit.msc)?(安装方法)  如何快速生成专业多端适配建站电话?  车管所网站制作流程,交警当场开简易程序处罚决定书,在交警网站查询不到怎么办?  如何基于PHP生成高效IDC网络公司建站源码?  iOS UIView常见属性方法小结  如何快速完成中国万网建站详细流程?  小米17系列还有一款新机?主打6.9英寸大直屏和旗舰级影像  如何用IIS7快速搭建并优化网站站点?  Laravel怎么使用Intervention Image库处理图片上传和缩放  如何在腾讯云服务器快速搭建个人网站?  如何在Windows服务器上快速搭建网站?  常州企业网站制作公司,全国继续教育网怎么登录?  Laravel如何与Docker(Sail)协同开发?(环境搭建教程)  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  laravel怎么实现图片的压缩和裁剪_laravel图片压缩与裁剪方法  网站制作软件免费下载安装,有哪些免费下载的软件网站?  iOS正则表达式验证手机号、邮箱、身份证号等  Android自定义控件实现温度旋转按钮效果  如何获取免费开源的自助建站系统源码?  高端智能建站公司优选:品牌定制与SEO优化一站式服务  网站建设保证美观性,需要考虑的几点问题!