JavaScript几种常见循环遍历使用和区别

2024-12-04 20:16:46

前言

在javascript语言中经常需要使用循环语法去获取数据中的一些值，例如，我们需要将列表中的商品逐个输出，或者运行相同的代码将数字 1 到 10 逐个输出。方法也比较多，该篇将讲解常见的循环遍历的使用及区别

1.“for” 循环：它是最常使用的循环形式

对以上代码做出解释

begin	let i = 0	进入循环时执行一次。
condition	`i <= 3`	在每次循环迭代之前检查，如果为 false，停止循环。
body（循环体）	`alert(i)`	条件为真时，重复运行。
step	`i++`	在每次循环体迭代后执行。

2."for..in" 循环：为了遍历一个对象的所有键（key）

for (key in object) {
  // 对此对象属性中的每个键执行的代码
}

// 案例：拿到对象中的键
let user = {
  name: "千锋教育",
  age: 11,
  isAdmin: true
};
for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // 属性键的值
  alert( user[key] ); // 千锋教育,11， true
}

3.for..of：不能获取当前元素的索引，只是获取元素值

let arr = ["千锋教育", "HTML5学科", "前端扛把子"];
for (let key of arr) {
  alert( arr[key] ); // 千锋教育,HTML5学科，前端扛把子
}

对于以上常见三种的循环总结：

for循环：常见的基础循环、可以提前break

for..in循环：用于遍历对象属性、得到对象中的键(字符串)、不可以直接进行数学运算、可以提前break

for..of循环：用于遍历数组和可迭代对象的循环、得到数组对象中的值、可以提前break

4.forEach：允许为数组的每个元素都运行一个函数

arr.forEach(function(item, index, array) {
  // ... 执行代码
});

// 案例：
let arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
     console.log(item) // 1,2,3,4,5
});// undefined
// 没有返回值，本质上等同于 for 循环，对每一项执行 function 函数，不会改变原数组

5.Map and Set（映射和集合）

Map是一组键值对的结构，具有极快的查找速度
let arr = ['HTML5', 'Java', 'python'];
let age = [100, 80, 90];
let res = new Map([['HTML5', 100], ['Java', 80], ['python', 90]]);
res.get('HTML5'); // 100

// Map常见的方法
let res = new Map(); // 空Map
res.set('勇哥', 18); // 添加新的key的value
res.has('勇哥'); // 是否存在key
res.get('勇哥'); // 18
res.delete('勇哥'); // 删除key
res.get('翔哥'); // undefined

// Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key
let set = new Set(["千锋教育", "HTML5", "11"]);
for (let value of set) alert(value);

// 与 forEach 相同：
set.forEach((value, valueAgain, set) => {
  alert(value);
});

Map和Set的总结：

Map是一个带键的数据项的集合、任何键、对象都可以作为键

Set是一组唯一值的集合、不能对元素进行重新排序，也不能直接按其编号来获取元素

以上：作为比较高频的面试题，同学们可以针对练习记忆！

到此这篇关于JavaScript几种常见循环遍历使用和区别的文章就介绍到这了,更多相关JS循环遍历内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

解决vuejs 使用value in list 循环遍历数组出现警告的问题

在使用vuejs遍历数组的时候,使用in语句形式,会有一个警告的提示: 警告很明显说是少了v-bind:key,所以添加一个就ok了,看如下文件: /* eslint-disable */ <template> <div class="hello" style="background: fuchsia"> <ul> <li v-for="(value,key,index) in object" v-bin
JavaScript 中的12种循环遍历方法【总结】

1.for 循环 let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 2 // 2 3 for 循环是 Js 中最常用的一个循环工具,经常用于数组的循环遍历. 2.for in 循环 let obj = {name:'zhou',age:'**'} for(let i in obj){ console.log(i,obj[i]) } // name zhou // age
Javascript数组循环遍历之forEach详解

1.js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了. 除此之外,也可以使用较简便的forEach 方式 2.forEach函数. Firefox 和Chrome 的Array 类型都有forEach的函数.使用如下:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> &l
JavaScript中利用for循环遍历数组

先看一段代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // 一个普通的数组 var arr =[3,5,2,6]; // 普通的for 循环遍历 for(var i = 0 ; i
js 实现获取name 相同的页面元素并循环遍历的方法

实例如下: <input type="hidden" name="blues" value="蓝色浏阳河之最"> <input type="hidden" name="blues" value="蓝色浏阳河之亲"> <input type="hidden" name="blues" value="蓝色浏阳河之
JS中循环遍历数组的四种方式总结

本文比较并总结遍历数组的四种方式: for 循环: for (let index=0; index < someArray.length; index++) { const elem = someArray[index]; // ··· } for-in 循环: for (const key in someArray) { console.log(key); } 数组方法 .forEach(): someArray.forEach((elem, index) => { console.log(
js中的循环方式及各种遍历的方法

目录 for循环 while循环 do-while循环循环的嵌套遍历方法 for - in for - of for循环 1.for有三个表达式:①声明循环变量:②判断循环条件:③更新循环变量:三个表达式之间,用;分割, for循环三个表达式都可以省略,但是两个";"缺一不可. 2.for循环的执行特点:先判断再执行,与while相同 3.for循环三个表达式都可以有多部分组成,第二部分多个判断条件用&& ||连接,
JavaScript中循环遍历Array与Map的方法小结

js循环数组各种方法 eg1: for (var i = 0; i < myStringArray.length; i++) { alert(myStringArray[i]); //Do something } eg2: Array.prototype.foo = "foo!"; var array = ['a', 'b', 'c']; for (var i in array) { alert(array[i]); } for(var i in this.$GLOBAL_DET
JS简单循环遍历json数组的方法

本文实例讲述了JS简单循环遍历json数组的方法.分享给大家供大家参考,具体如下: 例如数据库里面的json字符串是这样的 var str = '[{"name":"宗2瓜","num":"1","price":"122"},{"name":"宗呱呱","num":"1","price":
JavaScript几种常见循环遍历使用和区别

目录前言 1.“for” 循环:它是最常使用的循环形式 2."for..in" 循环:为了遍历一个对象的所有键(key) 3.for..of:不能获取当前元素的索引,只是获取元素值 4.forEach:允许为数组的每个元素都运行一个函数 5.Map and Set(映射和集合) 前言在javascript语言中经常需要使用循环语法去获取数据中的一些值,例如,我们需要将列表中的商品逐个输出,或者运行相同的代码将数字 1 到 10 逐个输出.方法也比较多,该篇将讲解常见的循环遍历的使用
浅析vue中常见循环遍历指令的使用 v-for

vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标运行代码: <body> <div class="box"> <ul> <li v-for="value in arr">{{value}}</li><br> <li v-for="(valu
JavaScript三种绑定事件方式及相互之间的区别分析

本文实例讲述了JavaScript三种绑定事件方式及相互之间的区别.分享给大家供大家参考,具体如下: JavaScript三种绑定事件的方式: 1. <div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件 <script> function clickone(){ alert("hello"); } </script> 2. <div i
javascript两种function的定义介绍及区别说明

一般情况下两者的调用结果是一样的,但是还是有区别的. 第一种方式: 复制代码代码如下: function a(){ alert('old'); } var b=a; function a(){ b(); alert('new'); } a();//浏览器就会出现内存溢出的情况第二种方式: 复制代码代码如下: function a(){ alert('old'); } var b=a; var a=function(){ b(); alert('new'); } a();//浏览器就会按顺序
总结JavaScript三种数据存储方式之间的区别

sessionStorage .localStorage 和 cookie 之间的共同点: 都是保存在浏览器端,且同源的. sessionStorage .localStorage 和 cookie 之间的区别: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下. 存
浅析四种常见的Javascript声明循环变量的书写方式

Javascript中的循环变量声明,到底应该放在哪儿? 习惯1:不声明直接使用 function loop(arr) { for (i = 0; i < arr.length; i++) { // do something } } 非常危险的使用习惯,一般情况下循环变量将成为window对象上的一个属性被全局使用,极有可能影响程序的正常逻辑实现. 需要着重提一下的是,在strict模式下,未声明变量而直接赋值的使用方式会直接抛出异常,早就该这么做啦!引用一下ecma-262标准附录C中的一段话
JavaScript循环遍历的24个方法,你都知道吗

目录前言一.数组遍历方法 1. forEach() 2. map() 3. for of 4. filter() 5. some().every() 6. reduce().reduceRight() 7. find().findIndex() 8. keys().values().entries() 二.对象遍历方法 1. for in 2. Object.keys().Object.values().Object.entries() 3. Object.getOwnPropertyNam
Java之map的常见用法讲解与五种循环遍历实例代码理解

目录一.概述: 二.Map集合的功能介绍三.map官方总结四.实例五.循环遍历的五种方法一.概述: 将键映射到值的对象一个映射不能包含重复的键每个键最多只能映射到一个值 Map接口和Collection接口的不同 Map是双列的,Collection是单列的 Map的键唯一,Collection的子体系Set是唯一的 Map集合的数据结构针对键有效,跟值无关;Collection集合的数据结构是针对元素有效二.Map集合的功能介绍 a:添加功能 V put(K key,V val