您现在的位置是:首页 > 文章列表 > JavaScript > JS数组的遍历方法

JS数组的遍历方法

admin 2021-02-21 16:14 133人围观
简介 Javascript迭代方法, forEach、map、filter、some、every等

Javascript迭代方法

js中数组各种迭代方法等,总是容易记混,特地来记录下,以便以后查阅

  1. Array.forEach() 对数组中的每一项运行给定函数,无返回值。该函数接收三个参数(数组项的值、该项在数组中位置、数组本身);

  2. Array.map() 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。该函数接收三个参数(数组项的值、该项在数组中位置、数组本身);

  3. Array.filter() 对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。该函数接收三个参数(数组项的值、该项在数组中位置、数组本身)

  4. Array.some() 对数组中的每一项运行给定函数,如果该函数任一项返回true,则返回true。该函数接收三个参数(数组项的值、该项在数组中位置、数组本身)

  5. Array.every() 对数组中的每一项运行给定函数,如果该函数每一项返回true,则返回true,否则为false。该函数接收三个参数(数组项的值、该项在数组中位置、数组本身)

  6. Array.reduce() ,Array.reduceRight() 会迭代数组的所有项,然后构建一个最终返回的值。reduceRight()从右向左遍历。该函数接收4个参数: 初始值(或计算结束后的返回值)、当前元素、当前元素的索引、数组本身。

  7. Array.indexOf(item, start) 在数组中搜索元素值并返回其索引,从0开始。若未找到,返回-1。 参数item必须,start可选,从哪里开始搜索。负值将从结尾开始的给定位置开始,并搜索到结尾。

  8. Array.lastIndexOf() 同上,从数组结尾开始搜索

  9. Array.find() 该方法返回符合函数的第一个数组元素的值。该函数接收三个参数(数组项的值、该项在数组中位置、数组本身),ie12浏览器支持

  10. Array.findIndex() 该方法返回符合函数的第一个数组元素的索引。该函数接收三个参数(数组项的值、该项在数组中位置、数组本身)

  11. for...of 该方法遍历一切可遍历的元素(数组、对象、集合)等

实例

forEach()

var numbers = [1,2,3,4,5,4,3,2,1]
numbers.forEach((item, index, arr) => {  
    console.log(item)  //无返回值,循环数组的值
})

map()

// 返回每次函数调用的结果组成的数组
var numbers = [1,2,3,4,5,4,3,2,1]
var mapResult = numbers.map((item, index, arr) => {  
    return item > 2
})
console.log(mapResult)  // [2,4,6,8,10,8,6,4,2]

filter()

// 返回该函数会返回true的项组成的数组
var numbers = [1,2,3,4,5,4,3,2,1]
var filterResult = numbers.filter((item, index, arr) => {  
    return item > 3
})
console.log(filterResult)  // [4,5,4]

some()

// 如果该函数任一项返回true,则返回true
var numbers = [1,2,3,4,5,4,3,2,1]
var someResult = numbers.some((item, index, arr) => {  
    return item > 3
})
console.log(someResult)  // true

every()

// 如果该函数任一项返回false,则返回false
var numbers = [1,2,3,4,5,4,3,2,1]
var everyResult = numbers.every((item, index, arr) => {  
    return item > 3
})
console.log(everyResult)  // false

reduce()

// 返回计算结果。注意:reduce() 对于空数组不执行回调函数
var numbers = [1,2,3,4,5,4,3,2,1]
var sum = numbers.reduce((total, currentVal, currentIndex, arr) => {  
    return total + currentVal
})
console.log(sum)  // 25

indexOf()

// 返回数组中指定元素第一次出现的位置,如果没有匹配的元素返回-1,开始的索引为0
var numbers = [1,2,3,4,5,4,3,2,1]
console.log(numbers.indexOf(3))  // 2

lastIndexOf()

// 从结尾开始搜索,如果没有匹配的元素返回-1
var numbers = [1,2,3,4,5,4,3,2,1]
console.log(numbers.lastIndexOf(3))  // 6

find()

// 返回匹配的第一个元素的值,无匹配的值则为undefined
var numbers = [1,9,12,16,19]
var findResult= numbers.find((item, index, arr) => {  
    return item > 10
})
console.log(findResult) // 12

findIndex()

// 返回匹配的第一个元素的索引值,无匹配的值则为undefined
var numbers = [1,9,12,16,19]
var findResult= numbers.findIndex((item, index, arr) => {  
    return item > 10
})
console.log(findResult) // 2

for…of

// 返回匹配的第一个元素的索引值,无匹配的值则为undefined
var numbers = [1,9,12,16,19]
for (let item of numbers) {  
    console.log(item)    //打印出每一项的值
}
for (let item of numbers.values()) {  
    console.log(item)    //打印出每一项的值
}
for (let item of numbers.keys()) {  
    console.log(item)    //打印出每一项的索引值
}
for (let [index, item] of numbers.entries()) {    
    console.log(index, item)  //打印出每一项的索引值与值
}

阅读排行

  • Vue 的最佳使用方法

    Vue框架,是我国内最受欢迎的前端框架之一,也许你的项目正在使用,也许你还在了解正准备上手...

  • FastClick是什么?一文搞懂原理解析​

    FastClick是什么?一文搞懂原理解析​ 为什么要用FastClick在移动端H5开发过程中,关于点触可能会遇到如下两个问题:手动点击与真正...

  • 提升CSS技能的20个小技巧

    提升CSS技能的20个小技巧 随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样...

  • uni-app介绍

    uni-app介绍 uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Andr...

  • 一文彻底弄懂Event Loop!

    一文彻底弄懂Event Loop! 我们在学习浏览器和NodeJS的EventLoop时,往往是阅读大量文章,多篇文章凑在一起综合来看,才...

  • 生活中常用正则表达式

    生活中常用正则表达式 很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是...

  • vue组件通信你了解多少

    本文会介绍常见的通信方式,并分析每种方式的使用场景和注意点。

  • 10 种跨域解决方案

    10 种跨域解决方案 说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了...

本栏推荐

官方微信