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
]

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

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

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

相关文章

基于.Net Core实现自定义皮肤WidForm窗口

基于.Net Core实现自定义皮肤WidForm窗口

前言 今天一起来实现基于.Net Core、Windows Form实现自定义窗口皮肤，并实现窗口移动功能。 素材 准备素材：边框、标题栏、关闭按钮图标。 窗体设计 1、创建Window窗体项目 2、窗体设计 拖拉4个Panel控件，分别用于：标题栏、关…
阅读更多...
【Redis】基础数据结构-字典

【Redis】基础数据结构-字典

Redis 字典 基本语法 字典是Redis中的一种数据结构，底层使用哈希表实现，一个哈希表中可以存储多个键值对，它的语法如下，其中KEY为键，field和value为值（也是一个键值对）： HSET key…
阅读更多...
基于SSM农产品商城系统

基于SSM农产品商城系统

基于SSM农产品商城系统的设计与实现，前后端分离，文档 开发语言：Java数据库：MySQL技术：SpringSpringMVCMyBatisVue工具：IDEA/Ecilpse、Navicat、Maven 系统展示 农产品列表 产品详情 个人中心 登陆界面 管…
阅读更多...
以太网基础学习（二）——ARP协议

以太网基础学习（二）——ARP协议

一、什么是MAC地址 MAC地址（英语：Media Access Control Address），直译为媒体访问控制位址，也称为局域网地址（LAN Address），MAC位址，以太网地址（Ethernet Addr…
阅读更多...
【算法训练-字符串 三】字符串相加

【算法训练-字符串 三】字符串相加

废话不多说，喊一句号子鼓励自己：程序员永不失业，程序员走向架构！本篇Blog的主题是【字符串相加】，使用【字符串】这个基本的数据结构来实现，这个高频题的站点是：CodeTop，筛选条件为&…
阅读更多...
电脑突然提示mfc140u.dll丢失，缺失mfc140u.dll无法运行程序的解决方法

电脑突然提示mfc140u.dll丢失，缺失mfc140u.dll无法运行程序的解决方法

在当今信息化社会，电脑已经成为我们生活和工作中不可或缺的一部分。然而，随着技术的不断发展，电脑也会出现各种问题。其中，最常见的问题之一就是“mfc140u.dll丢失”。那么，当我们遇到这个问题时，应该如何解…
阅读更多...
ISP图像信号处理——白平衡校正和标定介绍以及C++实现

ISP图像信号处理——白平衡校正和标定介绍以及C++实现

从数码相机直接输出的未经过处理过的RAW图到平常看到的JEPG图有一系列复杂的图像信号处理过程，称作ISP（Image Signal Processing）。这个过程会经过图像处理和压缩。 参考文章1：http://t.csdn.cn/LvHH5 参考文章2：htt…
阅读更多...
WebSocket实战之四WSS配置

WebSocket实战之四WSS配置

一、前言 上一篇文章WebSocket实战之三遇上PAC ，碰到的问题只能上安全的WebSocket（WSS）才能解决，配置证书还是挺麻烦的，主要是每年都需要重新更新证书，我配置过的证书最长有效期也只有两年，搞不…
阅读更多...
【数据结构】排序(2)—冒泡排序 快速排序

【数据结构】排序(2)—冒泡排序 快速排序

