js中数组遍历方法汇总

发布时间:2022年04月18日评论数：抢沙发阅读数： 1850

1.for语句

const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
for(let i = 0, len = arr.length; i < len; i++) {
    console.log(arr[i])
}

	2.for...in语句 

const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
// 遍历数组返回索引
for(let idx in arr) {
    console.log(idx)
}
const obj = {
    a: 1,
    b: 2,
    c: 3
}
// 遍历对象返回对象属性
for(let o in obj) {
    console.log(o)
}

	3.for...of语句 

const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
for(let i of arr) {
    console.log(i)
}

	4.forEach语句 

	空数组不会执行 

const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
/**
 * [description]
 * @param  {[type]} item [必须。当前元素]
 * @param  {[type]} idx  [可选。当前元素索引]
 * @param  {[type]} arr) [可选。当前遍历的数组]
 * @return {[type]}      [description]
 */
arr.forEach(function(item, idx, arr) {
    console.log(item, idx, arr)
})

	5.while语句 

const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
let i = 0, len = arr.length;
while(i < len) {
    console.log(arr[i]);
    i++
}

	6.do...while语句 

const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
let i = 0, len = arr.length;
do {
    console.log(arr[i]);
    i++
}
while(i < len)

	7.map方法 

	不会改变原数组，返回一个新数组 

	不会执行空数组 

const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
/**
 * [description]
 * @param  {[type]} val  [当前元素]
 * @param  {[type]} idx  [当前索引]
 * @param  {[type]} arr) [当前数组]
 * @return {[type]}      [description]
 */
arr.map(function(val, idx, arr) {
    console.log(val, idx, arr)
})

	8.every方法 

	用于检测数组所有元素是否符合指定条件（通过行数提供的条件） 

	使用指定函数检测数组中的元素： 

	被检测数组中，如果有一个元素不满足要求，则返回false，且剩余元素不再检测；如果都满足条件，则返回true 

	不会对空数组进行检测 

	不会改变原始数组 

const arr = [1, 2, 3, 4, 5, 6]
/**
 * [description]
 * @param  {[type]} val  [必须。当前元素]
 * @param  {[type]} idx  [可选。当前元素索引]
 * @param  {[type]} arr) [可先。当前数组]
 * @return {[Boolean]}   [数组满足条件返回true]
 */
let test = arr.every(function(val, idx, arr) {
    return val < 7
})

	9.some方法 

	用于检测数组所有元素是否符合指定条件（通过行数提供的条件） 

	使用指定函数检测数组中的元素： 

	被检测数组中，如果有一个元素满足要求，则返回true，且剩余元素不再检测；如果都不满足条件，则返回false 

	不会对空数组进行检测 

	不会改变原始数组 

const arr = [1, 2, 3, 4, 5, 6]
/**
 * [description]
 * @param  {[type]} val  [必须。当前元素]
 * @param  {[type]} idx  [可选。当前元素索引]
 * @param  {[type]} arr) [可先。当前数组]
 * @return {[Boolean]}   [数组中有一项满足条件就返回true]
 */
let test = arr.some(function(val, idx, arr) {
    console.log(val, idx, arr)
    return val < 2
})
console.log(test)

	10.filter 

	用于检测数组所有元素是否符合指定条件（通过行数提供的条件） 

	使用指定函数检测数组中的元素： 

	返回符合条件的元素（即过滤掉不符合条件的元素），组成新数组 

	不会对空数组进行检测 

	不会改变原始数组 

const arr = [1, 2, 3, 4, 5, 6]
/**
 * [description]
 * @param  {[type]} val  [必须。当前元素]
 * @param  {[type]} idx  [可选。当前元素索引]
 * @param  {[type]} arr) [可先。当前数组]
 * @return {[Array]}   [符合条件的元素组成新数组]
 */
let test = arr.filter(function(val, idx, arr) {
    // console.log(val, idx, arr)
    return val < 5
})
console.log(test)

	11.reduce方法 

	接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 

	空数组是不会执行回调函数 

const arr = [1, 2, 3, 4, 5, 6]
/**
 * [description]
 * @param  {[type]} total  [必须。初始值或计算结束后的返回值]
 * @param  {[type]} val  [必须。当前元素]
 * @param  {[type]} idx  [可选。当前元素索引]
 * @param  {[type]} arr) [可先。当前数组]
 * @return {[type]}   [整个数组的和]
 */
let test = arr.reduce(function(total, val, idx, arr) {
    console.log(total, val, idx, arr)
    return total + val
})
console.log(test)

	12.find方法 

	返回被检测数组中满足条件的第一个元素，之后的不会再执行；如果没有符合条件的，则返回undefined 

const arr = [1, 2, 3, 4, 5, 6]
/**
 * [description]
 * @param  {[type]} val  [必须。当前元素]
 * @param  {[type]} idx  [可选。当前元素索引]
 * @param  {[type]} arr) [可先。当前数组]
 * @return {[type]}   [符合条件的第一个元素]
 */
let test = arr.find(function( val, idx, arr) {
    // console.log(val, idx, arr)
    return val > 3
})
console.log(test)

	13.findIndex方法 

	传入一个条件函数，遍历数组每一项，返回符合条件元素的索引，之后的则不会再执行，如果没有符合条件的元素，则返回-1 

	空数组不执行 

	不改变原数组 

const arr = [1, 2, 3, 4, 5, 6]
/**
 * [description]
 * @param  {[type]} val  [必须。当前元素]
 * @param  {[type]} idx  [可选。当前元素索引]
 * @param  {[type]} arr) [可先。当前数组]
 * @return {[type]}   [符合条件的第一个元素的索引]
 */
let test = arr.findIndex(function( val, idx, arr) {
    console.log(val, idx, arr)
    return val > 3
})
console.log(test)