js中的遍历（for、forEach、map、filter、reduce、every、some、includes、find）

js中的遍历

  • 1. for 和 forEach
    • 性能上的比较：for性能更优
    • 异步同步化的支持度：for支持，forEach不支持
  • 2. map
    • 用法1：将数组内每个元素×2后，获取新数组
    • 用法2：将数组对象内每个元素的名称拿出来，作为一个新数组
    • 用法3：修改元数组对象，生成新数组
    • 用法4：将原数组中属性进行更换，配合对象解构，可以更直观
    • 用法5：将异步请求map到新数组中，使用Promise.all同事处理多个Promise
  • 3. filter
    • 用法1：过滤出数值数组中的偶数
    • 用法2：数组去重，结合indexOf方法
    • 用法3：数组对象中过滤掉无用数据
    • 用法4：filter和map用链式写法组合使用
  • 4. reduce
    • 用法1：求和/求积
    • 用法2：求最大值/最小值
    • 用法3：对数组对象处理
  • 5. every
    • 用法1：检查数组中的所有元素是否满足特定条件
    • 用法2：检查数组对象中的某个属性是否都满足条件
    • 用法3：检测对象内所有属性是否都有值，配合Object.values()（用于检查表单是否都填写）
  • 6. some
    • 用法1：检查数组中的是否有满足特定条件的元素
    • 用法2：检查数组对象中的是否有满足特定条件的元素
    • 用法3：检测对象内是否存在有值的属性，配合Object.values()（用于检查表单）
    • some 和 evey 的对比
  • 7. includes
    • 用法1：基础用法，检查数组中是否含有指定值
    • 用法2：every和includes配合，检测一个数组是否包含另一个数组
  • 8. find
    • 用法1：找到数值中满足条件的第一个元素
    • 用法2：找到数组对象中的满足特定条件的第一个元素
    • find 和 some的对比

参考： （博主：咸虾米_）各种类型的for循环遍历，forEach/map/filter/for…in/for…of/every/some/includes/reduce的详细用法

1. for 和 forEach

性能上的比较：for性能更优

let arrs = [...Array(9999999).keys()]
let total = 0;
let startTime = Date.now();// for：
// 支持break跳出整个循环
// 支持continue跳出当前，继续余下循环操作
for(let i=0; i<arrs.length; i++) {total+=i;
}
let endTime = Date.now();
let countTime = endTime - startTime;
console.log("for:计数---->"+total); // for:计数---->49999985000001
console.log("for:消耗时间---->"+countTime); // 129total = 0;
startTime = Date.now();
// forEach：
// 不支持break和continue
// 支持return结束当前，继续余下循环操作
arrs.forEach(item=>{total+=item;
})
endTime = Date.now();
countTime = endTime - startTime;
console.log("forEach:计数---->"+total); // forEach:计数---->49999985000001
console.log("forEach:消耗时间---->"+countTime); // forEach:消耗时间---->267
  • for循环直接操作索引，没有额外的函数调用和上下文，所以性能是最快的
  • for可以使用break终止，forEach不支持跳出循环
  • forEach可以使用return，满足条件使用return可以结束当前这次循环，但是剩下的循环还是继续跑完，但有forEach内加不加return其实消耗的时间都是差不多相同的

异步同步化的支持度：for支持，forEach不支持

async function fetchData_for() {let arrs = [1, 2, 3];let datas = [];// for：支持异步等待for (let i = 0; i < arrs.length; i++) {const { data } = await getData({url:"http://jsonplaceholder.typicode.com/posts/" + arrs[i]});datas.push(data);}console.log(datas); // (3) [{…}, {…}, {…}]
}
fetchData_for();function fetchData_forEach() {let arrs = [1, 2, 3];let datas = [];// forEach：不支持异步等待arrs.forEach(async item=>{const { data } = await getData({url:"http://jsonplaceholder.typicode.com/posts/" + item})datas.push(data)})console.log(datas); // []
}
fetchData_forEach();

2. map

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

用法1：将数组内每个元素×2后，获取新数组

let arrs = [1,2,3,4];
let newArrs = arrs.map((element, index, array) => {// 参数1 element:数组中当前正在处理的元素。// 参数2 index:正在处理的元素在数组中的索引。// 参数3 array:调用了 map() 的数组本身。return element * 2;
});
console.log(newArrs); // [2, 4, 6, 8]

用法2：将数组对象内每个元素的名称拿出来，作为一个新数组

