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 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
JavaScript入门教程 Cookies
Jan 31 Javascript
给js文件传参数(详解)
Jul 13 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
php之字符串变相相减的代码
2007/03/19 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
Python中的pprint折腾记
2015/01/21 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
pytorch简介
2020/11/11 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
项目合作协议书
2014/04/16 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
培训督导岗位职责
2015/04/10 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书