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 相关文章推荐
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
js键盘事件的keyCode
Jul 29 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 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中图片等比缩放的实例
2013/03/24 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
python中rb含义理解
2020/06/18 Python
python如何操作mysql
2020/08/17 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
给儿子的表扬信
2014/01/15 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
服装设计师求职信
2014/06/04 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
2019个人工作总结
2019/06/21 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
Python中文纠错的简单实现
2021/07/07 Python