JavaScript创建和填充数组的更多方法

空数组+fill()方法创建并填充数组

● 我们之前创建数组的方式都是手动去创建去一个数据,例如

console.log([1, 2, 3, 4, 5, 6, 7]);

● 当然我们也可以使用Array对象来构造数组

console.log([1, 2, 3, 4, 5, 6, 7]);
console.log(new Array(1, 2, 3, 4, 5, 6, 7));

在这里插入图片描述

● 再看一个创建数组的案例,

const x = new Array(7);
console.log(x);

这并不会创建一个只有为7值得数据,然后创建一个长度为7得空数组
在这里插入图片描述

const x = new Array(7);
console.log(x.map(() => 5));

通过map方法去填充整个数组,但是这个并做不到,因为map方法只能有有值的情况进行替换,未定义的无法替换
在这里插入图片描述

● 我们可以使用fill方法去填充

const x = new Array(7);
console.log(x.map(() => 5));x.fill(6);
console.log(x);

在这里插入图片描述

● fill方法和slice方法类似,我们也可以传入参数,让他知道替换数组中的哪些值

x.fill(1, 3, 5);
console.log(x);

将数组中index为3到5的填充1

在这里插入图片描述

Array.from

● fill方法虽然很好用,但是如果想创建[1,2,3,4,5,6,7]这样的数组的话,还是要使用Array.from方法更为简单
● 首先Array.from方法也可以简答的填充数组,和fill类似

const y = Array.from({ length: 7 }, () => 1);
console.log(y);

在这里插入图片描述

● 当然,我们也可以生成我们1-7的那种数组

const z = Array.from({ length: 7 }, (cur, i) => i + 1);
console.log(z);

在这里插入图片描述

● 实际用例,例如我们想得到下面这个页面所有存取款记录的数字部分
在这里插入图片描述

labelBalance.addEventListener('click', function () {  //创建点击时间,因为必须要登录之后才能确定刷新UI才能读取到movements__valueconst movementsUI = Array.from(  document.querySelectorAll('.movements__value'),//通过选择器选中所有movements__value元素el => Number(el.textContent.replace('€', ''))//将这些元素作为参数,获取文本内容,并将€替换为空);console.log(movementsUI); //输出
});

在这里插入图片描述

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

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

相关文章

Java毕业设计 基于SpringBoot vue城镇保障性住房管理系统

Java毕业设计 基于SpringBoot vue城镇保障性住房管理系统 SpringBoot 城镇保障性住房管理系统 功能介绍 首页 图片轮播 房源信息 房源详情 申请房源 公示信息 公示详情 登录注册 个人中心 留言反馈 后台管理 登录 个人中心 修改密码 个人信息 用户管理 房屋类型 房源信息管理…

【算法基础实验】图论-UnionFind连通性检测之quick-find

Union-Find连通性检测之quick-find 理论基础 在图论和计算机科学中,Union-Find 或并查集是一种用于处理一组元素分成的多个不相交集合(即连通分量)的情况,并能快速回答这组元素中任意两个元素是否在同一集合中的问题。Union-Fin…

【React】Sigma.js框架网络图-入门篇(2)

通过《【React】Sigma.js框架网络图-入门篇》有了基本认识 由于上一篇直接给出了基本代码示例,可能看着比较复杂也不知道是啥意思; 今天从理论入手重新认识下! 一、基本认识 首先,我们先了解下基础术语: 图(Graph)&…

随笔 | 宿舍矛盾

室友A:睡觉时间比较早 室友B:睡觉时间比较晚,起床时间也晚 室友C:睡的晚,起的早 我:睡的时间随机,起的较早 事件1: 某一个星期四的中午,我正在听歌。室友C跟我说:我们去打扫卫生吧。于是&am…

CPPTest实例分析(C++ Test)

1 概述 CppTest是一个可移植、功能强大但简单的单元测试框架,用于处理C中的自动化测试。重点在于可用性和可扩展性。支持多种输出格式,并且可以轻松添加新的输出格式。 CppTest下载地址:下载地址1  下载地址2 下面结合实例分析下CppTest如…

【Linux网络】FTP服务

