传送门: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 操作输出,会循环数组每一项,并在回调函数中操作
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]