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

js--数组的 fill() 填充方法详解的更多相关文章
- 转载 JS组件Bootstrap Select2使用方法详解
JS组件Bootstrap Select2使用方法详解 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2016-01-26我要评论 这篇文章主要为大家介绍了JS组件Bootstrap Sel ...
- JavaScript中数组Array.sort()排序方法详解
JavaScript中数组的sort()方法主要用于对数组的元素进行排序.其中,sort()方法有一个可选参数.但是,此参数必须是函数. 数组在调用sort()方法时,如果没有传参将按字母顺序(字符编 ...
- JavaScript中数组Array方法详解
ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...
- Bootstrap Table使用方法详解
http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...
- js数组方法详解
Array对象的方法-25个 /*js数组方法详解 */ /* * 1 concat() 用于连接多个数组或者值-------------- * 2 copyWithin() 方法用于从数组的指定位置 ...
- JS reduce()方法详解,使用reduce数组去重
壹 ❀ 引 稍微有了解JavaScript数组API的同学,对于reduce方法至少有过一面之缘,也许是for与forEach太强大,或者filter,find很实用,在实际开发中我至始至终没使用过 ...
- JavaScript数组方法详解
JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中 ...
- [荐]Js apply()和call()方法详解 - http://www.w3cfuns.com/article-5596443-1-1.html
本帖最后由 默默DE人生 于 2013-3-19 13:22 编辑 Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文 ...
- Js apply 方法 详解
Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
随机推荐
- Selenium自动化实现web自动化-1
框架搭建 基于maven+jdk8+junit5+seleium 构建 <dependencies> <dependency> <groupId>org.junit ...
- docker一分钟搭建nginx服务器
运行nginx服务 拉取: docker pull nginx:1.17.9 运行: docker run -d --name nginx -P 80:80 nginx:1.17.9 -d表示在后台启 ...
- 八、Abp vNext 基础篇丨标签聚合功能
介绍 本章节先来把上一章漏掉的上传文件处理下,然后实现Tag功能. 上传文件 上传文件其实不含在任何一个聚合中,它属于一个独立的辅助性功能,先把抽象接口定义一下,在Bcvp.Blog.Core.App ...
- 只需3步,快来用AI预测你爱的球队下一场能赢吗?
摘要:作为球迷,我们有时候希望自己拥有预测未来的能力. 本文分享自华为云社区<用 AI 预测球赛结果只需三步,看看你爱的球队下一场能赢吗?>,作者:HWCloudAI. 还记得今年夏天的欧 ...
- Go并发编程--正确使用goroutine
目录 1. 对创建的gorouting负载 1.1 不要创建一个你不知道何时退出的 goroutine 1.1.1 不要帮别人做选择 1.1.2 不要作为一个旁观者 1.1.3 不要创建不知道什么时候 ...
- 为什么在匿名内部类中引用外部对象要加final修饰符
当所在的方法的形参需要被内部类里面使用时,该形参必须为final. 为什么必须要为final呢? 首先我们知道在内部类编译成功后,它会产生一个class文件,该class文件与外部类并不是同一clas ...
- HDU2647Reward (拓扑排序)
Reward Description Dandelion's uncle is a boss of a factory. As the spring festival is coming , he w ...
- 【多线程】Android多线程学习笔记——线程池
Java线程池采用了享元设计模式,在系统中维持一定数量的线程,用于处理异步或并发需求,在平时处理异步或并发任务时被广泛使用.这里基于JDK1.8和Android28来整理一些关于线程池的知识点. 一. ...
- 【PHP数据结构】图的应用:最短路径
上篇文章的最小生成树有没有意犹未尽的感觉呀?不知道大家掌握得怎么样,是不是搞清楚了普里姆和克鲁斯卡尔这两种算法的原理了呢?面试的时候如果你写不出,至少得说出个大概来吧,当然,如果你是要考研的学生,那就 ...
- 还不知道PHP有闭包?那你真OUT了
做过一段时间的Web开发,我们都知道或者了解JavaScript中有个非常强大的语法,那就是闭包.其实,在PHP中也早就有了闭包函数的功能.早在5.3版本的PHP中,闭包函数就已经出现了.到了7以及后 ...