目录 一、FTP简介 1.FTP-文件传输协议 2.FTP的两种模式 二、安装配置FTP 1.安装环境 2.对文件的操作 3.切换目录 4.设置匿名用户 5.图形化界面登录 6.白名单与黑名单 重点与难点 一、FTP简介 1.FTP-文件传输协议 FTP是FileTransferProtocol(文件传输协…

【论文笔记 | 异步联邦】PORT:How Asynchronous can Federated Learning Be?

1. 论文信息 How Asynchronous can Federated Learning Be?2022 IEEE/ACM 30th International Symposium on Quality of Service (IWQoS). IEEE, 2022,不属于ccf认定 2. introduction 2.1. 背景: 现有的异步FL文献中设计的启发式方法都只反映设计空…

php反序列化字符串逃逸

字符串逃逸 字符串逃逸是通过改变序列化字符串的长度造成的php反序列化漏洞 一般是因为替换函数使得字符串长度发生变化,不论变长还是变短,原理都大致相同 在学习之前,要先了解序列化字符串的结构,在了解结构的基础上才能更好理解…

ASP.NET某企业信息管理系统的设计与实现

摘 要 信息管理系统就是我们常说的MIS(Management Information System),它是一个计算机软硬件资源以及数据库的人-机系统。经过对题目和内容的分析,选用了Microsoft公司的ASP.NET开发工具,由于它提供了用于从数据库中访问数据的强大工具集,使用它可以建立开发比较完善的数据库…

汽车底盘域的学习笔记

前言:底盘域分为传统车型底盘域和新能源车型底盘域(新能源系统又可以分为纯电和混动车型,有时间可以再研究一下) 1:传统车型底盘域 细分的话可以分为四个子系统 传动系统 行驶系统 转向系统 制动系统 1.1传动系…

第29天:安全开发-JS应用DOM树加密编码库断点调试逆向分析元素属性操作

第二十九天 一、JS技术-DOM树操作及安全隐患 1.DOM:文档操作对象 获取HTML代码中函数的值,可以操作网页代码内容,实现自主或用户交互动作反馈 安全问题:本身的前端代码通过DOM技术实现代码的更新修改,但是更新修改如…

鸿蒙APP开发页面组件之间的属性关系

我们将对于多页面以及更多有趣的功能展开叙述,这次我们对于 HarmonyOS 的很多有趣常用组件并引出一些其他概念以及解决方案、页面跳转传值、生命周期、启动模式(UiAbility),样式的书写、状态管理以及动画等方面进行探讨 页面之间…

Web前端一套全部清晰 ③ day2 HTML 标签综合案例

别让平淡生活&#xff0c;耗尽所有向往 —— 24.4.26 综合案例 —— 一切都会好的 网页制作思路&#xff1a;从上到下&#xff0c;先整体到局部&#xff0c;逐步分析制作 分析内容 ——> 写代码 ——>保存——>刷新浏览器&#xff0c;看效果 <!DOCTYPE html> &l…

OSPF域间路由

注&#xff1a;区域&#xff08;area&#xff09;是以接口进行划分的 描述&#xff1a; R1的g0/0/1接口属于area 0 √ R1属于区域0和区域1 1.设计原则 1、OSPF区域的设计原则&#xff1a; 骨干区域有且只能存在一个 非骨干区域必须和骨干区域相连 多区域时&#…

SystemUI KeyButtonView setDarkIntensity 解析

继承自 ImageView KeyButtonDrawable intensity为0时按键颜色为白色。 intensity为1时黑色为的调用堆栈&#xff1a; java.lang.NullPointerException: Attempt to invoke virtual method int java.lang.String.length() on a null object referenceat com.android.systemui.…

【JAVA】UDP与TCP套接字编程

目录 一、UDP数据报套接字编程 1、DatagramSocket API 2、DatagramPacket API 3、InetSocketAddress API 4、示例一 5、示例二 二、TCP流套接字编程 1、ServerSocket API 2、Socket API 3、TCP中的长短连接 4、示例一 5、示例二 一、UDP数据报套接字编程 1、Datag…

施耐德 Unity Pro 编程软件导入导出变量

适用范围 施耐德中高端PLC&#xff0c;使用的编程软件为 UnityPro &#xff08;最新版更名为 Ecostructure Control Expert&#xff09; 中端 PLC&#xff1a;Premium&#xff0c;M340高端 PLC&#xff1a;Quantum&#xff0c;M580 导出/导入变量 导出变量可导出【变量和 FB…

Java设计模式 _创建型模式_原型模式(Cloneable)

一、原型模式 1、原型模式&#xff08;Prototype Pattern&#xff09;是用于创建重复的对象&#xff0c;同时又能保证性能比较好。一般对付出较大代价获取到的实体对象进行克隆操作&#xff0c;可以提升性能。 2、实现思路&#xff1a; &#xff08;1&#xff09;、需要克隆的…

C基础语法速览

叠甲&#xff1a;以下文章主要是依靠我的实际编码学习中总结出来的经验之谈&#xff0c;求逻辑自洽&#xff0c;不能百分百保证正确&#xff0c;有错误、未定义、不合适的内容请尽情指出&#xff01; 文章目录 1.数据类型1.1.数据类型的常见分类1.2.数据类型的符号修饰1.3.数据…

面向对象设计与分析40讲(25)中介模式、代理模式、门面模式、桥接模式、适配器模式

文章目录 门面模式代理模式中介模式 之所以把这几个模式放到一起写&#xff0c;是因为它们的界限比较模糊&#xff0c;结构上没有明显的差别&#xff0c;差别只是语义上。 这几种模式在结构上都类似&#xff1a; 代理将原本A–>C的直接调用变成&#xff1a; A–>B–>…