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 数组的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2672197.html

(0)
上一篇 2025年3月7日 13:23:00
下一篇 2025年2月23日 21:49:46

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何从 HTML 字符串创建 DOM 元素(多种方法)

    当我们需要创建简单的动态 html dom 元素时,我们可以使用 html 字符串模板。在 javascript 中有很多不同的方法可以实现这一点,但我们可能有一些考虑。 内部html const container = document.…

    2025年3月7日 编程技术
    200
  • 什么是 Kubernetes?印度讲故事风格

    Kubernetes 是一个帮助管理打包在容器中的计算机程序的工具。它确保这些程序顺利运行,即使有很多人在使用它们。 Kubernetes 可以根据需要启动或停止这些程序,将它们放在不同的计算机上,并确保它们正常工作。它对于需要同时处理许多…

    2025年3月7日
    200
  • 如何将 PostgreSQL 与 Nodejs 和 Sequelize 连接

    在使用数据库时,开发人员经常面临选择是使用原始数据库查询还是利用抽象出一些复杂性的库。 sequelize 就是这样一个库——一种流行的 node.js orm(对象关系映射器),可与 postgresql、mysql 和其他关系数据库配合…

    2025年3月7日
    200
  • 理解 JavaScript 中的作用域链

    在 javascript 中,作用域链是一种定义变量解析在嵌套函数中如何工作的机制。它决定了引用变量时查找变量的顺序。 作用域链的工作原理是首先在局部作用域中查找变量,然后向上移动到外部(父)作用域,最后在必要时查找全局作用域。这个过程一直…

    2025年3月7日
    200
  • 我如何在启动 ScriptKavi/Hooks 后数周内获得星星

    介绍 当我第一次构想 scriptkavi/hooks 时,我的目标是创建一个能够简化 React 应用程序中的状态管理和副作用的库。作为一名热衷于干净代码和高效开发工作流程的开发人员,我看到需要一种可以简化这些流程的工具。我几乎不知道,在…

    2025年3月7日
    200
  • 伟大的软件工程师出走:就业市场的转变

    介绍 世界正在见证一种现象,软件工程师正在积极寻找新的工作机会,导致寻找工作的工程师数量激增。这种趋势对科技行业、公司和工程师本身具有重大影响。 工程师寻找工作的普遍程度 最新统计数据表明: 超过70%的软件工程师正在积极寻找新的工作机会软…

    2025年3月7日
    200
  • 我给我的猫做了一个网站^~^

    sox 是一只英俊的年轻流浪猫,曾经在洛杉矶韩国城公寓大楼外的街道上漫步。现在他和他的新妈妈和爸爸住在里面。 (点击猫哈哈) 以上就是我给我的猫做了一个网站^~^的详细内容,更多请关注【创想鸟】其它相关文章!

    2025年3月7日
    200
  • 了解 JavaScript 中的原始数据类型

    javascript 有七种基本数据类型,每个开发人员都必须理解它们。这些类型构成了更复杂数据结构的构建块,对于高效编程至关重要。在本文中,我们将探讨 javascript 中的不同原始数据类型、它们的特性以及它们的使用方式。 什么是原始数…

    2025年3月7日
    200
  • Chrome、Safari 和 Firefox 中的用户代理减少

    简介:什么是用户代理减少和客户端提示? 近年来,隐私问题推动了浏览器处理用户代理字符串的方式发生了重大变化。传统上用于识别浏览器和设备信息的用户代理字符串已被减少以限制共享的信息量,从而保护用户隐私。为了解决减少用户代理的局限性,客户端提示…

    2025年3月7日
    200
  • Vuetify ayout Builder

    网址 https://vuetify-layout-builder.netlify.app/ 动机 我使用 Vuetify 一段时间了。我在搜索其他设计库时遇到了 Quasar Layout Builder。受到其功能的启发,我决定为 Vu…

    2025年3月7日
    200

发表回复

登录后才能评论