let peopleList = [{name: '张三',age: 18,},{name: '李四',age: 19,},{name: '王五',age: 20,},
];
let names = peopleList.map(item => item.name);
console.log(names); // ['张三', '李四', '王五']

用法3：修改元数组对象，生成新数组

let peopleList = [{name: '张三',age: 18,},{name: '李四',age: 19,},{name: '王五',age: 20,},
];
let newPeopleList = peopleList.map(item => {return {...item,age: item.age + '岁',intro: '我的名字叫' + item.name,}
})
// let newPeopleList = peopleList.map(item=>({...item, age: item.age + "岁", intro: '我的名字叫' + item.name})); // 一行简写
console.log(newPeopleList);
// [
//     {
//         "name": "张三",
//         "age": "18岁",
//         "intro": "我的名字叫张三"
//     },
//     {
//         "name": "李四",
//         "age": "19岁",
//         "intro": "我的名字叫李四"
//     },
//     {
//         "name": "王五",
//         "age": "20岁",
//         "intro": "我的名字叫王五"
//     }
// ]

用法4：将原数组中属性进行更换，配合对象解构，可以更直观

let arr = [{key:0,content:"篮球"},{key:1,content:"足球"},{key:2,content:"排球"}];
let newArr = arr.map(({key,content})=>({value:key,text:content}));
console.log(newArr); // [{value: 0, text: '篮球'},{value: 1, text: '足球'},{value: 2, text: '排球'}]

用法5：将异步请求map到新数组中，使用Promise.all同事处理多个Promise

let arr = [1, 2, 3];
const promises = arr.map(async (num) => {const result = await getData({url:"http://jsonplaceholder.typicode.com/posts/" + num})return result;
});
console.log(promises); // [Promise, Promise, Promise]
Promise.all(promises).then(res => {console.log(res); // (3) [{…}, {…}, {…}]
})

3. filter

filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。filter()过滤方法，会对原数组中的每个元素应用指定的函数，并返回一个新数组，其中包含符合条件的元素。原数组不会受到影响。

用法1：过滤出数值数组中的偶数

let arrs = [5,7,8,15,22,1,2];
let newArrs = arrs.filter((item, index, array) => {// 参数1：数组中当前正在处理的元素。// 参数2：正在处理的元素在数组中的索引。// 参数3： 调用了 filter() 的数组本身console.log(item, index, array);return item % 2 === 0;
})
console.log(newArrs); // [8, 22, 2]

用法2：数组去重，结合indexOf方法

let arrs = [6,1,2,3,5,3,6];
let newArrs = arrs.filter((item,index,self)=>{return self.indexOf(item) === index
})
console.log(newArrs); // [6, 1, 2, 3, 5]

用法3：数组对象中过滤掉无用数据

let arrs = [{id:1,name:"HTML5"},{id:2,name:"JavaScript"},{id:null,name:"小程序"},{name:"NodeJS"},{id:3,name:"VueJS"}];
let newArrs = arrs.filter(item=>{return item.id
})
console.log(newArrs); // [{id:1,name:"HTML5"},{id:2,name:"JavaScript"},{id:3,name:"VueJS"}]

用法4：filter和map用链式写法组合使用

let arrs = ['6','1','2','3','5','3','6'];
let newArrs = arrs.filter((item,index,self) => {return self.indexOf(item) === index
}).map(Number) // 字符串转数值型
console.log(newArrs); // [6, 1, 2, 3, 5]

4. reduce

reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

用法1：求和/求积

let arr = [1, 2, 3, 4];
let result = arr.reduce((prev, current, index, array) => {// 参数1：上一次调用callbackFn的结果（必须）// 参数2：当前元素的值（必须）// 参数3：currentValue在数组中的索引// 参数4：调用了reduce()的数组本身return prev + current;
}, 0) // 这里的0为初始值 当有初始值时，循环从arr[0]开始，第一个循环的prev即为该初始值
// 当没有初始值参数时，循环从arr[1]开始，第一个循环的prev及为a[0]
// 当不知道数组内是不有值时，进行reduce操作最好加上初始值参数，防止程序报错
console.log(result); // 10
let result2 = arr.reduce((prev, current, index, array) =>{return prev * current;
})
console.log(result2); // 24

用法2：求最大值/最小值

let arrs = [5, 6, 1, 22, 3, 7];
let result = arrs.reduce((prev, current, index) => {return Math.max(prev, current);
}, 0)
console.log(result); // 22
let result2 = arrs.reduce((prev, current, index) => {return Math.min(prev, current);
}, 0)
console.log(result2); // 0

