四个初始化 JavaScript Array数组方法及性能对比

Hi,这里是松桑,每天学习一个 JS 片段,涨涨🧀!今天带来的是四个初始化 JavaScript Array数组方法。

在 JavaScript 中初始化数组是常见的场景,初始化有多种方法,创建性能也有差异。虽然可能没有一个放之四海而皆准的解决方案,但是有一些选项您可能需要考虑。

一、Array() 构造函数

首先想到的就是 Array ()构造函数,与直觉相反,这可能是最有问题的初始化数组方法。虽然它适用于任意数量的参数来创建具有给定值的数组,但是在其他任何地方它都不能满足要求。

const arr = Array(3); // [ , , ] - 3个空槽
arr.map(() => 1); // [ , , ] - map() 会跳过空槽
arr.map((_, i) => i); // [ , , ] - map() 会跳过空槽
arr[0]; // undefined - 实际上是一个空槽

注意:

  • 调用 Array() 时可以使用或不使用 new。两者都会创建一个新的 Array 实例。

  • Array 构造函数传入数字来创建指定长度的数组,但存在填充结果均为空槽 undefined,而且在使用map时会直接跳过空槽。

二、Array.from()

Array.from()是一个静态方法,它从类数组对象(带有 length 属性和索引元素的对象)或可迭代对象(例如 MapSet 对象)创建一个新的浅拷贝 Array 实例。

const arr = Array.from({ length: 3 }); // [undefined, undefined, undefined]
arr.map(() => 1); // [1, 1, 1]
arr.map((_, i) => i); // [0, 1, 2]
const staticArr = Array.from({ length: 3 }, () => 1); // [1, 1, 1]
const indexArr = Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]Array.from('foo');  // ["f", "o", "o"]

注意:

  • Array.from()对于将类数组对象(例如参数、 NodeList)或迭代器(例如 Set、 Map、 Generator)转换为实际数组非常有用;

  • Array.from()可通过传递一个具有 length 属性的对象,它可以当做类数组对象,“欺骗”它来创建一个给定长度的数组。这有点慢,但能避免 Array () 构造函数空槽会被map跳过的问题;

  • Array.from()允许将映射函数作为第二个参数传递,对于使用值初始化数组非常有用。

三、Array.prototype.fill()

虽然 Array.from ()非常灵活,但是使用映射函数将其填充为相同的值并不特别高效。Array.prototype.fill()允许使用相同的值填充现有数组,可以与 Array ()构造函数一起使用,避免直接用空槽填充数组。

const nullArr = new Array(3).fill(null); // [null, null, null]
const staticArr = Array.from({ length: 3 }).fill(1); // [1, 1, 1]
const indexArr = Array(3).fill(null).map((_, i) => i); // [0, 1, 2]

四、Array.prototype.map()

Array.from()允许通过第二个参数实现映射函数,但很多人认为这很难读懂。此外,还有一些边缘情况:在映射期间如何希望能够访问数组本身的话,可以使用 Map() 灵活处理;但是要注意,map 不能很好地处理空值。

const arr = Array(3).map(() => 1); // [ , , ] - map() skips empty slots
const staticArr = Array.from({ length: 3 }).map(() => 1); // [1, 1, 1]
const indexArr = Array.from({ length: 3 }).map((_, i) => i); // [0, 1, 2]
const fractionArr =Array.from({ length: 3 }).map((_, i, a) => i / a.length); // [0, 0.5, 1]

性能总结

如果这种操作在您的应用程序中非常常见,那么性能可能是一个问题,但是总的来说,这些选项都不是特别慢。Array ()构造函数似乎是最快的。如果与 Array.Prototype.fill ()组合,它可能是用单个值初始化数组的最佳选择。奇怪的是,即使随后链接 Array.Prototype.map ()调用以创建动态值,这种性能优势仍然存在。因此推荐的最佳使用方法如下:

// 单个值初始化数组
const initializeArrayWithValues = (n, val = 0) => Array(n).fill(val);
// 动态值初始化数组
const initializeMappedArray = (n, mapFn = (_, i) => i) =>Array(n).fill(null).map(mapFn);initializeArrayWithValues(4, 2); // [2, 2, 2, 2]
initializeMappedArray(4, (_, i) => i * 2); // [0, 2, 4, 6]

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

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

相关文章

深度神经网络——什么是 CNN(卷积神经网络)?

Facebook和Instagram自动检测图像中的面孔,Google通过上传照片搜索相似图片的功能,这些都是计算机视觉技术的实例,它们背后的核心技术是卷积神经网络(CNN)。那么,CNN究竟是什么呢?接下来&#x…

HTB 靶场 Mailing 未完待续

访问网页 在/etc/hosts 添加ip和域名 hosts 文件包含ip地址与主机名之间的映射,还包括主机的别名。 Linux系统所有程序查询/etc/hosts文件解析对主机名或者域名的IP地址。没有找到就需要使用DNS服务器解释域名。 DNS原理 1 输入域名,在本地缓存服务…

新手教程之使用LLaMa-Factory微调LLaMa3

文章目录 为什么要用LLaMa-Factory什么是LLaMa-FactoryLLaMa-Factory环境搭建微调LLaMA3参考博文 为什么要用LLaMa-Factory 如果你尝试过微调大模型,你就会知道,大模型的环境配置是非常繁琐的,需要安装大量的第三方库和依赖,甚至…

Kotlin协程中的作用域 `GlobalScope`、`lifecycleScope` 和 `viewModelScope`

