当前位置: 首页 > news >正文

JavaScript内置对象 - Array数组(四)- 序列生成器

        序列生成器是生成一个指定起始值和结束值的序列,并且根据指定间隔长度,生成序列数组。

        完成此功能需要使用到Array内置对象的from()对象,以及类数组相关知识,前面几篇有相关案例进行演示。

地址一:JavaScript内置对象 - Array数组(二)- 方法_觉醒法师的博客-CSDN博客

地址二:JavaScript内置对象 - Array数组(三)- 自定义ArrayList_觉醒法师的博客-CSDN博客

一、类数组

        类数组对象,是指可以通过索引属性访问元素并且拥有 length 属性的对象。

        类数组对象和数组区别是类数组对象不对直接调用数组的方法,需要通过Function.call和Funcation.apply来间接调用。

        类数组对象是从零开始,且以递增的整数为键名,定义了length表示 元素个数的对象,叫做类数组对象。

        对于类数组和Array.from()方法,不少人应该比较陌生,希望通过此案例让大家了解到它们的功能及便捷之处。

示例:

const objArr = { 0: "How", 1: "are", 2: "you", length: 3 
}

二、from()方法

        Array.from() 方法从一个类似数组或可迭代对象创建一个新的数组并返回。from()方法具体可以去“地址一”中了解。这里咱们知道它可以将类数组转换为新的数组实例即可,示例如下:

const objArr = { 0: "How", 1: "are", 2: "you", length: 3 }console.log(Array.from(objArr));

输出结果如下:

[ 'How', 'are', 'you' ]

三、序列生成器实现

3.1 生成指定长度数组

        通过创建类数组,并指定其长度后,通过Array.from()方法将其转换为指定长度的空数组,然后通过循环实现元素递增功能。

示例:

/*** 序列生成器*/
const generatorSequence = (start, end, step) => {// 生成一个指定长度的空数组let arr = Array.from({ length: (end - start) / step + 1 });console.log(arr);
}// 生成0~9元素的数组,每递增为1
generatorSequence(0, 9, 1);

输出结果:

[
  undefined, undefined,
  undefined, undefined,
  undefined, undefined,
  undefined, undefined,
  undefined, undefined
]

3.2 实现递增功能

        Array.from()方法第二个参数指定,则新数组中的每个元素会执行该回调函数。所以这里可以利用此特性,将空数组中所有undefined循环递增为序列数值。

示例:

/*** 序列生成器*/
const generatorSequence = (start, end, step) => {// 生成一个指定长度的空数组// (_, i) 因为空数组,所以第一个参数 “_” 返回结果为undefined,第二个参数“i”为索引值let arr = Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));console.log(arr);
}// 生成0~9元素的数组,每递增为1
generatorSequence(0, 9, 1);

输出结果:

[
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]

        此时,序列生成器则已实现,此功能并不复杂,咱们再对其进行优化下,代码如下:

/*** 序列生成器*/
const generatorSequence = (start, end, step) =>  Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));// 生成0~9元素的数组,每递增为1
const arr = generatorSequence(0, 5, 1);
// 输出结果
console.log(arr);

输出结果:

[ 0, 1, 2, 3, 4, 5 ]

3.3 生成偶数

 示例:

/*** 序列生成器*/
const generatorSequence = (start, end, step) =>  Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));// 生成偶数
const arr = generatorSequence(0, 10, 2);
// 输出结果
console.log(arr);

输出结果:

[ 0, 2, 4, 6, 8, 10 ]

3.4 生成年份

示例:

/*** 序列生成器*/
const generatorSequence = (start, end, step) =>  Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));// 生成0~9元素的数组,每递增为1
const arr = generatorSequence(2010, 2023, 1);
// 输出结果
console.log(arr);

输出结果:

[
  2010, 2011, 2012,
  2013, 2014, 2015,
  2016, 2017, 2018,
  2019, 2020, 2021,
  2022, 2023
]

3.5 年份转换为Object

示例:

/*** 序列生成器*/
const generatorSequence = (start, end, step) =>  Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));// 生成0~9元素的数组,每递增为1
const arr = generatorSequence(2010, 2023, 1).map(item => {return {label: item,value: item}
});
// 输出结果
console.log(arr);

输出结果:

