当前位置: 首页 > news >正文

7个常用的原生JS数组方法

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

7个常用的原生JS数组方法

  • 一、Array.map()
  • 二、Array.filter
  • 三、Array.reduce
  • 四、Array.forEach
  • 五、Array.find
  • 六、Array.every
  • 七、Array.some
  • 总结


一、Array.map()

作用: 循环遍历数组并修改,在原数组基础上返回一个新的修改版本,原数组不变。

代码:

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}];let resArr = arr.map(item => {return `大家好,我是${item.name},我今年${item.age}岁了`
})console.log(resArr);

在这里插入图片描述

场景: 想要修改现有数组的内容并将结果存储为新变量时。

二、Array.filter

作用: 根据特定条件循环遍历数组,检查数组的每个项目是否符合条件,如果符合,则将其返回到新数组中,原数组不变。

代码:

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}];let resArr = arr.filter(item => {return item.age <= 18;
})console.log(resArr);

在这里插入图片描述

场景: 想要从数组中删除不符合特定条件的项目时。

三、Array.reduce

作用: 接收一个函数作为 累加器 ,数组中的每个值(从左到右)开始缩减,最终返回一个值,原数组不变。

语法: arr.reduce(callback, initialValue)

参数:

  • callback :回调函数,包含如下四个参数;
  • previousValue: 上一次调用回调返回的值,或者是提供的初始值 initialValue;
  • currentValue :数组中当前被处理的元素;
  • index :当前元素在数组中的索引;
  • array :调用 reduce 的数组;
  • initialValue :第一次调用 callback 的第一个参数。

示例1:数组求和

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sum = arr.reduce((prev, cur) => {// 第一次: prev = 0// 后面:prev 上一次callback的返回值,如 0+1 ,1+2等...return prev + cur;
}, 0);
console.log(sum);

在这里插入图片描述

示例2:展平数组,将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]];
let resArr = arr.reduce((prev, cur) => {return prev.concat(cur)
}, []);
console.log(resArr);

在这里插入图片描述
示例3:展平数组,将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]];// 递归思想去判断cur是否为数组
const flat = function (arr) {return arr.reduce((prev, cur) => prev.concat(Array.isArray(cur) ? flat(cur) : cur), [])
}console.log(flat(arr));

在这里插入图片描述

场景: 想要改变数组的值将数组转换为单个值时,或将多维数组转化为一维数组。

四、Array.forEach

作用: 遍历一个数组并在每个项目上执行一个函数,非常类似于常规 for 循环,是一个经典的方法。

代码:

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}];arr.forEach(item => {console.log(`我是${item.name}`);
})

在这里插入图片描述

场景: 只想遍历任何数组的每个项目而无需构造新数组时。

五、Array.find

作用: 与 .filter() 很类似,可以传入数组符合条件的判断,但是 仅返回与提供条件匹配的第一个元素。

代码:

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}]; let resItem = arr.find(item => {return item.age <= 18
})console.log(resItem);

在这里插入图片描述

场景: 当需要获取通过显式定义的测试的数组的第一项时。

六、Array.every

作用: 检查数组中的每个元素是否通过提供的条件,如果数组中的所有元素都符合条件,则该方法将返回 true;如果有一项不符合,则返回 false。

代码:

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}]; let flag1 = arr.every(item => {return item.age < 19;
})let flag2 = arr.every(item => {return item.age < 20;
})console.log(flag1);  // false:有一项不符合
console.log(flag2);  // true: 全部符合

场景: 想要确认数组的每个项目是否都通过显式定义的条件时。

七、Array.some

作用: 与方法.every()类似,但是不需要数组中的所有元素都通过测试,找到成功的数组元素,即停止并返回 true,否则返回 false。

代码:

let arr = [{name: 'hl',age: 18}, {name: 'zy',age: 19}, {name: 'qq',age: 17}]; let flag = arr.some(item => {return item.age < 19;
})console.log(flag);  // true

场景: 想要确认数组中是否有存在某个项目可以通过显式定义的条件时。


总结

JavaScript 给我们提供了很多处理数组的不同方法。使用这些方法,可以代替 for 循环,将JS开发技能升级,并使代码库更具可维护性。

