文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

js fill函数填充数组或对象的问题怎么解决

2023-07-05 05:43

关注

这篇文章主要讲解了“js fill函数填充数组或对象的问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“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函数填充数组或对象的问题怎么解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