”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 在 JavaScript 中创建数组:综合指南

在 JavaScript 中创建数组:综合指南

发布于2024-07-30
浏览:966

Creating Arrays in JavaScript: A Comprehensive Guide

在 JavaScript 中创建数组是一项基本任务,但即使是经验丰富的开发人员也可能会忽略一些细微差别和陷阱。让我们深入了解基础知识,并探索数组创建和操作的一些有趣的方面,您可能会发现它们具有启发性。

基本数组创建

创建数组的最简单方法是使用数组文字:

let arr = [];

然后您可以使用循环填充此数组:

for (let i = 0; i 



这将创建一个包含元素 [0, 1, 2, 3, 4] 的数组。但是,如果您创建一个空数组而不填充它,您将得到一个没有项目且没有空槽的数组。

使用数组构造函数

创建数组的另一种方法是使用数组构造函数:

let arr = Array(5);

当传递单个数字参数时,它会创建一个具有指定长度但没有实际元素的稀疏数组:

console.log(arr.length); // 5
console.log(arr); // [empty × 5]

稀疏数组

稀疏数组具有“空槽”,这可能会在使用 map、filter 或 forEach 等方法时导致意外行为。这些方法跳过空槽:

let arr = Array(5);
arr = arr.map((x, i) => i); // Still [empty × 5]

要填充这样的数组,需要手动设置值:

arr[0] = 2;
arr[4] = 3;
console.log(arr); // [2, empty × 3, 3]

处理稀疏数组

要有效处理稀疏数组,可以使用 fill 等方法来初始化值:

let arr = Array(5).fill(1);
console.log(arr); // [1, 1, 1, 1, 1]

但是填充对象或数组时要小心:

let arr = Array(5).fill({});
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}]

每个元素引用同一个对象。为了避免这种情况,请使用 map:

let arr = Array(5).fill(0).map(() => ({}));
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {}, {}, {}, {}]

Array.from 方法

Array.from 提供了一种从类似数组或可迭代对象创建数组的通用方法:

let arr = Array.from({ length: 5 }, (_, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]

创建二维数组时此方法也可以提供帮助:

let arr2D = Array.from({ length: 5 }, () => Array(5).fill(0));
arr2D[0][0] = 1;
console.log(arr2D); // [[1, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]

迭代数组

JavaScript 提供了多种迭代数组的方法,每种方法对稀疏数组的处理方式不同:

  • for 循环:处理每个索引,将空槽视为未定义。
  • for...in:迭代数组的索引,跳过空槽。
  • for...of:迭代值,将空槽视为未定义。

结论

了解 JavaScript 中数组创建和操作的复杂性可以帮助您避免常见陷阱并编写更高效的代码。无论您使用数组文字、数组构造函数还是 Array.from 和 fill 等方法,了解这些工具的工作原理都将使您能够在项目中有效地处理数组。

如果您发现本指南有帮助,请告诉我。我总是渴望创建更多深入研究 JavaScript 细节的内容。感谢您的阅读,祝您编码愉快!

版本声明 本文转载于:https://dev.to/sharoztanveer/creating-arrays-in-javascript-a-comprehensive-guide-8do?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 在映射到MySQL枚举列时,如何确保冬眠保留值?
    在映射到MySQL枚举列时,如何确保冬眠保留值?
    在hibernate中保存枚举值:故障排除错误的列type ,他们各自的映射至关重要。在Java中使用枚举类型时,至关重要的是,建立冬眠的方式如何映射到基础数据库。在您的情况下,您已将MySQL列定义为枚举,并在Java中创建了相应的枚举代码。但是,您遇到以下错误:“ MyApp中的错误列类型。...
    编程 发布于2025-02-07
  • 部分建立自己的AI-建立AI/ML开发环境
    部分建立自己的AI-建立AI/ML开发环境
    Author: Trix Cyrus Waymap Pentesting tool: Click Here TrixSec Github: Click Here TrixSec Telegram: Click Here Getting started with AI and Machine Lear...
    编程 发布于2025-02-07
  • 如何干净地删除匿名JavaScript事件处理程序?
    如何干净地删除匿名JavaScript事件处理程序?
    在这里工作/},false); 不幸的是,答案是否。除非在Creation中存储对处理程序的引用。要解决此问题,请考虑将事件处理程序存储在中心位置,例如页面的主要对象,请考虑将事件处理程序存储在中心位置,否则无法清理匿名事件处理程序。 。这允许在需要时轻松迭代和清洁处理程序。
    编程 发布于2025-02-07
  • 如何从Python中的字符串中删除表情符号:固定常见错误的初学者指南?
    如何从Python中的字符串中删除表情符号:固定常见错误的初学者指南?
    从python 导入编解码器 导入 text = codecs.decode('这狗\ u0001f602'.encode('utf-8'),'utf-8') 印刷(文字)#带有表情符号 emoji_pattern = re.compile(“ [”...
    编程 发布于2025-02-07
  • 我如何在GO中优雅终止多个goroutines?
    我如何在GO中优雅终止多个goroutines?
    协调终止多个goroutines 在Golang的多个Goroutines时,通常需要同步执行以使其同步以使其同步在一起。一种常见的方法是利用通道来完成信号。但是,如果Goroutines未按预期顺序终止,此方法可能会导致“写入封闭的频道”恐慌。使用goroutine coordination ...
    编程 发布于2025-02-07
  • 如何修复\“常规错误:2006 MySQL Server在插入数据时已经消失\”?
    如何修复\“常规错误:2006 MySQL Server在插入数据时已经消失\”?
    插入记录时如何解决“一般错误:2006 MySQL 服务器已消失”介绍:将数据插入 MySQL 数据库有时会导致错误“一般错误:2006 MySQL 服务器已消失”。当与服务器的连接丢失时会出现此错误,通常是由于 MySQL 配置中的两个变量之一所致。解决方案:解决此错误的关键是调整wait_tim...
    编程 发布于2025-02-07
  • 为什么php抛出\“ \'t可以在写入上下文中使用函数返回值\”?
    为什么php抛出\“ \'t可以在写入上下文中使用函数返回值\”?
    [2在写入上下文中返回值。具体来说,当您尝试在条件语句中使用函数的返回值时,出现了错误。写上下文是指修改变量或执行某种输出的代码。对于“无法在写入上下文中使用函数返回值”错误的情况下,函数返回值不是写入上下文的合适输入,因为它是语言构造而不是变量。解决此错误,您应该使用变量在写入上下文中使用函数返回...
    编程 发布于2025-02-07
  • 如何限制动态大小的父元素中元素的滚动范围?
    如何限制动态大小的父元素中元素的滚动范围?
    在交互式界面中实现垂直滚动元素的CSS高度限制 考虑一个布局,其中我们具有与可滚动的映射div一起移动的subollable map div用户的垂直滚动,同时保持其与固定侧边栏的对齐方式。但是,地图的滚动无限期扩展,超过了视口的高度,阻止用户访问页面页脚。 可以限制地图的滚动,我们可以利用CSS...
    编程 发布于2025-02-07
  • 可以在纯CS中将多个粘性元素彼此堆叠在一起吗?
    可以在纯CS中将多个粘性元素彼此堆叠在一起吗?
    </main> <section> ,但无法使其正常工作,如您所见。任何洞察力都将不胜感激! display:grid; { position:sticky; top:1em; z-index:1 1 ; { { { pos...
    编程 发布于2025-02-07
  • 如何在Java中获取当前的UTC/GMT日期和时间?
    如何在Java中获取当前的UTC/GMT日期和时间?
    如何在Java中的UTC或GMT中获取当前日期和时间?即时类代表时间表上的特定时刻在UTC中具有纳秒精度。要将此瞬间转换为更易读的字符串表示形式,您可以使用toString()方法: instant.now()。 2016-09-13T23:30:52.123Z 注意:在Java 8之前,Jav...
    编程 发布于2025-02-07
  • 背景线程如何阻止在长期运行过程中winforms应用中的UI冻结?
    背景线程如何阻止在长期运行过程中winforms应用中的UI冻结?
    [2 防止winforms ui用背景线程冻结了长期运行的操作 Winforms应用程序中的长期运行,尤其是使用 此方法保持UI响应能力,从而显着改善了用户体验。 .NET提供了几种管理背景线程的机制,每个机制都提供不同的控制级别: 线程管理选项。 threadpool.queueuserwo...
    编程 发布于2025-02-07
  • Objectaid UML Explorer如何帮助您从Java代码生成UML图?
    Objectaid UML Explorer如何帮助您从Java代码生成UML图?
    从Java代码生成UML图:一种综合方法此工具在现有代码中无缝运行,消除了反向反向的需求工程。关键功能包括:实时图更新代码中的更改,确保连续对齐。自动图与源代码和库更新。与重构操作的无缝集成,确保图表与代码修改保持同步。跨工作区的全局图更新,自动从版本控制中查看必要的图表以进行进一步的对齐。 ,在...
    编程 发布于2025-02-07
  • 如何在JavaScript对象中动态设置键?
    如何在JavaScript对象中动态设置键?
    如何为JavaScript对象变量创建动态键,尝试为JavaScript对象创建动态键,使用此Syntax jsObj['key' i] = 'example' 1;将不起作用。正确的方法采用方括号:他们维持一个长度属性,该属性反映了数字属性(索引)和一个数字属性的数量。标准对象没有模仿这...
    编程 发布于2025-02-07
  • 为什么我会得到\“ attributeError:module \'enum \'没有属性\'intflag \'\” python 3.6.1?
    为什么我会得到\“ attributeError:module \'enum \'没有属性\'intflag \'\” python 3.6.1?
    [ attributeError:module'enum'在python 3.6.1 一个可能的原因是Enum34软件包的存在,该软件包提供了与Python 3.4和更早版本的兼容性。但是,在Python 3.6及以后的情况下,不再需要Enum34的实现。要验证ENUM34是否正...
    编程 发布于2025-02-07
  • 如何使用Python的记录模块实现自定义处理?
    如何使用Python的记录模块实现自定义处理?
    使用Python的Loggging Module 确保正确处理和登录对于疑虑和维护的稳定性至关重要Python应用程序。尽管手动捕获和记录异常是一种可行的方法,但它可能乏味且容易出错。解决此问题,Python允许您覆盖默认的异常处理机制,并将其重定向为登录模块。这提供了一种方便而系统的方法来捕获和...
    编程 发布于2025-02-07

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3