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


Posted in Javascript onOctober 24, 2021

前言

在 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创建填充数组内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
Sort()函数的多种用法
Mar 20 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
详解JavaScript 的变量
Mar 08 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 #Javascript
javascript遍历对象的五种方式实例代码
Oct 24 #Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 #Javascript
基于angular实现树形二级表格
ajax请求前端跨域问题原因及解决方案
浅谈TypeScript 索引签名的理解
JavaScript 反射学习技巧
Oct 16 #Javascript
You might like
PHP MVC框架路由学习笔记
2016/03/02 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
javascript实现评分功能
2020/06/24 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
python生成并处理uuid的实现方式
2020/03/03 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
生产文员岗位职责
2014/04/05 职场文书
升学宴答谢词
2015/01/05 职场文书
员工自我评价范文
2015/03/11 职场文书
python可视化之颜色映射详解
2021/09/15 Python
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle