js中的数组和对象是如何遍历的？

前端交互仔

已于 2023-09-08 16:11:00 修改

阅读量357

点赞数

分类专栏：前端(HTML 文章标签： javascript html html5

于 2021-09-02 19:57:55 首次发布

本文链接：https://blog.csdn.net/liulang68/article/details/120031357

版权

前端(HTML 专栏收录该内容

235 篇文章 3 订阅

订阅专栏

数组遍历

// for循环
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// forEach方法
const arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
  console.log(item);
});
// for...of
const arr = [1, 2, 3, 4, 5];
for (let item of arr) {
  console.log(item);
}

对象遍历

// for...in循环
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}

// Object.keys()方法
const obj = { a: 1, b: 2, c: 3 };
Object.keys(obj).forEach(key => {
  console.log(key + ': ' + obj[key]);
});

在这里插入图片描述

返回的是新数组。注意一下。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="getElementById('demo').innerHTML=Date()">
      现在的时间是?
    </button>
    <p id="demo"></p>
    <button onclick="test()">点我</button>
    <span id="two" onmouseover="test2()">nihao</span>
    <h1>你好世界</h1>
    <input type="text" onkeydown="keydown()" />
    <img src="../img/1.jpg" alt="" width="120px" id="img" />
    <script>
      function test() {
        alert("说你爱我");
      }

      function test2() {
        console.log((document.getElementById("two").innerHTML = "世界"));
      }
      //   test2();
      function keydown() {
        var o = document.getElementById("img");
        o.style.width = "240px";
        alert("这个世界还好嘛");
      }
    </script>
  </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      var i;
      person = { age: "23", name: "zhangsan", heigth: "187cm" };
      //这里输出的i是键
      for (i in person) {
        console.log(i);
        console.log(person[i]);
      }
    </script>
  </head>
  <body></body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      var size = [1, 2, 3, 4, 5, 6, 7]; //申明一个数组

      //for循环
      for (var i = 0; i < size.length; i++) {
        document.write(size[i] + " "); //数组元素
      }
      //遍历数组的长度就是和小于数组的个数是一样的效果，因为索引是从0开始，然后通过索引去取值。
      for (var i = 0; i < 7; i++) {
        document.write(size[i] + " "); //数组元素
      }
    </script>
  </head>
  <body></body>
</html>

在这里插入图片描述

<p>点击下面的按钮，循环遍历</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var array = new Array();
	var x;
	var txt=""
	array[0] = 1;
	array[3] = 2;
	array[4] = 3;
	array[10] = 4;
	for( x in array ){
		alert(array[x]);     // 依次显示出 1 2 3 4
	} 
	alert(array.length);    // 结果是11
	for( var i=0 ; i<4 ; i++){
		alert(array[i]);     // 依次显示出 1 undefined undefined 2 
	}
	document.getElementById("demo").innerHTML = txt;
}
</script>

在这里插入图片描述

而且它不会继续遍历。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      var i;
      for (i = 0; i < 5; i++) {
        console.log(i);
        alert("我希望我可以活得久一点");
        list: {
          if (i == 3) {
            console.log("加油奥里给");
            break list;
          }
        }
      }
    </script>
  </head>
  <body></body>
</html>

在这里插入图片描述
意思就是continue带和不带都只能在循环中，break带了标签以后还可以跳出代码块的循环。