文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

javaScript数组遍历和对稀疏数组处理方法有哪些

2024-04-02 19:55

关注

本篇内容介绍了“javaScript数组遍历和对稀疏数组处理方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

1.forEach()方法

  forEach(参数1,参数2)方法本身可以接收两个参数,第一个参数是一个函数,并且数组中的每一个元素均会调用一遍这个函数(稀疏数组除外)。一般来说,我们只会传入第一个参数(且为必传项),此处也不对其他参数多做介绍。下述其他方法的传参情况与forEach()相同。

  且下述方法中,作为参数传入的函数其本身也有参数值,分别为:数组元素的值,数组元素的索引和数组本身。即:

myArray.forEach(

    function (数组元素的值,数组元素的索引,数组本身) {

    }

)

补充:function(a) { return a+3} 为没有函数名称的匿名函数, 其可写成箭头函数的形式

a => a+3

示例:

let myArray = [1,2,3];

// num=>{} 箭头函数,相当于一个匿名函数

// function(num) { num = num * 3 }

myArray.forEach(num => {

    num = num * 3;

});

console.log(myArray) //打印结果为[ 1, 2, 3 ]

  forEach()方法没有返回值,且没有像普通for循环一样可以终止迭代的break语句,并且正如上文所说,我们在此处对num进行的改变不会更改到myArray数组中。

2.map()方法

  map()与forEach()方法不同的点在于,map()方法的第一个参数函数会接收我们每个数组的元素,并可以返回一个值。而整个map()方法的返回值就是这个函数的返回值所构成的数组。

  例:

let myArray = [1,2,3]

let result = myArray.map(num => {

    num *= 3

    return num

});

console.log(result,"\n原数组",myArray)

// 打印结果为

// [ 3, 6, 9 ] 

// 原数组 [ 1, 2, 3 ]

3.filter()

  filter()方法也有返回值,但他期望参数函数的返回值是一个boolean类型,也就是说它期望参数函数为断言函数。它的返回值是一个满足条件的myArray中的元素组成的数组。

示例:

let myArray = [1,2,3]

let result = myArray.filter(num => {

    num *= 3

    return num > 5

});

console.log(result)

//[ 2, 3 ]

  我们可以看到num值经过运算后为3、6、9,其中6和9满足大于5的条件。其返回值是数组中的2、3这两个元素,而不是运算后的结果。

4.一些非常用方法

find()和 findIndex()

  这两个方法与filter()相似,但他们会在找到第一个满足条件的值时停止迭代,find()方法会返回该元素的值,而findIndex()方法会返回这个元素在数组中的索引。例:

let myArray = [1,2,3]

let result = myArray.find(num => {

    num *= 3

    return num > 5

});

console.log(result) // 打印值为: 2

let myArray = [1,2,3]

let result = myArray.findIndex(num => {

    num *= 3

    return num > 5

});

console.log(result) // 打印值为: 1

every() 和 some()

  every()和some()函数返回值为boolean类型,亦会使用一个断言函数作为第一个入参,但只有数组中所有元素都满足断言函数的条件时,every()才会返回true,当有一个元素不满足条件时,every()会停止遍历并返回false。

let myArray = [4,1,2,3];

let count = 0; // 用于记录遍历的次数

let result = myArray.every(num => {

    count++;

    num *= 3;

    return num > 5;

});

console.log(result,"遍历的次数为",count) 

// 打印值为: false 遍历的次数为 2

  而some()函数只要有一个满足条件便会停止遍历,返回true值。

let myArray = [4,1,2,3];

let count = 0; // 用于记录遍历的次数

let result = myArray.some(num => {

    count++;

    num *= 3;

    return num > 5;

});

console.log(result,"遍历的次数为",count) 

// 打印值为: true 遍历的次数为 1

  此处需要注意的是 myArray数组的元素经过乘3运算后的结果为1、6、9,其中6和9满足大于5的条件,但其返回的是myArray中的元素,也就是没有经过运算的2和3。(不满足条件的元素不会被返回,此处与map()不同,map() 返回的数组长度与原数组一样。)

对于稀疏数组的处理

  稀疏数组定义:

稀疏数组就是其元素没有从0开始的索引的数组。正常情况下,数组的length属性表明数组中元素的个数。如果数组是稀疏的,则length属性的值会大于元素个数。

  正常的数组如 let myArray = [0,1,2],这个数组的长度为3,元素个数为3,与数组长度相同,索引依次为0、1、2。

  稀疏数组简单实践:

let testArray = new Array(10);  //数组长度为10

testArray[20] = 1 //数组长度为21

console.log(testArray) // 打印结果为 [ <20 empty items>, 1 ]

&emsp;&emsp;此时数组长度为21,而元素只有一个,这就变成了一个稀疏数组。而造就稀疏数组的实际应用场景可能在运用delete删除数组元素时发生,如:

let myArray = [1,2,3]

delete  myArray[1]

console.log(myArray,"数组的长度为",myArray.length)

console.log(1 in myArray)

// 打印结果为

// [ 1, <1 empty item>, 3 ] 数组的长度为 3

// 索引为1的元素是否存在 false

&emsp;&emsp;delete并不会修改数组的长度,也不会改变其他元素的索引值,所以会形成一个稀疏数组。如果想要元素索引值随着数组元素的删减而变化,可以使用splice()方法。

forEach()方法不会遍历稀疏数组中缺失元素

let myArray = [4,,2,3];

console.log("myArray",myArray)  

// 打印值为:myArray [ 4, <1 empty item>, 2, 3 ]

let count = 0; // 用于记录遍历的次数

myArray.forEach(num => {

    count++;

});

console.log("数组的长度为",myArray.length,"遍历的次数为",count) 

// 数组的长度为 4 遍历的次数为 3

map()也不会遍历稀疏数组中缺失元素,但其返回值数组与原数组长度相同,且缺失的元素位置也相同

let myArray = [4,,2,3];

console.log("myArray",myArray)

// 打印值为:myArray [ 4, <1 empty item>, 2, 3 ]

let count = 0; // 用于记录遍历的次数

let result = myArray.map(num => {

    count++;

    return num*3

});

console.log("数组的长度为",myArray.length,"遍历的次数为",count,"返回的数组为",result)

// 打印值为: 数组的长度为 4 

// 遍历的次数为 3 

// 返回的数组为 [ 12, <1 empty item>, 6, 9 ]

filter()的返回值不会包含稀疏数组中缺失的元素

let myArray = [4,,2,3];

console.log("myArray",myArray)

// 打印值为:myArray [ 4, <1 empty item>, 2, 3 ]

let count = 0; // 用于记录遍历的次数

let result = myArray.filter(num => {

    count++;

    return num>1

});

console.log("数组的长度为",myArray.length,"遍历的次数为",count,"返回的数组为",result)

// 打印值为: 数组的长度为 4

// 遍历的次数为 3

// 返回的数组为 [ 4, 2, 3 ]

“javaScript数组遍历和对稀疏数组处理方法有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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