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 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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单件模式结合命令链模式使用说明
2008/09/07 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
php多线程并发实现方法
2016/09/30 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
最短的IE判断代码
2011/03/13 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
ionic3 懒加载
2017/08/16 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
python fabric实现远程部署
2017/01/05 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
英国综合网上购物商城:The Hut
2018/07/03 全球购物
英文留学推荐信范文
2014/01/25 职场文书
优秀求职信
2014/05/29 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
致运动员加油稿
2015/07/21 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
php去除deprecated的实例方法
2021/11/17 PHP