[
  { label: 2010, value: 2010 },
  { label: 2011, value: 2011 },
  { label: 2012, value: 2012 },
  { label: 2013, value: 2013 },
  { label: 2014, value: 2014 },
  { label: 2015, value: 2015 },
  { label: 2016, value: 2016 },
  { label: 2017, value: 2017 },
  { label: 2018, value: 2018 },
  { label: 2019, value: 2019 },
  { label: 2020, value: 2020 },
  { label: 2021, value: 2021 },
  { label: 2022, value: 2022 },
  { label: 2023, value: 2023 }
]

3.6 生成A~Z字母

        这里将使用到charCodeAt()方法,这是一个字符串方法,用于检索特定字符的Unicode值。当生成A~Z之间的Unicode码时,需要使用fromCharCode()方法,这也是字符串方法,用于将Unicode码转换为字符。

示例:

/*** 序列生成器*/
const generatorSequence = (start, end, step) =>  Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));
// 生成A~Z之间字符
const arr = generatorSequence('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1);
// 输出结果
console.log(arr);

输出结果:

[
  65, 66, 67, 68, 69, 70, 71, 72,
  73, 74, 75, 76, 77, 78, 79, 80,
  81, 82, 83, 84, 85, 86, 87, 88,
  89, 90
]

        以上则都是Unicode码,所以在生成序列数组后,可使用Array.map()方法将所有值转换为字符,代码如下:

/*** 序列生成器*/
const generatorSequence = (start, end, step) =>  Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));
// 生成A~Z之间字符
const arr = generatorSequence('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(item => String.fromCharCode(item));
// 输出结果
console.log(arr);

输出结果:

[
  'A', 'B', 'C', 'D', 'E', 'F',
  'G', 'H', 'I', 'J', 'K', 'L',
  'M', 'N', 'O', 'P', 'Q', 'R',
  'S', 'T', 'U', 'V', 'W', 'X',
  'Y', 'Z'
]

3.7 汉字生成

        字母既然能生成出来,汉字自然也可以。不过Unicode对汉字支持不怎么好,简体和繁体总共有六七万个汉字,UCS-2最多能表示65536个,所以Unicode只能排除一些几乎不用的汉字。

        示例:

/*** 序列生成器*/
const generatorSequence = (start, end, step) =>  Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));
// 生成汉字
const arr = generatorSequence('一'.charCodeAt(0), '二'.charCodeAt(0), 1).map(item => String.fromCharCode(item));
// 输出结果
console.log(arr);

输出结果:

[
  '一', '丁', '丂', '七', '丄', '丅', '丆', '万', '丈', '三', '上', '下',
  '丌', '不', '与', '丏', '丐', '丑', '丒', '专', '且', '丕', '世', '丗',
  '丘', '丙', '业', '丛', '东', '丝', '丞', '丟', '丠', '両', '丢', '丣',
  '两', '严', '並', '丧', '丨', '丩', '个', '丫', '丬', '中', '丮', '丯',
  '丰', '丱', '串', '丳', '临', '丵', '丶', '丷', '丸', '丹', '为', '主',
  '丼', '丽', '举', '丿', '乀', '乁', '乂', '乃', '乄', '久', '乆', '乇',
  '么', '义', '乊', '之', '乌', '乍', '乎', '乏', '乐', '乑', '乒', '乓',
  '乔', '乕', '乖', '乗', '乘', '乙', '乚', '乛', '乜', '九', '乞', '也',
  '习', '乡', '乢', '乣',
  ... 41 more items
]

        序列生成器相关功能暂时先介绍到这,希望对大家有用。

相关文章:

JavaScript内置对象 - Array数组(四)- 序列生成器

序列生成器是生成一个指定起始值和结束值的序列,并且根据指定间隔长度,生成序列数组。 完成此功能需要使用到Array内置对象的from()对象,以及类数组相关知识,前面几篇有相关案例进行演示。 地址一:JavaScript内置对象…...

GD32F103x IIC通信

