JavaScript 数组

javascript 数组

什么是数组?

数组是一种存储有序元素集合的数据结构。在 javascript 中,数组被归类为一种特殊类型的对象,可以存储数字、字符串、对象或其他数组。数组中的元素括在方括号 [ ] 中并使用从零开始的索引。从零开始的索引意味着数组的第一个元素的索引为 0,第二个元素的索引为 1,依此类推。

const names = ["david", "hannah", "william"];console.log(names[0]); // returns the first element// returns "david"console.log(names[1]); // returns the second element// returns "hannah"console.log(names[2]); // returns the third element// returns "william"

如何修改或操作数组?

数组中元素的索引

可以通过为空索引赋值来将新元素添加到数组中。

names[3] = "eric";console.log(names);// returns ["david", "hannah", "william", "eric"]

可以通过为现有索引重新分配新值来修改数组中的元素。

names[1] = "juniper";console.log(names);// returns ["david", "juniper", "william", "eric"]

数组方法

数组还可以使用数组方法进行修改或操作,例如 ‘push’、’pop’、’unshift’、’shift’、’slice’ 和 ‘splice’。

‘推()’

‘push’ 方法接受一个或多个元素作为参数,将元素添加到数组末尾,并返回修改后的数组的长度。

names.push("bob");// returns 5 console.log(names);// returns ["david", "juniper", "william", "eric", "bob"]

‘流行音乐()’

‘pop’ 方法不带参数,删除数组的最后一个元素,并返回删除的元素。

names.pop();// returns "bob"console.log(names);// returns ["david", "juniper", "william", "eric"]

‘取消移位()’

‘unshift’ 方法接受一个或多个元素作为参数,将元素添加到数组的开头,并返回修改后的数组的长度。

names.unshift("jack", "jane");// returns 6console.log(names);// returns ["jack", "jane", "david", "juniper", "william", "eric"]

‘转移()’

“shift”方法不带参数,删除数组的第一个元素,并返回删除的元素。

names.shift();// returns "jack"console.log(names);// returns ["jane", "david", "juniper", "william", "eric"]

‘片()’

“slice”方法采用两个可选参数(startindex、endindex),并返回一个新数组,其中包含从 startindex 到(但不包括)原始数组的 endindex 的元素。
如果省略 startindex,则使用 0。
如果省略 endindex,则使用数组长度。负索引号可用于从数组末尾开始倒数。

names.slice(1, 3);// returns ["david", "juniper"]names.slice(3);// returns ["juniper", "william", "eric"]names.slice(-2, 1);// returns ["william", "eric", "jane"]names.slice();// returns ["jane", "david", "juniper", "william", "eric"]

‘拼接()’

“splice”方法接受一个或多个参数(startindex、deletecount、element1、element2…)并返回一个包含所有删除元素的新数组。从startindex 开始,删除deletecount 个元素,并将以下元素参数添加到从startindex 开始的数组中。如果省略deletecount,则删除从startindex 到数组末尾的所有元素。如果省略元素参数,则不会添加任何元素。

names.splice(0, 1, "joe", "alex"); // returns ["jane"]console.log(names);// returns ["joe", "alex", "david", "juniper", "william", "eric"]names.splice(1, 4);// returns ["alex", "david", "juniper", "william"]console.log(names);// returns ["joe", "eric"]names.splice(0, 0, "bob", "frank", "maria")// returns []console.log(names);// returns ["joe", "bob", "frank", "maria", "eric"]

由于“push”、“pop”、“unshift”、“shift”和“splice”修改了原始数组,因此它们被归类为破坏性方法。 “切片”方法使原始数组保持完整,因此它被归类为非破坏性。

扩展运算符 ‘…’

要无损地向数组添加元素或复制数组,可以使用扩展运算符。扩展运算符将数组扩展为其元素。

const array = [1, 2, 3];const newarray = [0, ...array, 4, 5];// ...array spreads [1, 2, 3] into 1, 2, 3console.log(newarray);// returns [1, 2, 3, 4, 5]

如果没有扩展运算符,原始数组将嵌套在新数组中。

const array = [1, 2, 3];const newarray = [0, array, 4, 5];console.log(newarray);// returns [0, [1, 2, 3], 4, 5];

迭代数组方法

迭代数组方法对数组中的每个元素调用提供的函数并返回一个值或新数组。使用三个参数调用提供的函数:当前元素、当前元素的索引以及调用该方法的原始数组。

function callbackfunction (currentelement, currentindex, originalarray) {// function body}

迭代数组方法的一些示例是:“find”、“filter”、“map”和“reduce”。

‘寻找()’

‘find’方法接受一个函数作为参数,并返回数组中满足函数条件的第一个元素。

const numbers = [5, 10, 15, 20, 25];numbers.find(number => number > 15);// returns 20;

‘筛选()’

“filter”方法与“find”方法类似,但返回满足给定函数条件的所有元素的数组。

const numbers = [5, 10, 15, 20, 25];numbers.filter(number => number > 15);// returns [20, 25];

‘地图()’

“map”方法返回一个新数组,其中包含对原始数组中每个元素调用该函数的结果。

const numbers = [1, 2, 3, 4, 5];numbers.map(number => number * number);// returns [1, 4, 9, 16, 25]

‘减少()’

“reduce”方法接受一个函数和一个初始值作为参数。提供的函数接收四个参数:累加器、当前值、当前索引和原始数组。提供的初始值是数组第一个元素的累加器的值。每个元素的函数结果用作数组中下一个元素的累加器的值。如果未提供初始值,则将累加器设置为数组的第一个元素,并从第二个元素开始调用回调函数。

const numbers = [1, 2, 3, 4, 5]numbers.reduce(((acc, number) => acc + number), 0);// returns 15

以上就是JavaScript 数组的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1489941.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何从 HTML 字符串创建 DOM 元素(多种方法)
上一篇 2025年12月19日 12:49:12
为什么 `formStateerrors` 会执行多次?
下一篇 2025年12月19日 12:49:26

相关推荐

  • 确保并发操作结果可观测性:理解ConcurrentHashMap与线程同步

    确保并发操作结果可观测性:理解ConcurrentHashMap与线程同步确保并发操作结果可观测性:理解ConcurrentHashMap与线程同步确保并发操作结果可观测性:理解ConcurrentHashMap与线程同步确保并发操作结果可观测性:理解ConcurrentHashMap与线程同步

    本文旨在探讨在使用ConcurrentHashMap进行并发写入操作时,如何确保最终结果的准确性与可观测性。我们将分析在多线程环境下,直接检查ConcurrentHashMap大小可能出现不符合预期的原因,并详细介绍如何利用ExecutorService.invokeAll()方法,确保所有并发任务…

    2026年9月30日 • 用户投稿
    000
  • 谷歌宣布Gemini定制助手Gems现已可供分享

    谷歌宣布Gemini定制助手Gems现已可供分享谷歌宣布Gemini定制助手Gems现已可供分享谷歌宣布Gemini定制助手Gems现已可供分享谷歌宣布Gemini定制助手Gems现已可供分享

    谷歌在本周四宣布,其个性化AI助手Gemini Gems现已支持共享功能。这项能力最初作为付费订阅服务的一项权益推出,允许用户构建专为特定用途定制的AI聊天机器人,例如学习辅导、文案润色或编程协助。 现在,用户可以像分享Google Drive中的文件一样,便捷地将自己创建的Gems发送给朋友、家人…

    2026年9月30日 • 用户投稿
    000
  • 教程:使用Docker来安装Symfony

    教程:使用Docker来安装Symfony教程:使用Docker来安装Symfony教程:使用Docker来安装Symfony教程:使用Docker来安装Symfony

    教程:使用Docker来安装Symfony Symfony是一个流行的PHP框架,用于构建高性能、可扩展的Web应用程序。在开发Symfony应用程序时,使用Docker可以方便地创建一个独立的开发环境,以便于团队协作和应用程序的部署。本教程将指导您如何使用Docker来安装Symfony,并提供具…

    2026年9月30日 • 用户投稿
    000
  • MySQL 和 MongoDB 的区别

    MySQL 和 MongoDB 的区别MySQL 和 MongoDB 的区别MySQL 和 MongoDB 的区别MySQL 和 MongoDB 的区别

    MySQL 是一个关系数据库。 MongoDB 是 NoSQL 数据库。 以下是 MySQL 和 MongoDB 之间的重要区别。 魔乐社区 天翼云和华为联合打造的AI开发者社区,支持AI模型评测训练、全流程开发应用 102 查看详情 高级。号 键 MySQL MongoDB 1拥有/开发者MySQ…

    2026年9月30日 • 用户投稿
    100
  • windows提示“内存不能为read”是什么意思_“内存不能为read”错误的原因与解决办法

    windows提示“内存不能为read”是什么意思_“内存不能为read”错误的原因与解决办法windows提示“内存不能为read”是什么意思_“内存不能为read”错误的原因与解决办法windows提示“内存不能为read”是什么意思_“内存不能为read”错误的原因与解决办法windows提示“内存不能为read”是什么意思_“内存不能为read”错误的原因与解决办法

    首先检查软件兼容性,右键程序属性→兼容性模式运行;其次用mdsched.exe检测内存硬件;更新显卡驱动;通过任务管理器关闭高占用冲突程序;最后以管理员身份运行sfc /scannow修复系统文件。 如果您在使用Windows系统时遇到“内存不能为read”的提示,通常意味着程序试图访问的内存地址无…

    2026年9月30日 • 用户投稿
    100
  • 炫书网全集小说免费看_炫书网TXT下载直达站

    炫书网全集小说免费看_炫书网TXT下载直达站炫书网全集小说免费看_炫书网TXT下载直达站炫书网全集小说免费看_炫书网TXT下载直达站炫书网全集小说免费看_炫书网TXT下载直达站

    炫书网全集小说免费看入口是https://www.xsw.la/,该网站资源丰富,涵盖多种题材类型的小说,持续更新连载作品并提供经典完结小说合集,支持多作者作品集中展示;阅读体验优化,界面简洁清晰,文字排版适配多端,内置夜间模式和字体调节功能,章节跳转流畅且加载速度快;支持TXT格式一键下载和批量下…

    2026年9月30日 • 用户投稿
    000
  • 使用Sublime搭建微服务架构初探_服务拆分与独立接口模块示范

    使用Sublime搭建微服务架构初探_服务拆分与独立接口模块示范使用Sublime搭建微服务架构初探_服务拆分与独立接口模块示范使用Sublime搭建微服务架构初探_服务拆分与独立接口模块示范使用Sublime搭建微服务架构初探_服务拆分与独立接口模块示范

    搭建微服务架构从简单服务拆分开始,使用sublime text也能实现。1. 服务拆分:将单体应用按功能拆分为独立服务,如用户管理、订单处理,分别创建文件夹模拟模块,每个服务只处理自身职责。2. 独立接口设计:使用flask或fastapi构建rest接口,明确服务间通信方式,统一命名、返回格式和错…

    2026年9月30日 • 用户投稿
    000
  • 业绩承压后,涪陵榨菜开始“不务正业”了?

    业绩承压后,涪陵榨菜开始“不务正业”了?业绩承压后,涪陵榨菜开始“不务正业”了?业绩承压后,涪陵榨菜开始“不务正业”了?业绩承压后,涪陵榨菜开始“不务正业”了?

    近日,国内榨菜行业龙头企业涪陵榨菜透露,公司已开通休闲零食渠道,并推出多款休闲零食属性产品,包括自研产品“小脆口”、品牌联营的“开味说”多种口味花生以及其他定制型产品,未来,公司还将不断创新、拓展休闲零食渠道。这意味着,涪陵榨菜正在从传统佐餐食品领域向多元化消费场景转型。 涪陵榨菜进军休闲零食赛道的…

    2026年9月30日 • 用户投稿
    000
  • 洋人涌入小红书,如何接住这波“泼天富贵”?

    洋人涌入小红书,如何接住这波“泼天富贵”?洋人涌入小红书,如何接住这波“泼天富贵”?洋人涌入小红书,如何接住这波“泼天富贵”?洋人涌入小红书,如何接住这波“泼天富贵”?

    小红书意外爆火,美国区app store榜首,背后的原因与机遇 最近小红书App在美国区App Store登顶,引发广泛关注。大量涌入的美国用户,以及由此产生的文化碰撞,为品牌和创业者带来了新的机遇,但也带来了挑战。本文将深入探讨这一现象背后的原因,以及它对未来发展的影响。 TikTok禁令催生“难…

    2026年9月30日 • 用户投稿
    000
  • 我的世界谜之炖菜怎么制作 谜之炖菜合成方法介绍

    我的世界谜之炖菜怎么制作 谜之炖菜合成方法介绍我的世界谜之炖菜怎么制作 谜之炖菜合成方法介绍我的世界谜之炖菜怎么制作 谜之炖菜合成方法介绍我的世界谜之炖菜怎么制作 谜之炖菜合成方法介绍

    我的世界谜之炖菜可通过红色蘑菇、棕色蘑菇、碗和任意小型花合成,也能通过多种途径获取,食用后恢复饥饿值和饱和度,还会获得对应花的状态效果,以下是详细的物品介绍。 我的世界谜之炖菜合成方法和特性介绍如下: 一、合成方法 需准备红色蘑菇、棕色蘑菇、碗和任意小型花,将这些材料在工作台合成即可获得谜之炖菜。 …

    2026年9月30日 • 用户投稿
    200
  • 豆包AI编程详细教程 豆包AI代码编写技巧

    豆包AI编程详细教程 豆包AI代码编写技巧豆包AI编程详细教程 豆包AI代码编写技巧豆包AI编程详细教程 豆包AI代码编写技巧豆包AI编程详细教程 豆包AI代码编写技巧

    豆包ai编程的关键在于明确需求和有效协作。1.使用时需先确定功能目标和编程语言,如输入“用python写一个判断回文的函数”即可生成代码片段;2.遇到问题可直接提供错误信息让ai分析原因,或要求添加注释辅助理解;3.提高代码质量方面,可让ai扮演评审角色,检查命名、风格并提出重构建议,还可格式化代码…

    2026年9月30日 • 用户投稿
    000
  • 致敬《战神》?玩家发现《消逝的光芒:困兽》彩蛋回旋斧!

    来购买《消逝的光芒:困兽》,金币折扣+领取专属券折上折后标准版200.9元(总计便宜47.1元);豪华版233.2元(总计便宜54.8元)。 由Techland开发的《消逝的光芒:困兽》已经正式发售,在系列此前的两部作品中,就曾有过不少致敬其他游戏作品的彩蛋,而这款新作也不例外。 博主@Okami1…

    2026年9月30日
    100
  • 英特尔的ARC显卡现在值得入手了吗?

    ARC显卡适合1080P游戏和视频剪辑,但4K游戏性能不足,创作软件兼容性有限,驱动进步明显但仍存短板,整体性价比可,特定需求下值得考虑。 英特尔的ARC显卡现在值不值得买,关键看你用来做什么。整体来看,它在特定领域有亮点,但综合体验和生态支持仍是短板。 游戏性能:中高画质1080P尚可,4K压力大…

    2026年9月30日
    500
  • PHP表单处理:优雅地验证HTML Unicode符号值

    本教程探讨了在PHP中处理HTML表单提交的Unicode字符验证问题。当HTML表单元素的值包含如✘等Unicode实体时,PHP脚本直接比较可能会失败。文章详细介绍了如何利用HTML zuojiankuohaophpcnbutton> 元素的特性,将用户界面显示的特殊符号(如✘)与实际提交…

    2026年9月30日
    000
  • 解决手机或电脑连接问题的方法(轻松应对手机或电脑连接困扰)

    解决手机或电脑连接问题的方法(轻松应对手机或电脑连接困扰)解决手机或电脑连接问题的方法(轻松应对手机或电脑连接困扰)解决手机或电脑连接问题的方法(轻松应对手机或电脑连接困扰)解决手机或电脑连接问题的方法(轻松应对手机或电脑连接困扰)

    在现代科技发达的时代,手机和电脑已经成为人们日常生活中必不可少的工具。然而,有时我们会遇到手机或电脑连接问题,导致无法正常使用互联网、通话、传输文件等功能。针对这一问题,本文将为大家介绍一些常见的连接问题及解决方法,帮助大家轻松应对。 1. 网络信号弱导致连接问题 当你的设备连接 Wi-Fi 时出现…

    2026年9月30日 • 用户投稿
    100
  • thinkphp怎么实现不同设备的登录

    在现代社会中,互联网成为人们不可或缺的一部分,许多网站和应用程序经过设计,使其可以在不同设备上使用。然而,在不同设备上进行登录,却是一个让许多开发者头疼的问题。本文将介绍如何在thinkphp应用程序中实现不同设备的登录。 一、认识设备类型 在实现不同设备登录之前,我们需要先了解设备类型。设备类型通…

    2026年9月30日
    000
  • 致敬高能量女生:科学家品牌如何用情感营销引发共鸣

    致敬高能量女生:科学家品牌如何用情感营销引发共鸣致敬高能量女生:科学家品牌如何用情感营销引发共鸣致敬高能量女生:科学家品牌如何用情感营销引发共鸣致敬高能量女生:科学家品牌如何用情感营销引发共鸣

    绽媄娅2025年三八妇女节营销案例:致敬高能量女性,引发情感共鸣 2025年,绽媄娅敏锐洞察到现代女性在快节奏生活和多重角色压力下的强大内心,推出短片《那就,再来》,向所有高能量女性致敬,并在3月8日国际妇女节为她们打造了一方精神慰藉之地。 这并非简单的自我感动,而是基于对女性真实需求的精准洞察,并…

    2026年9月30日 • 用户投稿
    000
  • Docker安装Symfony:实现快速开发

    Docker安装Symfony:实现快速开发Docker安装Symfony:实现快速开发Docker安装Symfony:实现快速开发Docker安装Symfony:实现快速开发

    Docker安装Symfony:实现快速开发 前言:Symfony是一个流行的PHP框架,它提供了许多工具和组件,可以帮助开发者快速构建高质量的Web应用程序。而Docker是一种容器化平台,可以实现应用的快速部署和环境的隔离。在本文中,我们将探讨如何使用Docker进行Symfony的安装和配置,…

    2026年9月30日 • 用户投稿
    000
  • “OLD和NEW关键字使我们能够访问受触发器影响的行中的列。”

    “OLD和NEW关键字使我们能够访问受触发器影响的行中的列。”“OLD和NEW关键字使我们能够访问受触发器影响的行中的列。”“OLD和NEW关键字使我们能够访问受触发器影响的行中的列。”“OLD和NEW关键字使我们能够访问受触发器影响的行中的列。”

    正如我们所知,在触发器定义中,我们可以引用正在插入、更新或删除的行的列。以下是OLD和NEW关键字使我们能够访问列的方式: 我们必须在列名前加上一个OLD限定符,以引用原始行中的值。 我们必须在列名前加上NEW限定符,以引用新行中的值。 现在,必须适当地使用OLD和NEW,因为触发事件 确定哪些是允…

    2026年9月30日 • 用户投稿
    100
  • KOOK网页版入口直达 _ Kook官方PC版登录下载

    KOOK网页版入口直达 _ Kook官方PC版登录下载KOOK网页版入口直达 _ Kook官方PC版登录下载KOOK网页版入口直达 _ Kook官方PC版登录下载KOOK网页版入口直达 _ Kook官方PC版登录下载

    KOOK网页版入口直达地址在哪里?这是不少网友都关注的,接下来由PHP小编为大家带来KOOK网页版入口直达,感兴趣的网友一起随小编来瞧瞧吧! https://www.kookapp.cn/ 平台访问与登录方式 1、用户可通过上述官方网址直接进入KOOK网页版界面,在页面右上角找到“登录”按钮进行账号…

    2026年9月30日 • 用户投稿
    500

发表回复

登录后才能评论
关注微信