用法3：对数组对象处理

let arrs = [{ name: "张三", age: 29 }, { name: "李四", age: 16 }, { name: "王五", age: 50 }, { name: "小明", age: 21 }];
let result = arrs.reduce((prev, current, index) => {return prev + current.age
}, 0)
console.log(result); // 116

5. every

every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值，全部满足返回true,只要有一项不满足则返回false。

用法1：检查数组中的所有元素是否满足特定条件

let arr1 = [2, 4, 6, 8];
let arr2 = [1, 2, 4, 6, 8];
let result1 = arr1.every((item, index, array) => {// 参数1：数组中当前正在处理的元素。// 参数2：正在处理的元素在数组中的索引。// 参数3：调用了 every() 的数组本身。console.log(item, index, array);return item % 2 === 0;
});
let result2 = arr2.every(item => item % 2 === 0);
console.log(result1); // true
console.log(result2); // false

用法2：检查数组对象中的某个属性是否都满足条件

let arrs = [{ name: "华为", price: 5899, stock: true }, { name: "苹果", price: 9999, stock: false }, { name: "小米", price: 4399, stock: true }, { name: "红米", price: 899, stock: true }];
let result = arrs.every(item => item.stock);
console.log(result); // false

用法3：检测对象内所有属性是否都有值，配合Object.values()（用于检查表单是否都填写）

let obj1 = {name: 'name',title: 'title',
}
let obj2 = {name: 'name',title: '',
}
let result1 = Object.values(obj1).every(item => item);
let result2 = Object.values(obj2).every(item => item);
console.log(result1, result2); // true false

6. some

some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false。它不会修改数组。只要找到满足的就不再往下遍历

用法1：检查数组中的是否有满足特定条件的元素

let arrs = [55, 26, 3, 12, 39];
let result = arrs.some((item, index, array) => {// 参数1：数组中当前正在处理的元素。// 参数2：正在处理的元素在数组中的索引。// 参数3：调用了 some() 的数组本身。console.log(item, index, array);// 找到满足条件就不再往下遍历// 55 0 [55, 26, 3, 12, 39]// 26 1 [55, 26, 3, 12, 39]return item % 2 === 0;
});
console.log(result); // true

用法2：检查数组对象中的是否有满足特定条件的元素

let arrs = [{ name: "华为", price: 5899, stock: true }, { name: "苹果", price: 9999, stock: false }, { name: "小米", price: 4399, stock: true }, { name: "红米", price: 899, stock: true }];
let result = arrs.some(item => item.price < 1000 && item.stock);
console.log(result); // true

用法3：检测对象内是否存在有值的属性，配合Object.values()（用于检查表单）

let obj1 = {name: '',title: 'title',
}
let obj2 = {name: '',title: '',
}
let result1 = Object.values(obj1).some(item => item);
let result2 = Object.values(obj2).some(item => item);
console.log(result1, result2); // true false

some 和 evey 的对比

  • some() 只要有一个遍历项满足条件就返回true
  • evey() 要所有遍历项都满足条件才返回true

7. includes

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

用法1：基础用法，检查数组中是否含有指定值

// 参数1：需要查找的值。
// 参数2：开始搜索的索引（从零开始），会转换为整数。
let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(2)); // true
console.log(arr.includes(2, 2)); // false

用法2：every和includes配合，检测一个数组是否包含另一个数组

let arrs1 = [1, 2, 3, 4, 5, 6, 7];
let arrs2 = [1, 2, 3];
let arrs3 = [0, 2, 3];
let result1 = arrs2.every(item => arrs1.includes(item));
let result2 = arrs3.every(item => arrs1.includes(item));
console.log(result1, result2); // true false

8. find

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。只要找到满足的就不再往下遍历。

用法1：找到数值中满足条件的第一个元素

let arrs = [55, 26, 3, 12, 39];
let result = arrs.find((item, index, array) => {// 参数1：数组中当前正在处理的元素。// 参数2：正在处理的元素在数组中的索引。// 参数3：调用了 find() 的数组本身。console.log(item, index, array);// 找到满足条件就不再往下遍历// 55 0 [55, 26, 3, 12, 39]// 26 1 [55, 26, 3, 12, 39]return item % 2 === 0;
});
console.log(result); // 26

用法2：找到数组对象中的满足特定条件的第一个元素

