编程语言
首页 > 编程语言> > 如何在JavaScript中使用for循环

如何在JavaScript中使用for循环

作者:互联网

前言

循环允许我们通过循环数组或对象中的项并做一些事情,比如说打印它们,修改它们,或执行其他类型的任务或动作。JavaScript有各种各样的循环,for循环允许我们对一个集合(如数组)进行迭代。

在这篇文章中,我们将了解JavaScript提供的for循环。我们将看看for...in循环语句是如何在JavaScript中使用的,它的语法,它如何工作的例子,何时使用它或避免它,以及我们可以使用哪些其他类型的循环来代替。

为什么使用for循环

在JavaScript中,就像在其他编程语言中一样,我们使用循环来读取或访问集合中的项。这个集合可以是一个数组或一个对象。每当循环语句在一个集合中的项中循环时,我们称之为一个迭代

有两种方式可以访问集合中的项。第一种方式是通过它在集合中的键,也就是数组中的索引或对象中的属性。第二种方式是通过集合项本身,而不需要键。

for…in循环的定义

JavaScript的for循环会或迭代集合中的键。使用这些键,你就可以访问它在集合中代表的项。

集合的项可以是数组,也可以是对象,甚至可以是字符串。

for…in循环的语法

for循环具有以下语法或结构:

for (let key in value) {
  //do something here
}

在上述代码块中,value是我们迭代的项的集合。它可以是对象、数组、字符串等等。key会是value每一项的键,在每次迭代中都会改变到列表中的下一个键。

注意,这里我们使用letconst来声明key

for-in-loop-diagram.png

在对象中使用for…in循环

在JavaScript中使用for...in循环迭代对象时,其迭代的键或者属性是对象自己的属性(在上面的示例中,由key变量表示)。

由于对象可能通过原型链继承数据项,其中包括对象的默认方法和属性,以及我们可能定义的对象原型,因此我们应该使用hasOwnProperty

在下面的例子中,我们通过变量obj进行循环,并打印每一个属性和值:

const obj = {
  "a": "JavaScript",
  1: "PHP",
  "b": "Python",
  2: "Java"
};

for (let key in obj) {
  console.log(key + ": " + obj[key] )
}

// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"

请注意,键的迭代顺序是升序的(也就是说,从数字开始,按数字的顺序,然后是字母,按字母的顺序)。然而,这个输出的顺序与初始化对象时创建的项的索引顺序不同。

在数组中使用for…in循环

在JavaScript中使用for...in循环来迭代数组时,在这种情况下,key将是元素的索引。然而,索引可以按随机顺序迭代。

因此,如果我们上面展示的for...in循环语法结构中的value变量是一个包含五项的数组,那么key就不能保证是0到4。一些索引可能会在其他索引之前。关于何时可能发生这种情况的细节将在本文后面解释。

在下面的例子中,我们对arr变量进行循环:

const arr = ["JavaScript", "PHP", "Python", "Java"];

for (let key in arr) {
  console.log(key + ": " + arr[key])
}

// Output:
// "0: JavaScript"
// "1: PHP"
// "2: Python"
// "3: Java"

在循环中,我们呈现每个数组元素的索引和值。

在字符串中使用for…in循环

你可以在JavaScript中使用for…in循环来循环字符串。然而,不推荐这么做,因为你将在字符串的索引上循环,而不是字符串本身。

在下面的例子中,我们对str变量进行循环:

const str = "Hello!";

for (let key in str) {
  console.log(key + ": " + str.charAt(key));
}

//Output
// "0: H"
// "1: e"
// "2: l"
// "3: l"
// "4: o"
// "5: !"

在这个循环中,我们要呈现每个字符的键或索引,以及该索引的字符。

让我们看看JavaScript for…in循环最适合的情况。

标签:java,函数,学习,系统,语言,平台,方法,安装,QML,c++,数据
来源: