10 个你必须要知道的重要JavaScript 数组方法

news2024/10/3 4:41:13

数组方法在 JavaScript 中是必不可少的,数组方法有很多。对于忙碌的初学者,我选择了 10 种最常见的数组方法,你必须学习它们,这些可以帮助你提升学习效率,节省时间。

为了便于理解,我为每个数组方法提供了一个示例用例。

01、Array.map()

通过调用回调函数,map() 方法循环遍历原始数组并在数组的每个元素上调用该函数。由于它是一种非变异方法,因此它会创建一个新数组并且不会更改原始数组。简而言之,当你想要转换数组中的所有值时使用它。

示例用例

如果有一个客户列表,你有他们的名字,并且你想将每个客户的姓氏设置为“Smith”。

02、Array.forEach()

这与 map() 方法非常相似,它也对每个元素执行一次函数,除了它在原地改变原始数组,它不会创建新数组。

示例用例

如果你想打印列表中每个客户的姓名,并且不需要新数组。

03、Array.reduce()

Reduce 是最强大和最灵活的方法,因为它可以用来重新实现所有现有的数组方法,但它也是最难理解的。

reduce方法接受两个参数:一个回调和一个初始值(arr.reduce(callback, initialValue),回调有4个参数,累加器、当前值、当前索引和初始值。简单来说,这个方法减少了数组返回一个值。

由于讨论 reduce() 方法的所有好处需要单独写一篇文章,因此,我将在这里仅讨论两个具有代表性的用例。

示例用例

1)计算没有初始值的总和

2)展平数组

04、Array.filter()

显然,当你需要过滤掉值时,会使用 filter() 方法。只需将测试函数作为回调传递,它将返回一个等于 true 的值以保留元素。

示例用例

你想从客户列表中删除特定客户,例如 Mary。因此,在回调中,你保留所有不等于 Mary 的名称。

05、Array.sort()

方法名称不言自明,它用于对数组进行排序。

示例用例

你有一个列出每个客户年龄的数组,你希望按升序对其进行排序。

请注意,使用不带回调的 array.sort() 将产生不同的结果,该结果仅根据第一个数字进行排序,而不是实际值。

06、Array.includes()

includes() 方法通过取值来确定数组是否包含某些元素。它返回一个布尔值。

示例用例

如果你想知道 Mary 是否包含在数组中。

07、Array.find()

使用 find() 方法,我们可以在数组中搜索某些内容。它接受一个测试函数,并返回提供的数组中与条件匹配的第一个元素。换句话说,它不会返回所有满足测试的元素。

示例用例

如果你需要获得一个长度为四个字母的客户名称。

08、Array.indexOf()

这是另一种在数组中搜索内容的方法,但这次它返回索引。如果在数组中没有找到该元素,则返回 -1。

示例用例

如果你想检查 Jane 是否在你的客户列表中,以便你可以为她提供定制的折扣。

09、Array.some()

some() 方法测试数组中是否至少有一个元素与特定条件匹配。它与 include 方法不同,因为它需要条件或测试功能,但不需要值。如果条件满足则返回真,否则返回假。

示例用例

当你要检查是否至少有一个客户的名字以“s”开头时,使用此方法。

10、Array.concat()

当你想要合并两个或多个数组时使用contact() 方法。

示例用例

如果你有两个数组,一个包含男性客户,另一个包含女性客户,现在,你想要合并这些数组,以便一个数组包含所有客户。

这就是这个话题。感谢您的阅读。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

不强迫登录!Apipost用着真爽!

Apipost在上个版本推出了Apipost网页版,用户无需下载软件在官网就可以直接体验到Apipost的很多强大功能。 Apipost 7版本在使用网页版时的登录问题上,让用户在无需下载的基础上,更无需登录,就可以便捷使用Apipost更多的功能&…

Promise期约函数的实现

前言 Promise也叫期约函数,是ES6中新增的特性,是解决异步编程的一种方案,取代回调函数避免回调地狱。 const p new Promise((resolve,reject)>{resolve(1); });// 链式调用 p.then(res > Promise.resolve(res 2)).then(res > Promise.resolve(res 3)).then(res &…

嵌入式系统硬件概述

文章目录嵌入式系统硬件平台(1) 嵌入式处理器的分类(2) 嵌入式微处理器MIPS处理器PowerPC处理器ARM处理器ARM发展历史ARM公司介绍ARM市场份额嵌入式微控制器(MCU)数字信号处理器(DSP)嵌入式片上系统(SoC)嵌…

【uni-app】总结uni-app订单支付和打包发布

前言 总结uni-app订单支付和打包发布 1- 支付 1.1 app的支付 1.1.1 准备工作 支付厂商 获取id 去微信支付平台接入微信支付 支付宝 打包时候 去mainifest.json文件下,找到 app模块配置 ,勾选payment支付 1.1.2 代码 获取支付厂商 uni.getProvide() u…

Spring Boot 程序优化的 14 个小妙招!

1.定义配置文件信息 有时候我们为了统一管理会把一些变量放到yml配置文件中 例如 图片 用 ConfigurationProperties 代替Value 使用方法 定义对应字段的实体 Data // 指定前缀 ConfigurationProperties(prefix "developer") Component public class Developer…

数据看板是什么?

一 数据看板定义 数据看板是数据可视化的载体。数据看板是一个可视化工具,通过合理的页面布局、效果设计,将可视化数据更直观、更形象的展现出来;数据看板是一个交流工具,通过数据公开和呈现,公司内部能够共享有效信息…

大二学生基于Html+Css+javascript的网页制作——动漫设计公司响应式网站模板 (10个页面)

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐&#x1…

JAVAWEB_实验二 JSP 的内置对象

文章目录一、Part 1 JSP 的内置对象一、实验目的二、实验要求三、实验内容二、Part 2 JSP 的内置对象一、实验目的二、实验要求三、实验内容思考:页面重定向有哪些方式?区别时什么?一、Part 1 JSP 的内置对象 一、实验目的 通过编程和上机实…

算法刷题打卡第33天:香槟塔

香槟塔 难度:中等 我们把玻璃杯摆成金字塔的形状,其中第一层有 1 个玻璃杯,第二层有 2 个,依次类推到第 100 层,每个玻璃杯 (250ml) 将盛有香槟。 从顶层的第一个玻璃杯开始倾倒一些香槟,当顶层的杯子满…

【JavaWeb】Servlet系列 --- 使用纯Servlet做一个单表的CRUD操作(oa小项目,超详细笔记)

使用纯Servlet做一个单表的CRUD操作实现步骤第一步:准备一张数据库表(sql脚本/可视化工具)第二步:准备一套HTML页面(页面原型)【前端开发工具使用vscode / IDEA】第三步:分析我们这个系统包括哪…

分布式共识协议 Raft 是如何工作的?

Raft 解决的问题 提供一种共识算法(分布式一致性算法)。 Paxos是早先的一个分布式共识算法,Paxos 逻辑复杂而难以理解和实现。相比早先的 Paxos, Raft 提供一个容易理解和实现的共识算法,在很多的系统比如 etcd, ozon…

力扣hot100——第3天:11盛最多水的容器、21合并两个有序链表、22括号生成

文章目录1.11盛最多水的容器1.1.题目1.2.解答1.2.1.题解1.2.2.自己对参考题解的进一步解释2.21合并两个有序链表2.1.题目2.2.题解3.22括号生成3.1.题目3.2.题解1.11盛最多水的容器 参考:力扣题目链接;题解 1.1.题目 1.2.解答 1.2.1.题解 这道题目可以…

GIS工具maptalks开发手册(一)——hello world初始化

GIS工具maptalks开发手册(一)——hello world初始化 为何使用maptalks? ​ Maptalks项目是一个HTML5的地图引擎, 基于原生ES6、Javascript开发的二三维一体化地图。 通过二维地图的旋转、倾斜增加三维视角,通过插件化设计, 能与其他图形库echarts、d3.…

微信小程序实战十四:小程序及APP端实现客服功能

文章目录 1.效果预览2.小程序后台添加客服3.小程序代码中集成客服4.APP中添加客服5.企业微信登陆6.获取企业ID值7.设置多客服说明:项目用uni开发的,有小程序版本和APP版本,最开始项目中集成了第三方美洽的客服,2个客服一年收3600,老哥咨询我是否有稍微优惠点的方案,老哥带…

QuEra将研发可重构中性原子量子计算机

(图片来源:网络) 上个月,借助Amazon Braket,QuEra Computing开始提供对其中性原子量子系统Aquila的访问, Aquila具有256个量子比特。如今,量子公司的数量与日俱增,QuEra是其中之一,它…

java httpclient的digest验证(可恨,找遍全网没有靠谱的,不是少包就是少文件。含泪整理o(╥﹏╥)o~~~~)

背景:调用第三方接口,使用的是digest auth鉴权方式, basic auth和digest auth比较: basic认证是把用户和密码通过base64加密后发送给服务器进行验证。 Basic认证过程简单,每次请求都有发送密码。安全性较低。 为了解决…

[附源码]JAVA毕业设计衡师社团管理系统(系统+LW)

[附源码]JAVA毕业设计衡师社团管理系统(系统LW) 目运行 环境项配置: Jdk1.8 Tomcat8.5 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术…

【allegro 17.4软件操作保姆级教程八】布线操作基础之三

目录 1.1扇出操作 1.2差分对过孔间距调整 1.3差分线换层自动添加回流过孔 1.4多人协同操作 1.5导入pin delay 1.6走线导圆弧 1.1扇出操作 关于信号扇出有如下一些需要注意的点: 1、过孔扇出要考虑其间距,要求2个过孔之间保证能过一根信号线&#x…

java+jsp基于ssm的校园OTO超市系统-计算机毕业设计

项目介绍 本网站主要是针对高校学生以超市购物为重点开发的网站。系统从用户上分为三种:卖家、买家和游客。系统从模块分为买家模块和卖家模块,买家模块包括用户注册登录、商品浏览、商品详情、商品加入购物车、购物车中商品删除、购物车商品数量变更、…

vue 微信登录

文章目录前言一、第一步用户授权获取code1、PC扫码方式一方式二:踩坑记录2、移动端微信内置浏览器授权获取code二、第二步 通过code获取access_token三、获取用户个人信息前言 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。 在进行微信…