Kotlin协程中的作用域 Kotlin协程提供了多种作用域来管理协程的生命周期,其中最常见的是 GlobalScope、lifecycleScope 和 viewModelScope。 1. GlobalScope GlobalScope 是一个全局作用域,不受任何其他生命周期的限制。这意味着在 GlobalScope 中启动…

【数据结构与算法 经典例题】链表的回文结构(图文详解)

💓 博客主页:倔强的石头的CSDN主页 📝Gitee主页:倔强的石头的gitee主页 ⏩ 文章专栏:《数据结构与算法 经典例题》C语言 期待您的关注 ​ 目录 一、问题描述 二、解题思路 三、C语言代码实现 一、问题描述 二、解…

Flutter 中的 Table 小部件:全面指南

Flutter 中的 Table 小部件:全面指南 Flutter 是一个由 Google 开发的跨平台 UI 框架,它允许开发者使用 Dart 语言构建高性能、美观的应用。在 Flutter 的丰富组件库中,Table 是一个用于创建表格布局的组件。本文将为您提供一个全面的指南&a…

zdppy_api如何实现带参数的中间件

参考代码 import timefrom api.middleware import Middleware from api.middleware.base import BaseHTTPMiddleware from api.exceptions import AuthException import jwthas_logger False try:from log import loggerhas_logger True except:passdef roleapi(has_auth_fu…

深度学习-07-反向传播的自动化

深度学习-07-反向传播的自动化 本文是《深度学习入门2-自製框架》 的学习笔记,记录自己学习心得,以及对重点知识的理解。如果内容对你有帮助,请支持正版,去购买正版书籍,支持正版书籍不仅是尊重作者的辛勤劳动&#xf…

OJ题目【栈和队列】

题目导入 栈: 题目一:有效的括号题目二:用栈实现队列 队列 题目:实现循环队列 栈 题目一 有效的括号 题目要求 给定一个只包括 ‘(’,‘)’,‘{’,‘}’,‘[’,‘…

LeetCode746使用最小花费爬楼梯

题目描述 给你一个整数数组 cost ,其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用,即可选择向上爬一个或者两个台阶。你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。请你计算并返回达到楼梯顶部的最低花费。 解析 动态…

负载均衡加权轮询算法

随机数加权轮询算法 public int select() {int[] weights {10, 20, 50};int totalWeight weights[0] weights[1] weights[2];// 取随机数int offset ThreadLocalRandom.current().nextInt(totalWeight);for (int i 0; i < weights.length; i) {offset - weights[i];i…

七校联赛题铅笔姿态及笔迹检测装置--mpu6050识别数字

前言 前几天打完比赛&#xff0c;收获还是挺大的&#xff0c;数字识别部分基本上浪费了绝大部分时间。先将思路简单说明。 1、题目 2、思路 针对笔迹检测&#xff0c;我们首先考虑的肯定是陀螺仪来测量加速度方向来判断书写的方向&#xff0c;从而得到书写的数字。 我们的方案…

LLM的基础模型3:Transformer变种

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调或者LLM背后的基础模型新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;则提…

【软件测试】自动化测试如何管理测试数据

前言 在之前的自动化测试框架相关文章中&#xff0c;无论是接口自动化还是UI自动化&#xff0c;都谈及data模块和config模块&#xff0c;也就是测试数据和配置文件。 随着自动化用例的不断增加&#xff0c;需要维护的测试数据也会越来越多&#xff0c;维护成本越来越高&#…

编译 freetype、sdl、sdl_ttf

/* * three lib */ /* 字符串生成位图 */ http://www.libsdl.org/projects/SDL_ttf/release/ http://www.libsdl.org/download-1.2.php https://freetype.org/ /* Freetype 2.13.0 */ ./configure CCaarch64-v01c01-linux-gnu-gcc --buildaarch64 …

一个简约而不简单的记账 App(一刻记账)

前言 在两年多前, 我曾经写过一个本地化的记账 App, 当时没有想过以后的发展. 全程是本地化的, 当时主要是为了练习 Compose 而写的. TallyApp 而现在一个完整的记账 App 它来了 一刻记账 算是圆了我两年前的梦了吧. 也让我可以真正的使用自己的记账软件. 下面是 一刻记账 记…

C++实现简单的线程池

最近在学习音视频的时候&#xff0c;解封装和解码的时候用到了多线程。于是把线程池的知识补了一下。 线程池的这个知识点有会涉及到锁&#xff0c;生产者消费者设计模式&#xff0c;纯虚函数继承等知识。在学习的时候可以根据知识点扩展延伸。 楼主在学习线程池这部分的时候没…

10 -力扣高频 SQL 50 题(基础版)

10 - 每台机器的进程平均运行时间 -- sum(if(activity_type end,timestamp ,-timestamp )) -- 如果activity_type为“end”,值为timestamp&#xff0c;为“start” 为-timestamp&#xff0c;所有数相加end-start -- count(distinct process_id),获取同一机器有几个进行id -- r…

鸿蒙HarmonyOS实战—如何使用Video组件播放视频

1.视频播放 鸿蒙系统中&#xff0c;关于视频播放&#xff0c;可以使用上层视频组件Video。 参数如下 src 支持file:///data/storage路径前缀的字符串&#xff0c;用于读取应用沙箱路径内的资源。需要保证目录包路径下的文件有可读权限。 说明&#xff1a;视频支持的格式是&am…

为何限定项目的 Node.js 版本

首先区分三个概念nvm&#xff0c;npm&#xff0c;nodejs。 Node.js: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。它允许开发者使用 JavaScript 在服务器端编写应用程序,而不仅限于在浏览器中运行 JavaScript。Node.js 提供了一系列内置的模块和 API,使得开发…