1. IIC通信 1.IIC的介绍 IIC总线有两条串行线,其一是时钟线SCK(同步),其二是数据线SDA。只有一条数据线属于半双工。应用中,单片机常常作为主机,外围器件可以挂载多个。(当然主机也可以有多个。…...

什么是FOSS

FOSS 是指 自由和开放源码软件(Free and Open Source Software)。这并不意味着软件是免费的。它意味着软件的源代码是开放的,任何人都可以自由使用、研究和修改代码。这个原则允许人们像一个社区一样为软件的开发和改进做出贡献。...

C++语言GDAL批量裁剪多波段栅格图像:基于像元个数裁剪

本文介绍基于C 语言的GDAL模块,按照给定的像元行数与列数,批量裁剪大量多波段栅格遥感影像文件,并将所得到的裁剪后新的多波段遥感影像文件保存在指定路径中的方法。 在之前的文章中,我们多次介绍了在不同平台,或基于不…...

简单丝的tab切换栏(html/CSS)

#html <!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>CSS实现左右滑动选项卡效果</title><link rel"stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/meyer-res…...

LabVIEW开发带式谱感测技术

LabVIEW开发带式谱感测技术 如今&#xff0c;通过无线网络传输的数据量正在迅速增加&#xff0c;并导致频谱稀缺。超过数十亿的无线设备将被连接起来&#xff0c;并需要互联网接入。因此&#xff0c;无线电频谱管理方案的效率不足以授予对所有设备的访问权限。在频谱分配中&am…...

认识柔性数组

在C99中&#xff0c;结构中的最后一个元素允许是未知大小的数组&#xff0c;这就叫做柔性数组成员 限制条件是&#xff1a; 结构体中最后一个成员未知大小的数组 1.柔性数组的形式 那么我们怎样写一个柔性数组呢 typedef struct st_type {int i;int a[0];//柔性数组成员 }ty…...

熔断、限流、降级 —— SpringCloud Alibaba Sentinel

Sentinel 简介 Sentinel 是阿里中间件团队开源的&#xff0c;面向分布式服务架构的高可用流量防护组件&#xff0c;主要以流量为切入点&#xff0c;从限流、流量整形、熔断降级、系统负载保护、热点防护等多个维度来帮助开发者保障微服务的稳定性 Sentinel 提供了两个服务组件…...

python经典百题之反向输出数字

题目:输入一个整数&#xff0c;并将其反转后输出。 程序分析 我们需要对输入的整数进行反转&#xff0c;即将整数的数字反向排列。 方法1&#xff1a;使用字符串反转 解题思路 将整数转换为字符串&#xff0c;然后对字符串进行反转。 代码实现 def reverse_integer_usin…...

复习Day08:哈希表part01:242.有效的字母异位词、349. 两个数组的交集、1. 两数之和、160. 相交链表

之前的blog&#xff1a;https://blog.csdn.net/weixin_43303286/article/details/131765317 我用的方法是在leetcode再过一遍例题&#xff0c;明显会的就复制粘贴&#xff0c;之前没写出来就重写&#xff0c;然后从拓展题目中找题目来写。辅以Labuladong的文章看。然后刷题不用…...

用 Pytest+Allure 生成漂亮的 HTML 图形化测试报告

本篇文章将介绍如何使用开源的测试报告生成框架 Allure 生成规范、格式统一、美观的测试报告。 通过这篇文章的介绍&#xff0c;你将能够&#xff1a; 将 Allure 与 Pytest 测试框架相结合&#xff1b; 如何定制化测试报告内容 执行测试之后&#xff0c;生成 Allure 格式的测…...

Python字符串索引解码乱码谜题

输入数行“数字字母”字符组成的乱码字符串&#xff0c;根据谜题规则解码出乱码字符串中隐藏的单词信息。 (本笔记适合熟悉python字符串索引操作的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”…...

协议栈——收发数据(拼接网络包,自动重发,滑动窗口机制)

目录 协议栈何时发送数据&#xff5e; 数据长度 IP模块的分片功能 发送频率 网络包序号&#xff5e;利用syn拼接网络包ack确认网络包完整 确定偏移量 服务器ack确定收到数据总长度 序号作用 双端告知各自序号 协议栈自动重发机制 大致流程 ack等待时间如何调整 是…...

传输层协议——TCP、UDP

目录 1、UDP 协议&#xff08;用户数据报协议&#xff09; 协议特点 报文首部格式 2、TCP 协议&#xff08;传输控制协议&#xff09; 协议特点 报文首部格式 TCP连接建立时的三次握手 TCP拆除连接的四次挥手 TCP的流量控制 TCP的拥塞控制 3、传输层端口号 三类端口…...

优化您的Spring应用程序:缓存注解的精要指南

优化您的Spring应用程序&#xff1a;缓存注解的精要指南 前言详细说明1. Cacheable&#xff1a;2. CacheEvict&#xff1a;3. CachePut&#xff1a;4. Caching&#xff1a;5. CacheConfig&#xff1a; 项目中的实现前提使用 前言 当我们构建和运行Spring应用程序时&#xff0c…...

Java之原子性问题的解决

2. 原子性 2.1 volatile-问题 代码分析 : package com.itheima.myvolatile; ​ public class Demo {public static void main(String[] args) {MyThread1 t1 new MyThread1();t1.setName("小路同学");t1.start(); ​MyThread2 t2 new MyThread2();t2.setName(&q…...

实时目标检测:基于YOLOv3和OpenCV的摄像头应用

一、前言 随着人工智能和计算机视觉技术的不断发展,目标检测成为了智能监控、自动驾驶、机器人等领域的关键技术之一。实时目标检测更是对系统的反应速度和准确度提出了更高的要求。本文介绍使用OpenCV和YOLOv3实现实时目标检测的方法,演示如何使用OpenCV调用YOLOv3模型进行…...

【软考】4.2 关系代数

《 关系代数 》 表和表之间的逻辑运算 笛卡尔积&#xff1a;S1 x S2 投影&#xff1a;π&#xff1b;选择某一列&#xff08;属性&#xff09;&#xff1b;一个关系R的投影操作结果也是一个关系&#xff0c;记作Πa&#xff0c;它由从关系R中选出的A列元素构成&#xff1b;选择…...

STM32F4学习笔记读取芯片UID和MAC地址

一、简介 在嵌入式设备开发过程中有时会需要为设备设置唯一的ID用以标识设备唯一&#xff0c;比如要求同一总线上的所有设备ID不能重复&#xff0c;要求设备具体唯一的MAC地址等等。每个STM32微控制器都自带一个96位的唯一ID&#xff0c;这个ID在任何情况下都是唯一且不允许修…...

webpack优化策略

这三点是webpack优化策略的一部分&#xff0c;具体解释如下&#xff1a; 优化正则匹配&#xff08;Test&#xff09;&#xff1a;在webpack的配置中&#xff0c;test属性是一个正则表达式&#xff0c;用于匹配需要应用该loader的文件的扩展名。在您提供的代码中&#xff0c;te…...

讲讲项目里的仪表盘编辑器(三)布局组件

布局容器处理 看完前面两章的讲解&#xff0c;我们对仪表盘系统有了一个大概的理解。接着我们讲讲更深入的应用。 上文讲解的编辑器只是局限于平铺的组件集。而在编辑器中&#xff0c;还会有一种组件是布局容器。它允许其他组件拖拽进入在里面形成自己的一套布局。典型的有分页…...

Linux- 后台运行符、nohup、disown

& &在Unix-like的操作系统&#xff08;如Linux和macOS&#xff09;的shell中&#xff0c;特别是在Bash这样的shell中&#xff0c;经常用作后台运行符号。让我们深入了解一下其功能和用法。 &作为后台运行符号&#xff1a; 基本用法: 当我们在一个命令或者一组命令…...

开发过程教学——交友小程序

交友小程序 1. 我的基本信息2. 我的人脉2.1 我的关注2.2 我的粉丝 3. 我的视频4. 我的相册 特别注意&#xff1a;由于小程序分包限制2M以内&#xff0c;所以要注意图片和视频的处理。 1. 我的基本信息 数据库表&#xff1a; 我的基本信息我的登录退出记录我的登录状态&#x…...

正则表达式 Regular Expression学习

该文章内容为以下视频的学习笔记&#xff1a; 10分钟快速掌握正则表达式_哔哩哔哩_bilibili正则表达式在线测试工具&#xff1a;https://regex101.com/, 视频播放量 441829、弹幕量 1076、点赞数 19330、投硬币枚数 13662、收藏人数 26242、转发人数 2768, 视频作者 奇乐编程学…...

代谢组学最常用到的数据分析方法(五)

代谢组学是一门对某一生物或细胞所有低分子质量代谢产物&#xff08;以相对分子质量<1000的有机和无机的代谢物为研究核心区&#xff09;进行分析的新兴学科。因此从复杂的代谢组学数据中确定与所研究的现象有关的代谢物&#xff0c;筛选出候选生物标记物成为代谢物组学研究…...

105.从前序与中序遍历序列构造二叉树

力扣题目链接(opens new window) 根据一棵树的前序遍历与中序遍历构造二叉树。 注意: 你可以假设树中没有重复的元素。 例如&#xff0c;给出 前序遍历 preorder [3,9,20,15,7] 中序遍历 inorder [9,3,15,20,7] 返回如下的二叉树&#xff1a; class Solution { public:Tr…...

分支定界、分支切割、分支定价的区别

目录 1.从原理的角度 &#xff08;1&#xff09;分支定界&#xff1a; &#xff08;2&#xff09;分支切割&#xff1a; &#xff08;3&#xff09;分支定价&#xff1a; 2.从分支树的角度 &#xff08;1&#xff09;分支定界 &#xff08;2&#xff09;分支切割 &…...

数字IC前端学习笔记:数字乘法器的优化设计(阵列乘法器)

相关阅读 数字IC前端https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 数字信号处理作为微处理器的核心部件&#xff0c;是决定着总体处理器性能的因素之一&#xff0c;而数字乘法器是最常见的一种数字信号处理电路。通常情况下&#…...

批量删除wordpress文章修订版本/自动草稿残留数据(3种方法)及四种方法禁用WordPress文章历史修订/自动保存/自动草稿功能

目录 1、批量删除wordpress文章修订版本/自动草稿残留数据&#xff08;3种方法&#xff09; 方法一&#xff1a;SQL命令批量删除 命令&#xff1a; 方法二&#xff1a;利用PHP代码来删除 方法三&#xff1a;利用数据库清理优化插件 WP Clean Up 或 WP Cleaner 批量删除 2…...

HTTP初识,fiddler的使用,URL各部分介绍,QueryString

目录 一、什么是HTTP 二、抓包工具 三、请求的首行 URL 四、URL的各部分详细介绍 一、什么是HTTP 现在网页上&#xff0c;我们常见的是https,但是在二十年前是以http为主&#xff0c;这个协议也叫超文本传输协议&#xff0c;文本->字符串&#xff0c;“超文本”->图片…...

网站建设官方网站/免费seo网站优化

海量数据分成两块&#xff0c;一是系统建设技术&#xff0c;二&#xff0c;海量数据应用。 先说系统建设&#xff0c;现在主流的技术是HADOOP&#xff0c;主要基于mapreduce的分布式框架。目前可以先学习这个。但是我的观点&#xff0c;在分布式系统出来之前&#xff0c;主要是…...

网站做很多关键词/总裁班课程培训

现在都有手机了&#xff0c;办公人员有时需要在手机上识别文字&#xff0c;手机如何识别文字并翻译&#xff1f;其实传图识别很简单&#xff0c;只需要上传图片就可以。这里分享技巧。 1、在手机上点击搜索该迅捷PDF阅读器&#xff0c;然后开始翻译文本。 2、下载打开之后就是这…...

国家级建设网站/如何优化关键词排名快速首页

Delphi的VCL框架在创建应用时TApplication是一个自动创建的隐藏窗口&#xff0c;其它创建的窗口是自动以该窗口为窗口&#xff0c;这就导致创始的主窗口在任务栏的系统菜单只有三项&#xff0c;只要在主窗口的Create事件中将系统菜单用Application的系统菜单替换&#xff0c;并…...

网站生成海报功能怎么做/网站如何快速收录

1。确定c:\windows\system32\下有xcopy.exe文件 2。我的电脑---右键---属性----高级----环境变量----在系统变量中找到path(不分大小写&#xff09;---双击它----在其变量值 (V)中添加“c:\windows\system32”&#xff01;&#xff0c;添加方法为&#xff1a;在原变量值后面加英…...

建什么网站比较好/中国十大电商公司排名

1. 当点击某个按钮&#xff0c;后台其实进行了很多步的操作&#xff0c;但原型上无法体现的时候&#xff0c;我们需要尽可能地在原型上做好这些交互。 比如1&#xff1a; 点击添加按钮&#xff0c;添加一条信息&#xff0c;然后保存成功&#xff0c;显示这条信息。 实则后台的处…...

自己可以申请网站做外卖吗/国际新闻界官网

http://www.python3.vip/tut/auto/selenium/02/ 根据 class属性 选择元素 这个网址对应的html内容 有如下的部分 被测地址 http://cdn1.python3.vip/files/selenium/sample1.html <body><div class"plant"><span>土豆</span></div>&…...