let arrs = [{ name: "华为", price: 5899, stock: true }, { name: "苹果", price: 9999, stock: false }, { name: "小米", price: 4399, stock: true }, { name: "红米", price: 899, stock: true }];
let result = arrs.find(item => item.price < 1000 && item.stock);
console.log(result); // {name: '红米', price: 899, stock: true}

find 和 some的对比

返回值不同：

  • find返回找到的满足条件的数组元素
  • some返回布尔值，表示是否存在满足条件的数组元素

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/20002.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux服务升级：Twemproxy 升级 Redis代理

Linux服务升级：Twemproxy 升级 Redis代理

目录 一、实验 1.环境 2.多实例Redis部署 3.Twemproxy 升级Redis代理 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 系统版本软件IP备注CentOS7.9Twemproxy192.168.204.200 Redis代理 Redis127.0.0.1:6379第一个Redis实例 Redis127.0.0.1:6380第二个…
阅读更多...
微信小程序-页面导航-导航传参

微信小程序-页面导航-导航传参

1.声明式导航传参 navigator组件的url属性用来指定将要跳转到的页面的路径&#xff0c;同时&#xff0c;路径的后面还可以携带参数&#xff1a; &#xff08;1&#xff09;参数与路径之间使用 ? 分割 &#xff08;2&#xff09;参数键与参数值用 相连 &#xff08;3&…
阅读更多...
五星级可视化大屏（02）：再发一波，纯数据图表也跟效果杠杠的。

五星级可视化大屏（02）：再发一波，纯数据图表也跟效果杠杠的。

这是第一期&#xff0c;分享纯数据图表的&#xff0c;请大家仔细观看。
阅读更多...
华为云的云主机安装的linux系统不能使用yum下载软件包、程序、组件等

华为云的云主机安装的linux系统不能使用yum下载软件包、程序、组件等

目录 一、背景介绍 二、问题描述 1、尝试使用yum安装traceroute 2、更换yum源 3、使用curl命令访问百度&#xff0c;测试网络 三、问题分析和解决 1、修改网卡设置 &#xff08;1&#xff09;ifconfig查看网卡信息 &#xff08;2&#xff09;添加DNS 2、修改/etc/res…
阅读更多...
移动机器人传感器

移动机器人传感器

移动机器人传感器是机器人系统的关键组成部分&#xff0c;用于感知和理解周围环境&#xff0c;为导航、避障、定位和任务执行提供必要的信息。以下是一些常用的移动机器人传感器及其功能和应用。 常用移动机器人传感器 激光雷达 (LiDAR)摄像头深度摄像头超声波传感器红外传感器…
阅读更多...
简单介绍QKeySequenceEdit的使用

简单介绍QKeySequenceEdit的使用

QKeySequenceEdit是Qt框架中的一个便捷用户界面组件&#xff0c;用于输入和显示键盘快捷键。它提供了一个简单的界面&#xff0c;允许用户输入一个键盘快捷键&#xff0c;并将其显示为一个字符串。这在需要配置快捷键的应用程序中非常有用。在本文中&#xff0c;我们将详细介绍…
阅读更多...
一键安装 HaloDB 之 Ansible for Halo

一键安装 HaloDB 之 Ansible for Halo

↑ 关注“少安事务所”公众号&#xff0c;欢迎⭐收藏&#xff0c;不错过精彩内容~ 前倾回顾 前面介绍了“光环”数据库的基本情况和安装办法。 哈喽&#xff0c;国产数据库&#xff01;Halo DB! 三步走&#xff0c;Halo DB 安装指引 以及 HaloDB 的 Oracle 和 MySQL 兼容模式: …
阅读更多...
k8s——Pod进阶（资源限制和探针）

k8s——Pod进阶（资源限制和探针）

一、资源限制 1.1 资源限制的定义 当定义Pod时可以选择性地为每个容器设定所需要的资源数量。 最常见的可设定资源是CPU和内存大小&#xff0c;以及其他类型的资源。 当为Pod中的容器指定了request资源时&#xff0c;调度器就使用该信息来决定将Pod调度到哪个节点上。当还为容器…
阅读更多...
使用 Django Model 构建强大的数据库模型

使用 Django Model 构建强大的数据库模型

文章目录 创建一个简单的 Django Model迁移数据库使用 Django Shell 操作模型Django Admin结论 在 Django 中&#xff0c;Model 是构建数据库模型的基础。它允许开发人员定义数据的结构&#xff0c;并提供了方便的方式来与数据库进行交互。本文将介绍如何使用 Django Model 来创…
阅读更多...
玄机平台应急响应—Linux日志分析

