js fill函数填充数组或对象的解决方法

 更新时间:2023年02月24日 10:00:19   作者:凹凸曼打不赢小怪兽  
这篇文章主要介绍了js fill函数填充数组或对象的问题及解决方法,本文给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

js fill函数填充数组或对象的问题

js 的数组有一个 fill 方法,可以给数组填充数据,这个方法有三个参数,从左到右依次为 要填充的数据,填充的起始位置(默认为0),停止填充的位置(默认是数组的长度),这个方法不改变原数组,如下:

let arr = [0,0,0,0,0]
let res = arr.fill(1,1,2)
console.log(res)    // [0, 1, 0, 0, 0]
let oneParam = arr.fill(1)
console.log(oneParam)  // [1,1,1,1,1]
console.log(arr)   // [0,0,0,0,0]

问题: 有一次,我根据这个方法想要初始化一个二维数组,如下:

let arr = new Array(5).fill([])

我本来是想创建一个长度为5的数组,数组的每一项都是一个空数组,但是我遇到了一个问题,就是这个数组里面的5个数组其实指向的都是一个数组,即fill函数应该是直接我把传递的参数 [] 进行了赋值,所以我给其中一个数组赋值是,发现所有的数组都有值了,所以想要进行二维数组的初始化,不能这么做;

解决方法: 为了解决这个问题,想到了另外一个方法,就是使用map方法,如下:

let arr = new Array(5).fill(0).map(item=>[])  

这里先创建一个长度为5,全为0的数组,然后map这个数组,返回一个空数组,此时每个数组就都不一样了,注意:这个fill(0)也是必要的,因为全为空的数组不会执行map函数

扩展: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 fill函数填充内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js下利用控制器载入对应脚本

    js下利用控制器载入对应脚本

    因项目开发需要,须将每一个方法都独立成单独的js文件以便载入、维护,所以,必须需要有一个控制器用于载入这些方法。
    2010-07-07
  • JS 删除字符串最后一个字符的实现代码

    JS 删除字符串最后一个字符的实现代码

    本篇文章主要是对JS删除字符串最后一个字符的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JavaScript实现自定义拖拽排序列表

    JavaScript实现自定义拖拽排序列表

    在Web开发中,拖拽排序是一个常见的需求,它允许用户通过拖拽的方式重新排列列表项的顺序,本文将介绍如何使用原生JavaScript实现这一功能,需要的可以了解下
    2024-01-01
  • js实现图片上传即时显示效果

    js实现图片上传即时显示效果

    这篇文章主要为大家详细介绍了js实现图片上传即时显示效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • layui实现文件或图片上传记录

    layui实现文件或图片上传记录

    这篇文章主要为大家详细介绍了layui实现文件或图片上传记录,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • JavaScript中的作用域与闭包、原型与原型链、异步与单线程

    JavaScript中的作用域与闭包、原型与原型链、异步与单线程

    JavaScript的三座大山指的是:作用域和闭包、原型和原型链、异步与单线程,这些概念在日常的开发工作中经常被提及,并对我们理解和编写高质量的JavaScript代码至关重要
    2024-02-02
  • JS动态日期时间的获取方法

    JS动态日期时间的获取方法

    这篇文章主要介绍了js获得当前系统日期时间的方法,涉及javascript操作日期时间的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • html5+javascript制作简易画板附图

    html5+javascript制作简易画板附图

    这篇文章主要介绍了使用html5+javascript制作的简易画板,需要的朋友可以参考下
    2014-04-04
  • 初识javascript 文档碎片

    初识javascript 文档碎片

    今天遇到一个问题: 我通过 ajax 取回另一个页面的 Html 。但这些 HTML 我不想直接输出,想通过 getElementsByName 处理后再输出相应的内容。用原生的 javascript怎样可以处理呢?
    2010-07-07
  • JS截取url中问号后面参数的值信息

    JS截取url中问号后面参数的值信息

    JS截取url获取一些信息类似的文章可以在网上找很多,本文在重复讲述一遍,有不会的朋友可以巩固一下
    2014-04-04

最新评论