相关文章:

7个常用的原生JS数组方法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 7个常用的原生JS数组方法一、Array.map()二、Array.filter三、Array.reduce四、Array.forEach五、Array.find六、Array.every七、Array.some总结一、Array.map() 作用&#…...

一、一篇文章打好高数基础-函数

1.连续函数的性质考点分析函数的连续性主要考察函数的奇偶性、有界性、单调性、周期性。例题判断函数的奇偶性的有界区间为&#xff08;&#xff09; A.(-1,0) B(0,1) C(1,2) D(2,3)2.闭区间上连续函数的性质考点分析闭区间上连续函数的性质主要考察函数的最大最小值定理、零点…...

pipenv的基本使用

一. pipenv 基础 pipenv安装&#xff1a; pip install pipenvpipenv常用命令 pipenv --python 3 # 创建python3虚拟环境 pipenv --venv # 查看创建的虚拟环境 pipenv install 包名 # 安装包 pipenv shell # 切换到虚拟环境中 pip list # 查看当前已经安装的包&#xff0…...

OpenCV入门(三)快速学会OpenCV2图像处理基础

OpenCV入门&#xff08;三&#xff09;快速学会OpenCV2图像处理基础 1.颜色变换cvtColor imgproc的模块名称是由image&#xff08;图像&#xff09;和process&#xff08;处理&#xff09;两个单词的缩写组合而成的&#xff0c;是重要的图像处理模块&#xff0c;主要包括图像…...

基于PySide6的MySql数据库快照备份与恢复软件

db-camera 软件介绍 db-camera是一款MySql数据库备份&#xff08;快照保存&#xff09;与恢复软件。功能上与dump类似&#xff0c;但是提供了相对有好的交互界面&#xff0c;能够有效地管理导出的sql文件。 使用场景 开发阶段、测试阶段&#xff0c;尤其适合单人开发的小项目…...

BI不是报表,千万不要混淆

商业智能BI作为商业世界的新宠儿&#xff0c;在市场上实现了高速增长并获得了各领域企业的口碑赞誉。 很多企业把商业智能BI做成了纯报表&#xff0c;二维表格的数据展现形式&#xff0c;也有一些简单的图表可视化。但是这些简单的商业智能BI可视化报表基本上只服务到了一线的…...

sizeof以及strlen的用法以及注意事项

大家都知道&#xff0c;在c中算字符串长度和所占空间大小事不可避免的&#xff0c;甚至再有的时候&#xff0c;我们在写代码的过程中&#xff0c;就会用到这些数据。比如&#xff0c;下面这道题 struct Test { int Num; char *pcName; short sDate; char cha[2]; short sBa[4];…...

数据结构-链表-单链表(3)

目录 1. 顺序表的缺陷 2. 单链表 2.1 单链表的基本结构与接口函数 2.2 重要接口 创建新节点的函数&#xff1a; 2.2.1 尾插 2.2.2 头插 2.2.3 尾删 2.2.4 头删 2.2.5 查找 2.2.6 插入 2.2.7 删除 2.2.8 从pos后面插入 2.2.9 从pos后面删除 3. 链表的缺陷与优势&…...

【SpringBoot初级篇】JdbcTemplate常用方法

【SpringBoot初级篇】JdbcTemplate常用方法JdbcTemplate 查询JdbcTemplate 插入、更新、删除execute执行任意的SQLNamedParameterJdbcTemplate函数场景说明update(String sql, Nullable Object… args)增&#xff0c;删&#xff0c;改queryForObject(sql, Integer.class)查询返…...

React(三):脚手架、组件化、生命周期、父子组件通信、插槽、Context

React&#xff08;三&#xff09;一、脚手架安装和创建1.安装脚手架2.创建脚手架3.看看脚手架目录4.运行脚手架二、脚手架下从0开始写代码三、组件化1.类组件2.函数组件四、React的生命周期1.认识生命周期2.图解生命周期&#xff08;1&#xff09;Constructor&#xff08;2&…...

[教程]使用 Git 克隆指定分支

