js 数组 fill() 填充方法


Posted in Javascript onNovember 02, 2021

js 数组 fill() 填充方法

前言:

  我们知道了很多了初始化数组的方法,但是初始化数组之后,数组中的每一项元素默认为 empty 空位占位,如何对数组这些空位添加默认的元素,ES6提供了 fill() 方法实现这一操作。本文总结数组 fill() 方法的详细使用。

1、fill()  语法

  fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。返回修改后的原始数组,不创建新数组。

  使用语法:array.fill( value [,start [,end]]),其中 :

  • value 用来填充数组元素的值,必填。
  • start 可选起始索引,默认值为0。
  • end 可选终止索引,默认值为 this.length

2、fill() 的使用

 

// 当传入单个参数的时候,该方法会用该参数的值填充整个数组
    var arr1 = new Array(5)
    console.log(arr1.fill(1)); //[1,1,1,1,1]
    var arr2 = [1, 2, 3, 4]
    console.log(arr2.fill(0)); //[0,0,0,0]

    // 当传入两个参数的时候,第一个参数为填充的元素,第二个为填充元素的起始位置
    var arr3 = [0, 1, 2, 3, 4, 5, 6]
    console.log(arr3.fill(1, 3)); //[0,1,2,1,1,1,1]

    // 当传入三个参数的时候,第一个参数为填充的元素,第二个参数和第三个参数分别指填充元素的起始和终止位置,不修改终止位置元素
    var arr4 = [0, 1, 2, 3, 4, 5]
    console.log(arr4.fill(1, 3, 5)); //[0,1,2,1,1,5]
    
    //如果提供的起始位置或结束位置为负数,则他们会被加上数组的长度来算出最终的位置,例如 起始位置为-1 就相当于array.length-1
    var arr5 = [0, 1, 2, 3, 4, 5]
    console.log(arr5.fill(1, -3));//[0,1,2,1,1,1]
    var arr6 = [0, 1, 2, 3, 4, 5]
    console.log(arr6.fill(1, 3, -2));//[0,1,2,1,4,5]

3、总结

以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长之路会持续更新一些工作中常见的问题和技术点。

到此这篇关于js 数组 fill() 填充方法的文章就介绍到这了,更多相关js 数组 fill()填充内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
浅谈 JavaScript 沙箱Sandbox
详解 TypeScript 枚举类型
Nov 02 #Javascript
前端JavaScript大管家 package.json
JavaScript 原型与原型链详情
javascript实现计算器功能详解流程
JS创建或填充任意长度数组的小技巧汇总
Oct 24 #Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 #Javascript
You might like
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
python爬虫爬取某站上海租房图片
2018/02/04 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
Python使用gRPC传输协议教程
2018/10/16 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
智能钱包:Ekster
2019/11/21 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
传播学毕业生求职信
2013/10/11 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
学校教师安全责任书
2014/07/23 职场文书
优秀班集体申报材料
2014/12/25 职场文书
如何在Python项目中引入日志
2021/05/31 Python
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL