JavaScript中 数组迭代（遍历）的几种方法

Posted 2022-09-24 明天也要努力

传送门：JavaScript中 forEach map 方法 无法跳出循环问题及解决方案

forEach()

• 遍历数组全部元素（自动遍历数组 length 次）；
• 无法 break 中途跳出循环 ，不支持 return 操作退出循环；
• 不产生新数组；

var array1 = ['a', 'b', 'c']; 
array1.forEach(function(element) 
  console.log(element);
);
// expected output: "a"
// expected output: "b"
// expected output: "c"
var workdata=[
	    id:'1',name:"IS",
	    id:'2',name:"IS-leader",
	    id:'3',name:"数据管理员",
	    id:'4',name:"管理员"
	]	
workdata.forEach(item=>
	console.log(item.id+" : "+item.name)
)
//  1 : IS
//  2 : IS-leader
//  3 : 数据管理员
//  4 : 管理员

map()

返回一个新的 Array，每个元素为调用 func 的结果

• 返回新数组，不改变原数组；
• 无法 break 中途跳出循环 ，不支持 return 操作退出循环；
• 回调函数参数：item(数组元素)、index(序列)、arr(数组本身)；
• 使用return操作输出，会循环数组每一项，并在回调函数中操作；

var numbers = [65, 44, 12, 4];
var newNums = numbers.map( item => item * 10)
console.log(newNums) // [650,440,120,40]

some()

返回一个 boolean，判断是否有元素是否符合 func 条件 ( 有一个就行 )

• 不创建新数组 ，不改变原数组；
• 当内部 return true 时退出循环；
• 回调函数参数：item(数组元素)、index(序列)、arr(数组本身)；
• 使用 return 操作输出，会循环数组每一项，并在回调函数中操作；

var ages = [3, 10, 18, 20];
function checkAdult(age) 
    return age >= 40;

function myFunction() 
    console.log(ages.some(checkAdult));	//	false

function checkAdult2(age) 
    return age >= 18;

function myFunction() 
    console.log(ages.some(checkAdult2));	//	true

every()

返回一个 boolean，判断每个元素是否符合 func 条件（ 所有都判断 ）

• 不创建新数组 ，不改变原数组；
• 当 return false 时退出循环（ 需要写 return true）；
• 回调函数参数：item(数组元素)、index(序列)、arr(数组本身)；
• 使用 return 操作输出，会循环数组每一项，并在回调函数中操作；

var ages = [32, 33, 16, 40];
function checkAdult(age) 
    return age >= 18;
 
function myFunction() 
    console.log(ages.every(checkAdult)) // false

filter()

返回一个符合 func 条件的元素数组

• 创建新数组 , 不改变原数组；
• 输出：判断为 true 的数组元素组成的新数组；
• 回调函数参数：item(数组元素)、index(序列)、arr(数组本身)；
• 使用 return 操作输出，会循环数组每一项，并在回调函数中操作；

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = nums.filter((num) => 
  return num > 5;
);
console.log(res);  // [6, 7, 8, 9, 10]

find()

返回某个符合条件的元素

• 不创建新数组 ，不改变原数组；
• 一旦判断为 true ，则跳出循环 输出符合条件的数组元素（找到一个后就不再往下找）
• 回调函数参数：item(数组元素)、index(序列)、arr(数组本身)；
• 使用 return 操作输出，会循环数组每一项，并在回调函数中操作；

let arr = [1,2,3,4,5] ;
let new1 = arr.find( (item,index) => 
	return item > 2 && item < 5 ;    // 当遍历循环到判断到一个为 true 则跳出循环，输出当前数组元素 不再循环
)
let new2 = arr.find( (item,index) => 
	return item.toString().indexOf(5) > -1 ;	// 把当前数组元素转为字符串，则可index()>-1判断是否含有某字符
)
console.log(new1);    // 3
console.log(new2)    // 5
console.log(arr);   // [1,2,3,4,5]

findIndex()

返回某个符合条件的元素的索引

• 不创建新数组 ，不改变原数组；
• 一旦判断为 true ，则跳出循环 输出符合条件的数组元素（找到一个后就不再往下找）
• 回调函数参数：item(数组元素)、index(序列)、arr(数组本身)；
• 使用 return 操作输出，会循环数组每一项，并在回调函数中操作；

let arr = [1,2,3,4,5] ;
let index = arr.findIndex( (item,index) =>  
	return item > 2 && item < 5 ;  //当遍历循环到判断到第一个为 true 则跳出循环，输出当前数组元素索引 不再循环
)
console.log(index);  // 2
console.log(arr);   // [1,2,3,4,5]

includes()

判断数组是否含有某值 ，不用 return，不用回调函数，输出 true 或 false

let arr = [1,2,3,4,5] ;
let new1 = arr.includes(5);    

console.log(new1);   // true
console.log(arr);   // [1,2,3,4,5]

reduce方法详解