当前位置: 首页 > 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;永不停息。所有其它的路都是不完整…...

HTML 表单

HTML 表单和输入 HTML 表单用于收集不同类型的用户输入。 在线实例 创建文本字段 (Text field) 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。 创建密码字段 本例演示如何创建 HTML 的密码域。 &#xff08;在本页底端可以找到更多实例。&#xff09; …...

HTML、CSS学习笔记5(移动端基础知识、Flex布局)

一、移动端基础知识 1.PC端和移动端区别 移动端&#xff1a;手机版网页&#xff0c;手机屏幕小&#xff0c;网页宽度多数为100%&#xff0c;没有版心 PC端&#xff1a;电脑版网页&#xff0c;屏幕大&#xff0c;网页固定版心 PC端和移动端不是同一个网页 2.如何在电脑里面…...

【Java学习笔记】2.Java 开发环境配置

Java 开发环境配置 在本章节中我们将为大家介绍如何搭建Java开发环境。 window系统安装java 下载JDK 首先我们需要下载 java 开发工具包 JDK&#xff0c;下载地址&#xff1a;https://www.oracle.com/java/technologies/downloads/&#xff0c;在下载页面中根据自己的系统选…...

MyBatis——进阶操作(2)

标签 if标签 当提交的表单中有些为非必填项&#xff0c;用户并没有上传这些属性的值&#xff0c;那么程序可以上传NUll&#xff0c;也可以用if标签判断用户有没有上传这个值 <if test"参数!null">操作 </if>其中test中填写一条语句&#xff0c;如果得…...

循环结构

循环结构循环结构一、课前问答二、while循环三、do-while循环四、for循环五、流程控制5.1 break5.2 continue循环结构 一、课前问答 1、switch支持的数据类型。 2、switch中break的作用。 3、多重if如果多个条件都成立&#xff0c;执行方式。 二、while循环 语法&#xff1a; …...

漫谈数据库表设计及索引设计

一.数据库表设计 在数据库表设计上有个很重要的设计准则&#xff0c;称为范式设计。 什么是范式设计&#xff1f; 范式来自英文Normal Form&#xff0c;简称NF。MySQL是关系型数据库&#xff0c;但是要想设计—个好的关系&#xff0c;必须使关系满足一定的约束条件&#xff0c…...

【JavaWeb】CSS基础知识:引入方式 + 选择器

CSS引入 CSS的引入有三种&#xff0c;三种的优缺点各不相同。 行内样式表 <!-- 行内样式表 --><!-- 相当于标签的一个属性 --><!-- 只对当前标签生效 --><!-- 优先级较高&#xff0c;会覆盖其他样式 --><p style"color: blue;">这是…...

02-前端-javaScript

文章目录JavaScript1&#xff0c;JavaScript简介2&#xff0c;JavaScript引入方式2.1 内部脚本2.2 外部脚本3&#xff0c;JavaScript基础语法3.1 书写语法3.2 输出语句3.3 变量3.3.1 全局变量var3.3.2 局部变量let3.3.3 常量const3.4 数据类型3.5 运算符3.5.1 \和区别 ▲3.5.2 …...

对链表学习的总结一

一,单链表结构定义 C/C++ 数组:一组具有相同类型数据的集合。结构体:不同类型数据的集合。 // Definition for singly-linked list. struct ListNode {int val;ListNode *next;ListNode(int x) : val(x), next...

toSring()还有个高级用法好用

Object.prototype.toString()能够很好的判断数据的类型及内置对象 typeof xxx:能判断出number,string,undefined,boolean,object,function(null是object)Object.prototype.toString.call(xxx):能判断出大部分类型Array.isArray(xxx):判断是否为数组var test= Object.…...

中文网站建设中模板/游戏推广一个月能拿多少钱

现在的很多的游戏、文章、帖子等在打开时&#xff0c;要求输入验证码&#xff0c;可是有些时候验证码显示不出来&#xff0c;今天我就来告诉大家几种不能显示验证码的解决办法。 网页上的验证码一般采用两种图片格式&#xff1a;一、.xbm图片&#xff08;不过因为Windows XP SP…...

贵阳做网站开发科技有限公司/有没有免费的广告平台

1. 检测对象是不是数组 instanceof操作符 Array.isArray()方法 var color new Array("red", "green");console.log(Array.isArray(color)); //true 2. 转换方法 toString() 该方法会输出每一项&#xff0c;并以,连接&#xff0c;实际上该方法会调用数组…...

网站结构优化怎么做/制作网站的软件有哪些

文/ 智能相对论&#xff08;ID&#xff1a;aixdlun&#xff09; 作者/ 离离 上周&#xff0c;Lady Gaga外出拍戏&#xff0c;家中的爱犬却在散步途中被歹徒掳走&#xff0c;她聘请的遛狗员也遭受枪击。心急如焚的她在社群网站上悬赏五十万美元&#xff0c;希望找回被歹徒掳走的…...

wordpress后台编辑主题时提示:抱歉_该文件无法被编辑/百度指数的功能

好吧主页的又改版了这下终于容易区分大陆与国际版的区别了。2014年12月12日起改版。 主页再次沦落为找不到东西的后果&#xff0c;其实很少进入这个主页&#xff0c;一般也直接使用http://manage.windowsazure.cn/ 直接进入Azure的门户&#xff08;国际版是https://manage.wind…...

中国最好网站建设公司/网站推广的方法和途径

项目准备 项目展示图 建立新文件夹&#xff0c;新建出images CSS JS 三个文件夹&#xff0c;并在根目录下创建出index.html将下列素材图片转到images文件中 接下来可以开始着手操作了 HTML结构 游戏内容区域 &#xff08;content&#xff09;游戏开始按钮 &#xff08;btn …...

二级目录做网站/三只松鼠网络营销案例分析

一开始&#xff0c;没啥思路&#xff0c;全靠百度&#xff0c;记录一下哈 1 public function demo(){2 //例子3 $astart strtotime("1995-06-16 12:00:00");//第1个开始4 $aend strtotime("2008-06-16 12:00:00");//第1个结…...