JavaScript中 数组迭代(遍历)的几种方法

简介: JavaScript中 数组迭代(遍历)的几种方法

传送门: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]
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
135 52
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
50 5
|
1月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
29 1
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
46 7
|
JavaScript 前端开发
javascript中的 类初始化,遍历for in 以及with的用法
function member(name,gender){ this.name=name; this.gender=gender; } function showProperty(obj,objStr){ var str=""; for(var i in obj){ str+=objStr+".
671 0
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
30 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
110 2
|
1月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
21 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
155 4