JS创建或填充任意长度数组的小技巧汇总

目录
  • 前言
  • 直接填充法
  • for 循环 push() 法
  • Array 构造函数法
    • 在 Array 构造函数后面加上 fill() 方法
    • 使用 undefined 填充数组
    • 使用 Array.from() 进行映射
    • 用值填充数组
    • 使用唯一（非共享的）对象创建数组
    • 用升序整数数列创建数组
    • 用任意范围的整数进行创建
    • 另一种创建升序整数数组的方法使用 keys()
  • 总结

前言

在 JavaScript 开发中，经常需要有需要创建特性长度数组的场景，本文总结了几种创建或填充任意长度的数组的小技巧，学会了可以提升编程效率。

直接填充法

采用最原始的方法，手动填充所需长度的数组。

const arr = [0,0,0];

for 循环 push() 法

和第一种方法差不多，只是使用 for 循环创建特定长度的数组

var len = 3;
var arr = [];
for (let i=0; i < len; i++) {
  arr.push(0);
}

Array 构造函数法

var len = 3;
var arr = new Array(len);

在 Array 构造函数后面加上 fill() 方法

var len = 3;
var arr = new Array(len).fill(0);

如果你用对象作为参数去 fill() 一个数组，所有元素都会引用同一个实例（也就是这个对象没有被克隆多份,Array.from() 则没有这个问题）：

var len = 3;
var obj = {};
var arr = new Array(len).fill(obj);

所以操作这个数组时应该比用构造函数创建的更快。不过创建数组的速度比较慢，因为引擎可能需要随着数组的增长多次重新分配连续的内存。

使用 undefined 填充数组

Array.from({length: 3})       // [ undefined, undefined, undefined ]

下面这种方式仅适用于可迭代的值，并且与 Array.from()具有类似的效果：

[...new Array(3)]             // [ undefined, undefined, undefined ]

使用 Array.from() 进行映射

如果提供映射函数作为其第二个参数，则可以使用 Array.from() 进行映射。

用值填充数组

Array.from({length: 3}, () => 0)        // [ 0, 0, 0 ]

使用唯一（非共享的）对象创建数组

Array.from({length: 3}, () => ({}))     // [ {}, {}, {} ]

用升序整数数列创建数组

Array.from({length: 3}, (x, i) => i)    // [ 0, 1, 2 ]

用任意范围的整数进行创建

var start = 2, end = 5;
Array.from({ length: end - start }, (x, i) => i + start)    // [ 2, 3, 4 ]

另一种创建升序整数数组的方法使用 keys()

[...new Array(3).keys()]              // [ 0, 1, 2 ]

总结