玄机平台应急响应—Linux日志分析

1、前言 啥是日志呢&#xff0c;日志就是字面意思&#xff0c;用来记录你干了啥事情。日志大体可以分为网站日志和系统日志&#xff0c;网站日志呢就是记录哪个用户在哪里什么时候干了啥事&#xff0c;以及其它的与网站相关的事情。系统日志呢&#xff0c;就是记录你的电脑系统…
阅读更多...
【Linux系列】深入解析 `kill` 命令：Linux 下的进程管理利器

【Linux系列】深入解析 `kill` 命令：Linux 下的进程管理利器

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
男士内裤哪个品牌好一点？2024热门男士内裤推荐

男士内裤哪个品牌好一点？2024热门男士内裤推荐

男人的内裤保质期只取决于被别人看见的次数&#xff0c;如果某条内裤从未被别人看见过&#xff0c;那它永远都是你的新内裤。也就是说&#xff0c;只要穿着破内裤这尴尬的瞬间没被目击&#xff0c;男人就能永远和一条内裤在一起。 实际上如果长时间不更换男士内裤&#xff0c;…
阅读更多...
代码审计（工具Fortify 、Seay审计系统安装及漏洞验证）

代码审计（工具Fortify 、Seay审计系统安装及漏洞验证）

源代码审计 代码安全测试简介 代码安全测试是从安全的角度对代码进行的安全测试评估。&#xff08;白盒测试&#xff1b;可看到源代码&#xff09; 结合丰富的安全知识、编程经验、测试技术&#xff0c;利用静态分析和人工审核的方法寻找代码在架构和编码上的安全缺陷&#xf…
阅读更多...
MySQL增删查改初阶

MySQL增删查改初阶

目录 一&#xff0c;数据库操作 1.关键字 show 显示当前数据库有哪些&#xff1a;show databases&#xff1b; 2.创建数据库 3.选中数据库 4.删除数据库 二&#xff0c;表的操作&#xff0c;在选中数据库的基础之上 1.查看表的结构 2.创建表 3.查看当前选中的数据库中…
阅读更多...
【算法】模拟算法——Z字形变换(medium)

【算法】模拟算法——Z字形变换(medium)

题解&#xff1a;模拟算法——Z字形变换(medium) 目录 1.题目2.题解3.参考代码4.总结 1.题目 题目链接&#xff1a;LINK 2.题解 利用模拟&#xff0c;来解决问题。 首先创建出一个O(numRows*n)的数组来&#xff0c;并按照题目要求把每个字符按顺序填进去。 这里以numRows…
阅读更多...
java中回调与Timer类的使用

java中回调与Timer类的使用

回调&#xff1a;回调&#xff08;callback)是一种常见的程序设计模式。在这种模式中&#xff0c;可以指出某个特定事件发生时应该采取的动作。 Timer类&#xff1a;java.swing包中的Timer类&#xff0c;可以使用它在给定的时间间隔时发出通告。如程序中有一个时钟&#xff0c…
阅读更多...
如何在IDEA中实现类似Linux命令那样的外部传参

如何在IDEA中实现类似Linux命令那样的外部传参

【背景说明】 IDEA中执行一个程序时&#xff0c;如何就在程序一开始执行给传入你给的参数呢&#xff1f; 【说明】 public static void main(String[] args) throws Exception {} 说明&#xff1a;其实java中main方法里的args这个参数&#xff0c;就是用于接收外部传参的。…
阅读更多...
String类型的二维数组怎么写

String类型的二维数组怎么写

今天做题遇到一个问题&#xff1a;就是需要写String类型的二维数组时&#xff0c;我蒙圈了。后来查了资料发现&#xff0c;String类型的二维数组其实是由若干个一维数组构成的。 1.先初始化一个二维数组&#xff1a;List<List<String>> list new ArrayList<&g…
阅读更多...
基于JAVA+SpringBoot+Vue前后端分离的医院在线挂号预约问诊平台

基于JAVA+SpringBoot+Vue前后端分离的医院在线挂号预约问诊平台

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 链接点击直达&#xff1a;下载链接 前言 哈喽兄弟…
阅读更多...
前端Vue小兔鲜儿电商项目实战Day05

前端Vue小兔鲜儿电商项目实战Day05

一、登录 - 整体认识和路由配置 1. 整体认识 登录页面的主要功能就是表单校验和登录退出业务 ①src/views/Login/index.vue <script setup></script><template><div><header class"login-header"><div class"container m-…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023