首页 > 编程语言 >JavaScript之填充数组的五种方法

JavaScript之填充数组的五种方法

时间:2024-09-13 09:52:13浏览次数:13  
标签:arr const 填充 JavaScript 五种 数组 Array fill

点击跳转填充字符串方法

填充数组是一种常见的操作,尤其是当你需要初始化数组或填充默认值时。本文将介绍几种不同的方法来填充数组,每种方法都有其适用的场景和用法。

1. 使用 Array.prototype.fill()

fill() 方法是最直接的填充数组的方式。它可以用指定的值填充数组的所有元素,或者在指定的起始和结束索引之间填充。
语法:

arr.fill(value, start, end)
  • value:要填充的值。
  • start(可选):填充的起始索引(默认为0)。
  • end(可选):填充的结束索引(默认为数组长度)。

示例:

const arr = new Array(5).fill(0); // [0, 0, 0, 0, 0]
console.log(arr);

const arrPartial = [1, 2, 3, 4, 5].fill(0, 2, 4); // [1, 2, 0, 0, 5]
console.log(arrPartial);

fill() 方法会用指定的值填充整个数组或数组的一部分。这对于初始化数组或重置数组的元素非常有用。

2. 使用 Array.from()

Array.from() 方法可以从类数组对象或可迭代对象创建一个新的数组实例,并且可以传入一个映射函数来处理数组元素。
语法:

Array.from(arrayLike, mapFunction)
  • arrayLike:类数组对象或可迭代对象。
  • mapFunction(可选):一个函数,用于在创建数组的同时对每个元素进行处理。

示例:

const arr = Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]
console.log(arr);

Array.from() 允许你创建一个新数组,并通过映射函数来生成数组的每个元素。非常适合需要动态生成数组元素的情况。

3. 使用 Array.prototype.map()

如果你已经有一个数组并且需要用另一个数组的元素填充它,可以结合 map() 方法与数组的长度来实现。

示例:

const arr = new Array(5).fill(null).map((_, i) => i * 2); // [0, 2, 4, 6, 8]
console.log(arr);

map() 方法可以对数组中的每个元素应用一个函数,这对于根据某种规则生成新数组非常有用。

4. 使用 Array.prototype.concat() 和 Array.prototype.slic

你可以通过 concat() 和 slice() 方法创建一个填充的数组,尤其是在需要重复某些元素时。

示例:

const arr = new Array(5).concat([1, 2]).slice(0, 5); // [1, 2, 1, 2, 1]
console.log(arr);

concat() 可以将两个数组合并,而 slice() 可以截取指定范围的元素。通过这两个方法的组合,可以方便地创建复杂的填充模式。

5. 使用展开运算符

展开运算符 (…) 允许你将一个数组的元素展开并插入到另一个数组中。这对于复制和填充数组尤其有用。

示例:

const baseArray = [1, 2];
const arr = [...baseArray, ...baseArray, ...baseArray]; // [1, 2, 1, 2, 1, 2]
console.log(arr);

展开运算符使得在创建填充数组时可以更直观地处理重复元素的情况,代码更加简洁易读。

填充数组的方法有很多,每种方法都有其独特的优点和适用场景。fill() 是最直接的方式,Array.from() 和 map() 提供了更高的灵活性,而 concat() 和展开运算符适用于处理更复杂的填充需求。根据具体的需求选择合适的方法,可以使你的代码更加高效和简洁。
相关文章:

标签:arr,const,填充,JavaScript,五种,数组,Array,fill
From: https://blog.csdn.net/m0_73890048/article/details/142182269

相关文章

  • JavaScript语法入门五 常量
    常量声明一个常量就是声明一个常数。声明之后就不能修改(不能通过重新赋值进行修改)。使用const关键字。该关键字是ES6新增加的关键字。用const声明常量时,必须初始化。例子1:constmyBirthday='18.06.1981';例子2:<script> constPERSON='jack' {   constPERSON='tom' ......
  • 《黑神话:悟空》iZotope.dll文件丢失?《黑神话:悟空》iZotope.dll丢失的五种解决策略
    《黑神话:悟空》是一款备受期待的动作角色扮演游戏,如果玩家在尝试运行游戏时遇到iZotope.dll文件丢失的问题,这通常会导致游戏无法正常启动。以下是解决《黑神话:悟空》中iZotope.dll文件丢失问题的五种策略:1.重新安装游戏步骤说明:卸载当前安装的《黑神话:悟空》游戏。前往游......
  • JavaScript开发技巧必备【一】
    1、使用Object.entries()和Object.fromEntries()//将对象转换为数组并转换回来,以便于操作constperson={name:'jack',age:20};constentries=Object.entries(person);//[['name','jack'],['age',20]]constnewPerson=Object.fromEn......
  • 全国增值税发票查验接口平台-JavaScript发票验真api示例
    全国增值税发票查验接口平台旨在优化纳税服务,加强企业发票管理,确保税收工作的准确性。企业财务可以通过发票查验接口方便快捷的验证增值税发票管理系统开具发票的真伪,以实现发票的自动化管理,减少人工操作失误,提高识别、录入、查验的准确性和工作效率,从而有效防止税务欺诈和逃......
  • javascript 计算今天离目标日期还有多少天
    /***计算从今天起到指定日期还有多少天。*@param{string}fixedDate-目标日期字符串,格式应为"YYYY-MM-DD"。*@returns{number}-从今天起到目标日期的天数。*@example*daysUntil("2024-12-25");//假设今天是2024-09-11,将返回104*/exportfunction......
  • JavaScript 中处理接口之字段处理(1)
     遍历 res1.data(假设它是一个数组)中的所有对象并添加两个字段的方法:letres=awaitgetData({});if(Array.isArray(res.data)){for(letitemofres1.data){item.newField1='newvalue1';item.newField2='newvalue2';}WIFIList.value=res.data......
  • Javascript应用(轮播图进阶)
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......
  • JavaScript高级——函数
    1、函数的含义:①实现特定功能的n条语句的封装体。②只有函数是可以执行的,其他类型的数据不能执行。2、为什么要用函数?①提高代码复用②便于阅读交流3、如何定义函数?①函数声明②表达式4、如何调用(执行)函数?①test():直接调用②obj.test():通过对象调用③new.......
  • [JavaScript] 事件委托以及 Vue 列表循环事件绑定的性能优化
    前言事件委托(EventDelegation)是一种通过将事件监听器绑定到父元素,而不是直接绑定到每个子元素上的技术。这样可以减少事件监听器的数量,提升性能,并使得对动态添加或移除的元素更容易进行事件处理。事件冒泡和事件捕获事件冒泡:从里往外<divid="parent"style="padding:50px;......
  • JavaScript语法入门四
    变量变量就是在内存中开辟一块用于存储信息的空间。变量命名1.        变量名称必须仅包含字母,数字,符号 $ 和 _。2.        首字符必须非数字。3.        采用驼峰式命名法(camelCase),就是,单词一个接一个,除了第一个单词,其他的每个单词都以大写字母开头......