到此这篇关于JS创建或填充任意长度数组的小技巧的文章就介绍到这了,更多相关JS创建填充数组内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript动态创建二维数组的方法示例

    JavaScript动态创建二维数组的方法示例

    本文实例讲述了JavaScript动态创建二维数组的方法.分享给大家供大家参考,具体如下: 学过C语言的我太耿直 一般这种情况下我会直接 var arr = new Array[10][10]; 但是不出意外的话这样是会报错的,因为在js中根本没有这样的语法 在这之前,让我们先来回顾一下js中是怎么样创建一维数组的: 使用数组直接量,这个是最简单的,在方括号内将数组元素用逗号隔开即可: var arr = [ ]; //空数组 var s = [1,2,3,4]; //4个元素的数组 var n

  • javascript创建数组的最简代码

    日一二三四五六'.split('')  ['日','一','二','三','四','五','六']  Array('日','一','二','三','四','五','六')  new Array('日','一','二','三','四','五','六')  这里是输入的代码内容 w=document.writeln w("'日一二三四五六'.split('')") w('日一二三四五六'.split('')) w(['日','一','二','三','四','五','六']) w(Array

  • JavaScript 批量创建数组的方法

    JavaScript 批量创建数组的方法

    JavaScript有许多批量创建数组的方法,为了衡量它们的性能,我分别使用不同的方法创建一个长度为100000的数组,且键和值相等.同时,我定义了下面这个函数用来测量创建数组所耗费的时间: function t(fn) { var start = Date.now(); fn.call(this); var end = Date.now(); return (end - start) + 'ms'; } 以下为常用的几个创建数组的方法以及它们所耗费的时间: 使用join和split 该方法把大

  • js创建数组的简单方法

    1.数组的声明方法 (1): arrayObj = new Array(); //创建一个数组. 代码如下: var arr1 = new Array(); (2):arrayObj = new Array([size]) 创建一个数组并指定长度,注意不是上限,是长度. 代码如下: var a = new Array(5); (3):arrayObj = new Array([element0[, element1[, ...[, elementN]]]]) 创建一个数组并赋值. 代码如下: v

  • javascript数组操作(创建、元素删除、数组的拷贝)

    1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以

  • JS创建或填充任意长度数组的小技巧汇总

    目录 前言 直接填充法 for 循环 push() 法 Array 构造函数法 在 Array 构造函数后面加上 fill() 方法 使用 undefined 填充数组 使用 Array.from() 进行映射 用值填充数组 使用唯一(非共享的)对象创建数组 用升序整数数列创建数组 用任意范围的整数进行创建 另一种创建升序整数数组的方法使用 keys() 总结 前言 在 JavaScript 开发中,经常需要有需要创建特性长度数组的场景,本文总结了几种创建或填充任意长度的数组的小技巧,学会了可以

  • JS利用map整合双数组的小技巧分享

    JS利用map整合双数组的小技巧分享

    目录 前言 模拟数据 合并后数据 合并思路 代码展示&解析 第一步 第二步 第三步 第四步 全部代码 总结 前言 最近因公司业务需求编写ECharts图表展示相关公司阶段型业务相关数据变化,需要服务端进行数据查询返回给前端进行数据展示.但是由于反回的数据不便于前端 ECharts展示所以需要进行数据整合,奈何本人经验不足只能请教公司大佬,在大佬帮助下完成了数据整合,并学到一个前所未闻的合并方法今天分享给大家. 模拟数据 下图是将要被合并的两数组 合并后数据 合并后数据要求以时间为唯一的key进行

  • JavaScript数组常用操作技巧汇总

    本文实例汇总了JavaScript数组的常用操作技巧.分享给大家供大家参考.具体如下: 前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法.这里无非是对原生js的数组操作多了一些包装. 这里主要汇总一下JavaScript数组操作的常用API.相信对大家解决程序问题很有帮助. 一.性质 JavaScript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数.然而,这些数字索

  • 用js设置下拉框为只读的小技巧

    在项目开发过程中我们时常会碰到要设置下拉框为只读(readonly),但是可惜的是select没有只读属性,所以需要在select外面包含一个span,通过js来改变. 下面这段html代码是在struts2的下拉标签中加入了span标签,在页面装载的时候就让下拉框变成不可读. 复制代码 代码如下: <body onload="init()"> <span id="id_select"> <s:select name="sjd

  • vue.js项目中实用的小技巧汇总

    vue.js项目中实用的小技巧汇总

    前言 Vue.js 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm安装时,可能会出现一系列的错误 1.安装jQuery

  • js中split()方法得到的数组长度问题

    定义和用法 split() 方法用于把一个字符串分割成字符串数组. 语法 stringObject.split(separator,howmany) 参数 描述 separator 必需.字符串或正则表达式,从该参数指定的地方分割 stringObject. howmany 可选.该参数可指定返回的数组的最大长度.如果设置了该参数,返回的子串不会多于这个参数指定的数组.如果没有设置该参数,整个字符串都会被分割,不考虑它的长度. 返回值 一个字符串数组.该数组是通过在 separator 指定的边

  • Java任意长度byte数组转换为int数组的方法

    前言 嗯.最近工程上遇到一个byte数组转换为int的问题,解决过程中遇到了几个坑,经过各种查资料终于还是解决了.撒花. Java的位运算以及byte数组与其他类型数据的转换比c/c++感觉麻烦一些.这里简单说明一下byte数组和int的转换吧. 总所周知,int类型数据在Java中占据32 bit,byte占据8 bit,这样的话,正常情况下4个byte可以转换成一个int类型数据. 当然,不正常情况下,3个byte或者2个byte甚至1个byte都可以转换为int数据,只需要高位补上就行.

  • 利用Node.js创建一个密码生成器的全步骤

    利用Node.js创建一个密码生成器的全步骤

    目录 一. 准备工作 二. 编写命令行 2.1 添加版本和描述 2.2 配置密码长度命令 2.2 密码长度添加默认值:8 2.3 配置保存密码命令 2.4 配置密码格式: 没有数字 2.5 配置密码格式: 没有符号 三. 解析命令行-创建密码 3.1 添加color 3.2 添加剪贴板 四. 保存密码到对应的文件 五.将本地npm模块配置成全局passgen 总结 一. 准备工作 1.1 创建项目 $ npm init 1.2 安装依赖 $ npm i commander chalk clipb

  • 使用Vue.js创建一个时间跟踪的单页应用

    Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应

随机推荐