JS常用的循环遍历和它们的特性

最新推荐文章于 2023-02-28 08:52:11 发布
最新推荐文章于 2023-02-28 08:52:11 发布
阅读量287 收藏 2
点赞数
分类专栏： JavaScript 前端 笔记 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45904930/article/details/119799066
版权
前端 同时被 3 个专栏收录
12 篇文章 1 订阅
订阅专栏
笔记
11 篇文章 0 订阅
订阅专栏
JavaScript
8 篇文章 0 订阅
订阅专栏

目录

JS常用的循环遍历

for、forEach、for …of for…in

  1. for

    通常用于数组的循环 可以随时跳出循环，用break或者continue

    const list = [1, 2, 3, 4, 5, 6, 7, 8, , 10, 11];
let len = list.length;
for (let i = 0; i < len; i++) {
    if (list[i] === 5) {
    //   break; // 1 2 3 4
      continue; // 1 2 3 4 6 7 8 undefined 10 11
    }
    console.log(list[i]);
  }

  2. forEach

    可以对循环的元素做一些特定的操作，回调函数的参数更丰富，元素，索引和原数组都可以获得。

    forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

    注意: forEach() 对于空数组是不会执行回调函数的。

    回调函数的语法如下：

    array.forEach(function(currentValue, index, arr), thisValue)

    其中 第一个参数为回调函数function(currentValue, index, arr) ，currentValue 是必须的，表示当前的正在遍历的元素，index和arr是可选的，分别表示当前元素的索引以及当前元素所属的数组对象

    第二个参数thisValue是可选的，传递给函数的值一般用this值，如果这个参数为空，undefined，会传递给this值

    const list = [1, 2, 3, 4, 5, 6, 7, 8, , 10, 11];
let len = list.length;
let result = []
list.forEach(function(cur,index,arr){
    console.log(`当前元素为${cur},索引为${index}，所属数组为${arr}`);
    result.push(cur*2);
})

console.log(result); //[ 2,  4,  6,  8, 10, 12, 14, 16, 20, 22]

let rest = []
rest.forEach(function(cur){
   console.log("我没有执行啊~~，因为我是空数组"); 
})

    注意：forEach 无法跳出循环，一旦执行了，除非抛出错误，否则会一直执行下去，直到数组的最后一个元素。

    不支持 continue，用 return false 或 return true 代替。

    var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
    if (item === 3) {
        return;
    }
    console.log(item); //1 2 4 5
});

    不支持 break，用 try catch/every/some 代替：

    返回值: undefined

      const list = [1,2,3,4]
const result = list.forEach(function(cur){
     return cur
 })
 console.log(result); //undefined

  3. for in

    1. 获取enumerable:true的属性键。

    2. 可以遍历对象（这时候获得是对象的键）和数组（数组的索引）。

    3. 可以获取原型上的属性键。

    4. 数字属性键被遍历出来是字符串。比如索引值

    5. 不可以跳出循环

    const list = [1, 2, 3, 4, 5, 6, 7, 8, , 10, 11];
let len = list.length;

//1. 对于数组
for(const k in list){
    // console.log(k); //[0,1,2,3,4,5,6,7,8,9,10]  //k 是索引
    console.log(list[k]); //[1,2,3,4,5,6,7,8,10,11] //忽略空元素
    if(k===5){  //不会退出
        break;
    }
}


Object.prototype.fun = () => {};
const obj = { 2: 'a', 1: 'b' };
for (const i in obj) {
  console.log(i, ':', obj[i]);
}
// 1: b
// 2: a
// fun : () => {} Object 原型链上扩展的方法也被遍历出来

for (const i in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, i)) {
      console.log(i, ':', obj[i]);
    }
}

//1 : b
//2 : a


// fun不属于自身的属性将被 hasOwnProperty 过滤

    注意：

    使用 for in 循环时，返回的是所有能够通过对象访问的、可枚举的属性，既包括存在于实例中的属性，也包括存在于原型中的实例。如果只需要获取对象的实例属性，可以使用 hasOwnProperty 进行过滤。

    使用时，要使用 (const x in a) 而不是 (x in a) 后者将会创建一个全局变量。

    遍历的顺序会因为浏览器的不同而不同

  4. for of：

    1. 遍历属性值。不受到enumerable限制。

    2. 可遍历数组。一般不可以遍历对象，如果实现了Symbol.iterator，可以遍历。如Array，Map，Set，String，TypedArray，arguments 对象等等

    3. 不能获取原型上的值

    4. 可以用break退出循环和continue跳过循环

    5. for …of 直接访问的是实际元素

    6. 如果遇到空元素同样会执行

    const list = [1, 2, 3, 4, 5, 6, 7, 8, , 10, 11];
