奕玖科技 > 新闻中心 > 技术文章

javascript中for....in和for...of的区别使用场景呢

来源: 奕玖科技 瘦死的猪 | 2023/3/12 13:14:56

JavaScript 中的 for...in 和 for...of 循环是两个不同的迭代器。虽然它们有相似之处,但它们的功能、用途和语法都有所不同。在本文中,我将详细介绍 for...in 和 for...of 循环的区别,以及它们各自的使用场景。

for...in 循环

for...in 循环用于遍历对象中的所有可枚举属性,包括对象原型链上的属性。它的语法如下:

for (Variable in object) {
  // code to be executed
}

其中,variable 是一个变量名,用于存储对象的属性名,object 是要遍历的对象。在循环中,每次迭代会将对象的一个可枚举属性赋值给变量,然后执行一次循环体。

下面是一个简单的示例:

Const person = { name: 'John', age: 30, gender: 'male' };

for (Let key in person) {

console.log(key + ': ' + person[key]);

}

这个循环会输出以下内容:

name: John

age: 30

gender: male

在这个示例中,for...in 循环遍历了 person 对象中的所有可枚举属性,并将每个属性的名称和值输出到控制台。

for...in 循环的一个重要特性是它可以遍历对象原型链上的属性。也就是说,如果一个属性在对象本身没有定义,但它在对象的原型链上定义了,那么这个属性也会被遍历到。例如:

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.gender = 'male';
const john = new Person('John', 30);
for (let key in john) {
  console.log(key + ': ' + john[key]);
}

这个循环会输出以下内容:

name: John

age: 30

gender: male

在这个示例中,for...in 循环遍历了 john 对象的所有可枚举属性,包括它的原型链上的属性 gender。

for...in 循环的缺点是它不能保证属性的顺序。也就是说,对象属性的遍历顺序可能是任意的,取决于 JavaScript 引擎的实现。因此,如果你需要按照特定的顺序遍历对象属性,你可能需要使用其他迭代器。

for...of 循环

for...of 循环用于遍历可迭代对象中的元素,包括数组、字符串、Set、Map 等。它的语法如下:

for (variable of iterable) {
  // code to be executed
}

其中,variable 是一个变量名,用于存储可迭代对象的每个元素,iterable 是要遍历的可迭代对象。在循环中,

在 JavaScript 中,continue 是一个关键字,用于在循环中跳过当前迭代,直接开始下一次迭代。当循环体中的代码遇到 continue 语句时,它将跳过当前迭代,并直接开始下一次迭代,不执行剩余的循环体代码。

continue 语句通常与条件语句一起使用,以控制循环的迭代过程。例如,以下代码使用 continue 语句跳过了数组中的负数元素:

const numbers = [1, -2, 3, -4, 5];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] < 0) {
    continue;
  }
  console.log(numbers[i]);
}

在这个示例中,当循环到数组中的负数元素时,continue 语句将跳过当前迭代,直接开始下一次迭代。因此,只有正数元素会被输出到控制台。

continue 语句还可以在嵌套循环中使用。例如,以下代码使用 continue 语句跳过了二维数组中的偶数元素:

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    if (matrix[i][j] % 2 === 0) {
      continue;
    }
    console.log(matrix[i][j]);
  }
}

在这个示例中,当循环到二维数组中的偶数元素时,continue 语句将跳过当前迭代,直接开始下一次迭代。因此,只有奇数元素会被输出到控制台。

需要注意的是,continue 语句只能在循环中使用。如果在函数或其他代码块中使用 continue 语句,JavaScript 将抛出一个语法错误。此外,continue 语句还可以与标签一起使用,以跳出指定的循环。但这种用法并不常见,需要谨慎使用。

栏目导航
相关文章
文章标签
关于我们
公司简介
企业文化
资质荣誉
服务项目
高端网站定制
微信小程序开发
SEO排名推广
新闻动态
行业新闻
技术学院
常见问题
联系我们
联系我们
人才招聘
联系方式
Q Q:24722
微信:24722
电话:13207941926
地址:江西省抚州市赣东大道融旺国际3栋
Copyright©2008-2022 抚州市奕玖科技有限公司 备案号:赣ICP备2022010182号-1