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 相关文章推荐
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
一文彻底理解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应用JSON技巧讲解
2013/02/03 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
PHP实现添加购物车功能
2017/03/06 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
Python求解任意闭区间的所有素数
2018/06/10 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python tkinter控件布局项目实例
2019/11/04 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
virtualenv介绍及简明教程
2020/06/23 Python
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
护理专业自我鉴定
2014/01/30 职场文书
学校后勤岗位职责
2014/02/19 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
项目转让协议书
2014/10/27 职场文书
电工实训报告总结
2014/11/05 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
从原生JavaScript到React深入理解
2022/07/23 Javascript