let len = list.length;

//1. 对于数组
for(const v of list){
    //  console.log(v); //[1,2,3,4,5,6,7,8,undefined,10,11]  //v 是元素的值  不会忽略空元素 
     if(v === 7) break; //允许退出  continue也有有效
     console.log(v);//[1,2,3,4,5,6]  
     
}


// 2 对于对象
// 原型上增加方法
Array.prototype.gogo = function(){
    console.log("gogo");
}

var a = [1,2,3];

// key值2不可以枚举
Object.defineProperty(a, 2, {
    enumerable: false
});
Object.defineProperty(a, "2", {
    enumerable: false
});

for(let p in a){
    // 索引被遍历出来是字符串类型
    console.log(p, typeof p); // 0 string; 1 string; gogo string
}

console.log("---")

for(let v of a){
    console.log(v);  // 1 2 3
}

some every

  1. some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

    some() 方法会依次执行数组的每个元素：

    • 如果有一个元素满足条件，则表达式返回true ,剩余的元素不会再执行检测。
    • 如果没有满足条件的元素，则返回false。

    注意： some() 不会对空数组进行检测。

    注意： some() 不会改变原始数组。

    some语法：

    array.some(function(currentValue,index,arr),thisValue)

    和forEach类似

    注意：

    返回值： 布尔值。如果数组中有元素满足条件返回 true，否则返回 false。

     const list = [
    { name: '头部导航', backward: false },
    { name: '轮播', backward: true },
    { name: '页脚', backward: false },
  ];
 const someBackward = list.some(item => item.backward);
console.log(someBackward);//true
 
 const arr = [1,2,3,4]
 const result =arr.some(function(item){
     if(item===5) return true;
 })

 console.log(result); //false

  2. every

    every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

    every() 方法使用指定函数检测数组中的所有元素：

    • 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
    • 如果所有元素都满足条件，则返回 true。

    注意： every() 不会对空数组进行检测。

    注意： every() 不会改变原始数组。

    返回值：布尔值。如果所有元素都通过检测返回 true，否则返回 false。

const list = [
    { name: '头部导航', backward: false },
    { name: '轮播', backward: true },
    { name: '页脚', backward: false },
  ];

  const everyNewest = list.every(item => !item.backward);
 console.log(everyNewest); //false

 const arr = [1,2,3,4]
 const result =arr.every(function(item){
     if(item>3) return true;
 })
 console.log(result); //false
 

 const result2 =arr.every(function(item){
    if(item<5) return true;
})
console.log(result2); //true

比较

  • 二者都是用来做数组条件判断的，都是返回一个布尔值。
  • 二者都可以被中断。
  • some 若某一元素满足条件，返回 true，循环中断。所有元素不满足条件，返回 false。
  • every 与 some 相反，若有一元素不满足条件，返回 false，循环中断。所有元素满足条件，返回 true。

filter、map

  1. filter

    filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

    注意： filter() 不会对空数组进行检测。

    注意： filter() 不会改变原始数组。

    语法：array.filter(function(currentValue,index,arr), thisValue) 与forEach类似

    返回值：返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

  2. map

    map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

    map() 方法按照原始数组元素顺序依次处理元素。

    注意： map() 不会对空数组进行检测。

    注意： map() 不会改变原始数组。

    语法：array.map(function(currentValue,index,arr), thisValue)

    **返回值：**返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

比较：

  • 二者都是生成一个新数组，都不会改变原数组（不包括遍历对象数组时，在回调函数中操作元素对象）。
  • 二者都会跳过空元素。
  • map 会将回调函数的返回值组成一个新数组，数组长度与原数组一致。
  • filter 会将符合回调函数条件的元素组成一个新数组。
  • map 生成的新数组元素可自定义。
  • filter 生成的新数组元素不可自定义，与对应原数组元素一致。
const list = [
    { name: '头部导航', type: 'nav', id: 1 },  
    ,
    { name: '轮播', type: 'content', id: 2 },
    { name: '页脚', type: 'nav', id: 3 },
    ];
    const resultList = list.filter(item => {
      return item.type === 'nav';
    });
    console.log(resultList);  //跳过空元素
    //输出：
    //[
    //   { name: '头部导航', type: 'nav', id: 1 },
    //   { name: '页脚', type: 'nav', id: 3 },
    // ]
    
    const newList = list.map(item => {
      console.log(item);
      return item.id;
    });
    console.log(newList);  //[1, , 2, 3] //跳过空元素

find、findIndex

  1. find

    find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

    find() 方法为数组中的每个元素都调用一次函数执行：

    • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。(找到就停止)
    • 如果没有符合条件的元素返回 undefined

    注意: find() 对于空数组，函数是不会执行的。

    注意: find() 并没有改变数组的原始值。

    语法：array.find(function(currentValue, index, arr),thisValue)

    返回值：返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined。

  2. findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

    findIndex() 方法为数组中的每个元素都调用一次函数执行：

    • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
    • 如果没有符合条件的元素返回 -1

    注意: findIndex() 对于空数组，函数是不会执行的。

    注意: findIndex() 并没有改变数组的原始值。

    语法：array.findIndex(function(currentValue, index, arr), thisValue)

    返回值：返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。

const list = [
    { name: '头部导航', id: 1 },
    { name: '轮播', id: 2 },
    { name: '页脚', id: 3 },
];
const result = list.find(item => item.id === 3);
// result: { name: '页脚', id: 3 }
const index = list.findIndex(item => item.id === 3);
// index: 2

小结

  • 二者都是用来查找数组元素。
  • find 方法返回数组中满足 callback 函数的第一个元素的值。如果不存在返回 undefined。
  • findIndex 它返回数组中找到的元素的索引，而不是其值，如果不存在返回 -1。

reduce、reduceRight

reduce 方法接收两个参数，第一个参数是回调函数（callback）【必须】 ，第二个参数是初始值（initialValue）【可选】。

reduceRight 方法除了与 reduce 执行方向相反外(从右往左)，其他完全与其一致。

array.reduce(function(total, current, currentIndex, sourceArray), initialValue)

回调函数接收四个参数：

  • total：MDN 上解释为累计器，可以理解为它应该是截至当前元素，之前所有的数组元素被回调函数处理累计的结果。
  • current：当前被执行的数组元素。
  • currentIndex: 当前被执行的数组元素索引。
  • sourceArray：原数组，也就是调用 reduce 方法的数组。

initialValue 可选。传递给函数的初始值

如果不传入初始值，reduce 方法会从索引 1 开始执行回调函数，如果传入初始值，将从索引 0 开始、并从初始值的基础上累计执行回调。

返回值: 返回计算结果

注意: reduce() 对于空数组是不会执行回调函数的。

const list  = [
  { name: 'left', width: 20 },
  { name: 'center', width: 70 },
  { name: 'right', width: 10 },
];
const total = list.reduce((currentTotal, item) => {
  return currentTotal + item.width;
}, 0);
// total: 100

参考文章

JS常用的循环遍历你会几种

无知的圆
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中for循环的运行特点
weixin_44682587的博客
03-29 220
for循环会在页面加载完成之后执行，而响应函数在超链接被点击时才执行，当响应函数执行时，for循环早已执行完毕 <body> <a href="javascript:;">链接1</a> <a href="javascript:;">链接2</a> <a href="javascript:;">链接3</a> </body> <script>
深入理解JavaScript的循环遍历
星期一的博客
06-18 587
前言 对一个循环分享的这么详细，相信看完你会有所收获。 正文从这开始～ 在ECMAScript5（简称 ES5）中，有三种 for 循环，分别是： 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6（简称 ES6）中，新增了一种循环，是： for-of 下面我们就来看看这 4 种 for 循环。 一、简单 for 循环 下面先来看看大家最常见的一种写法： 当数组长度在循环过程中不会改变时，我们应将数组长度用变量存储起来，这样会获得更好的效率，下面是改进的写法： 二
Object.prototype.hasOwnProperty.call()
Damien_J_Scott的博客
03-04 8262
之前判定是否含有该key的方法一直是 !!obj[key],后面看到了更加规范的,记录下 JavaScript中Object对象原型上的hasOwnProperty()用来判断一个属性是定义在对象本身而不是继承自原型链。 从console的test可以看出来,它可以判定该key是否存在于object中.但是既然这样可以实现,为什么还要使用Object.prototype.hasOwnProperty.call(),这么复杂的写法呢. 这个test可以看出来,明明a是object的属性,为什么返回.
Object.prototype.hasOwnProperty()
ping
11-12 710
Object.prototype.hasOwnProperty()
js Map List 遍历使用示例
10-27
JavaScript中的Map和List是两种非常重要的数据结构，它们在处理键值对和列表时提供了不同的便利。在这篇文章中，我们将探讨如何遍历Map和List，以及在不同情况下使用它们的最佳实践。 首先，让我们来了解Map。Map是...
JavaScript 另类遍历数组实现代码
12-01
for...of循环可以用来遍历数组，对于数组中的每一个元素，我们也可以使用解构赋值来获取其索引和值。这在遍历数组的同时需要访问索引的场景下非常有用： ```javascript const myArray = ['a', 'b', 'c', 'd']; for...
Javascript常用小技巧汇总
10-24
本文将深入探讨JavaScript中的几个常用小技巧，这些技巧可以帮助开发者提高代码效率和可读性。 首先，我们来看看布尔表达式。在JavaScript中，`null`, `undefined`, 空字符串`''`, 以及数字`0`被视为假性值（falsy...
jquery遍历table的tr获取td的值实现方法
10-22
接着使用for循环遍历每个`<tr>`元素。在循环体内，通过`trList.eq(i).find("td")`选取当前循环到的`<tr>`下的所有`<td>`元素，并存入`tdArr`数组。最后通过`tdArr.eq(index).find("input").val()`获取每个`<td>`内`...
js常用方法8张脑图.zip
06-19
在给定的压缩包文件“js常用方法8张脑图.zip”中，包含的8张脑图涵盖了JavaScript的一些核心知识点，包括时间格式化、URL参数处理、数组去重、随机验证码生成、DOM节点操作以及DOM元素的样式操作。以下是对这些知识...
JS 《》
热门推荐
qq_40055200的博客
11-11 2万+
CSDN 1.基本数据类型有哪几种?(高频) undefined,null,boolean,string,number,Symbol(es6) Symbol:定义对象的唯一标识(和id一样) let name = Symbol() console.log(typeof name) // Symbol 2.引用数据类型有哪些?(高频) Object,Array 内建对象:Object,String,Array 介绍js有哪些内置对象？ Object是JavaScript..
Object.hasOwnProperty.call(object, key) 是什么意思
最新发布
qq_43071951的博客
02-28 4814
Object.hasOwnProperty.call(object, key)
玩转数组高级技法，成为JS高手
JackChan
01-03 222
玩转数组高级技法，成为JS高手
你不知道的十个 JS 小技巧
uuuyy_的博客
12-30 1725
总结了一些开发常用的 JS 小技巧，让你的代码更优雅！ 1. 使用 const 定义 在开发中不要过度声明变量，尽量使用表达式和链式调用形式。然后一般能用const就不要用let。这种模式写多了之后，你会发现在项目中几乎找不到几个用let的地方： // bad let result = false; if (userInfo.age > 30) { result = true; } // good const result = userInfo.age > 30;...
let 连续复制_【进阶4-4期】Lodash是如何实现深拷贝的
weixin_36166752的博客
01-14 225
引言在上一篇文章中介绍了如何实现一个深拷贝，分别说明了对象、数组、循环引用、引用丢失、Symbol和递归爆栈等情况下的深拷贝实践，今天我们来看看 Lodash如何实现上述之外的函数、正则、Date、Buffer、Map、Set、原型链等情况下的深拷贝实践。本篇文章源码基于Lodash4.17.11 版本。整体流程入口入口文件是cloneDeep.js，直接调用核心文件baseClon...
【JS】JS脚本中JSON对象未定义
非正常人研究室
04-08 2458
场景 在使用java的js脚本引擎执行脚本的时候，发现js报错，JSON对象未定义。而我需要用JSON.parse()去解析json字符串。 原因 JS引擎太低了，不存在JSON对象，所以要么不用，要么自己定义。 解决 脚本github地址：json2.js 如果是前端，只需要在执行脚本之前引入这个json2.js脚本就可以了。 但是我的是后端，所以一开始查找资料是怎么在js脚本中引入其他js脚本...
js也有增强的for循环的几种用法
小白菜钟意猪肉的博客
02-08 1万+
for(var item in jsonData){ jsonLength++; }
你不知道的JavaScript--Item17 循环与prototype最后的几点小tips
weixin_30604651的博客
10-21 94
1、优先使用数组而不是Object类型来表示有顺序的集合 ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序。 但是在使用for..in循环对Object中的属性进行遍历的时候，确实是需要依赖于某种顺序的。正因为ECMAScript没有对这个顺序进行明确地规范，所以每个JavaScript执行引擎都能够根据自身的特点进行实现，那么在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值