Git 是我们开发过程中经常使用到的版本管理工具,在平常情况下我们从远程克隆的时候会将整个库克隆下来&#xff0c;这会包括整个版本库的历史提交记录和远程库里的所有分支。但在一些情况下&#xff0c;比如我们并不需要查看历史提交记录而只是希望能够获取到最新的代码&#x…...

Redis实现服务注册与服务发现源码阅读(Go语言)

Redis实现服务注册与服务发现源码阅读 背景 近期在看开源项目CloudWeGo中看到目前GoLang微服务框架Hertz中支持通过Redis实现服务注册与服务发现功能。便想着阅读下源码 源码阅读 gut clone了hertz-contrib后看到在一级目录下有目前各种主流的服务注册与发现的实现方案。为…...

论文复现-3

模型构建中的运算 数据集是CONLL03 这个数据集共有4种实体类型&#xff0c;所以&#xff0c;在做实体描述的embedding时&#xff0c;得到的语义表示的Tensor大小为 &#xff1a; 4*max_len, 具体指的是&#xff1a; type_input_ids: torch.LongTensor None, type_attention_m…...

667知识点 | 经过三年实战检验的667知识清单

文章目录 前言第一章 信息与信息资源第二章 信息社会第三章 信息交流第四章 信息技术第五章 信息组织第六章 信息管理活动第七章 信息资源人文管理第八章 信息资源经济管理第九章 信息资源系统管理第十章 信息资源管理专门化前言 参考书目:《信息管理导论(第三版)》党跃武推…...

后端快速上手前端三剑客 HtmlCSSJavaScript

文章目录前言HTML1.基础标签2.多媒体标签&#xff1a;3.表格&列表&布局4.表单CSS1.简介2.导入方式3.选择器JavaScript1.简介2.引入方式3.基本语法4.对象(1) 基本对象(2) BOM对象(3) DOM对象5.事件前言 结构&#xff1a;HTML 表现&#xff1a;CSS 行为&#xff1a;Java…...

Cdiscount、Allegro如何利用测评补单自养号提升店铺权重和流量

Allegro成立于 1999 年是在波兰最受欢迎的电商平台&#xff0c;75%的波兰人都知道该网站&#xff0c;Allegro的品牌认知度在波兰高达98%。Allegro平台卖家的数量目前还是比较少的约为13万&#xff0c;最重要的就是中国卖家占比少&#xff0c;所以竞争也比较低&#xff0c;像是美…...

第16天-性能压测:压力测试,性能监控,优化QPS,Nginx动静分离

1.性能监控 1.1.JVM架构 运行时数据区&#xff1a; 方法区&#xff1a;最重要的内存区域&#xff0c;多线程共享&#xff0c;保存了类的信息&#xff08;名称、成员、接口、父类&#xff09;&#xff0c;反射机制是重要的组成部分&#xff0c;动态进行类操作的实现&#xff1b;…...

【python 基础篇 十一】python的函数-------函数的偏函数 高阶函数 返回函数 匿名函数 闭包

目录1.偏函数2.高阶函数3.返回函数4.匿名函数5.闭包1.偏函数 概念 ​ 当我们写一个参数比较多的函数时&#xff0c;如果有些参数&#xff0c;大部分场景下都是某一个固定值&#xff0c;那么为了简化使用&#xff0c;就可以创建一个新函数&#xff0c;指定我们要使用的函数的某个…...

妇女节到了,祝福所有女神 Happy Women‘s Day!

在每年&#xff13;月&#xff18;日人们庆祝妇女节 &#xff37;omens Day is cllebrated on March 8 every year.国际妇女节(IWD)&#xff0c;中国内地称“三八”国际劳动妇女节或国际劳动妇女节。是在每年的3月8日为庆祝妇女在经济、政治和社会等领域作出的重要贡献和取得的…...

etcd集群通过 Leader 写入数据,为什么K8s HA集群中讲每个 kube-apiserver 只和本机的 ETCD 通信

写在前面 对这个我不太明白&#xff0c;所有在 stackOverflow 的请教了大佬这里分享给小伙伴理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在心中坚守其一生&#xff0c;全心全意&#xff0c;永不停息。所有其它的路都是不完整…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...