目录 一. 冒泡排序 基本思想 代码实现 时间和空间复杂度 稳定性 二. 快速排序 基本思想 代码实现 hoare法 挖坑法 前后指针法 时间和空间复杂度 稳定性 一. 冒泡排序 基本思想 冒泡排序是一种交换排序。两两比较数组元素，如果是逆序(即排列顺序与排序后…
阅读更多...
定时任务管理平台青龙 QingLong

定时任务管理平台青龙 QingLong

一、关于 QingLong 1.1 QingLong 介绍 青龙面板是支持 Python3、JavaScript、Shell、Typescript 多语言的定时任务管理平台，支持在线管理脚本和日志等。其功能丰富，能够满足大部分需求场景，值得一试。 主要功能 支持多种脚本语言&#xf…
阅读更多...
explicit关键字

explicit关键字

目录 修饰构造函数 修饰转换运算符 主要用于修饰构造函数或者转换运算符，为了增强类型安全性和防止意外的类型转换，防止他们被编译器隐式地用于类型转换。 修饰构造函数 class MyString { public:MyString(const char* str) { /*...*/ }// ... };voi…
阅读更多...
我的企业证书是正常的但是下载应用app到手机提示无法安装“app名字”无法安装此app，因为无法验证其完整性解决方案

我的企业证书是正常的但是下载应用app到手机提示无法安装“app名字”无法安装此app，因为无法验证其完整性解决方案

我的企业证书是正常的但是下载应用app到手机提示无法安装“app名字”无法安装此app，因为无法验证其完整性解决方案 首先，确保您从可信任的来源下载并安装企业开发者签名过的应用程序。如果您不确定应用程序的来源，建议您联系应用程序提供者…
阅读更多...
你写过的最蠢的代码是？——AI领域的奇妙体验

你写过的最蠢的代码是？——AI领域的奇妙体验

🌷🍁 博主猫头虎（🐅🐾）带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…
阅读更多...
Redis与分布式-哨兵模式

Redis与分布式-哨兵模式

接上文 Redis与分布式-主从复制 1.哨兵模式 启动一个哨兵，只需要修改配置文件即可， sentinel monitor lbwnb 1247.0.0.1 6001 1先将所有服务关闭，然后修改配置文件，redis Master，redis Slave，redis Slave…
阅读更多...
源码系列 之 ThreadLocal

源码系列 之 ThreadLocal

简介 ThreadLocal的作用是做数据隔离，存储的变量只属于当前线程，相当于当前线程的局部变量，多线程环境下，不会被别的线程访问与修改。常用于存储线程私有成员变量、上下文，和用于同一线程，不同层级方法间传…
阅读更多...
复习C语言数组的用法

复习C语言数组的用法

实验内容 1.1设计一个函数fun&#xff0c;功能是有N*N的矩阵&#xff0c;根据给定的m值&#xff0c;m<N,将每行元素中的值&#xff0c;均往右移m个位置&#xff0c;左边置0 #include<stdio.h> void fun(int (*a)[3],int m){int n,j,i,k,num;int p2;//右移位置列数nu…
阅读更多...
基于体素场景的摄像机穿模处理

基于体素场景的摄像机穿模处理

基于上一篇一种基于体素的射线检测 使用射线处理第三人称摄像头穿模问题 基于体素的第三人称摄像机拉近简单处理 摄像机移动至碰撞点处 简单的从角色身上发射一条射线到摄像机&#xff0c;中途遇到碰撞就把摄像机移动至该碰撞点 public void UpdateDistance(float defaultDist…
阅读更多...
OpenGL之光照贴图

OpenGL之光照贴图

我们需要拓展之前的系统，引入漫反射和镜面光贴图(Map)。这允许我们对物体的漫反射分量和镜面光分量有着更精确的控制。 漫反射贴图 我们希望通过某种方式对物体的每个片段单独设置漫反射颜色。我们仅仅是对同样的原理使用了不同的名字：其实都是使用一张覆盖物体的图像，让我…
阅读更多...
Linux--socket编程--服务端代码

Linux--socket编程--服务端代码

查看struct sockaddr_in包含的东西&#xff1a; 在/user/include下搜索&#xff1a;grep "struct sockaddr_in { " * -nir r : 递归 i &#xff1a; 不区分大小写 n : 显示行号 socket编程–服务端代码 /* 1、调用 socket 创建套接字 2、调用 bind 添加地址 3、lis…
阅读更多...
apache服务器出现No input file specified.解决方案

apache服务器出现No input file specified.解决方案

APACHE服务器出现No input file specified.解决方案 thinkcmf程序默认的.htaccess里面的规则&#xff1a; <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ index.php/$1 [QSA…
阅读更多...
最新文章

Copyright @ 2022~2023