JS中的for in和for of

在JavaScript中, for...in for...of 都是用于迭代循环的结构:

 

1. for...in 循环:

for...in 循环主要用于遍历对象的可枚举属性。这种循环不仅遍历对象自身的属性,还会遍历原型链上的可枚举属性。它的语法如下:

for (variable in object) {
  // 执行的代码
}

其中 variable 是属性名, object 是要遍历的对象。

注意:虽然 for...in 循环也可以用于遍历数组,但这并不推荐,因为它会遍历数组的所有可枚举属性,包括非索引属性和原型链上的属性。

 

示例:

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  console.log( ${key}: ${obj[key]} );
}

// 输出:
// a: 1
// b: 2
// c: 3

 

2. for...of 循环:

for...of 循环用于遍历可迭代对象(例如数组、字符串、Map、Set等),这是ES6引入的新特性。它的语法如下:

for (variable of iterable) {
  // 执行的代码
}

其中 variable 是每次迭代时的当前元素, iterable 是要遍历的可迭代对象。

 

示例:

const arr = [1, 2, 3];

for (const value of arr) {
  console.log(value);
}

// 输出:
// 1
// 2
// 3

 

 

  for...in for...of 循环在JavaScript中具有不同的使用场景,它们之间的主要区别如下:

1. 遍历对象:

- for...in :适用于遍历对象的可枚举属性,包括原型链上的属性。它会遍历对象自身的属性以及继承自原型链的可枚举属性。这对于处理对象属性时非常有用。
- for...of :不适用于普通对象,因为它们不是可迭代的。如果需要遍历对象属性,建议使用 for...in 循环。

2. 遍历数组:

- for...in :虽然可以用于遍历数组,但并不推荐。因为 for...in 会遍历所有可枚举属性,包括非索引属性和原型链上的属性。这可能导致意外的结果和性能问题。
- for...of :推荐用于遍历数组,因为它只遍历数组的元素,不会遍历非索引属性或原型链上的属性。

3. 遍历其他可迭代对象(例如字符串、Map、Set):

- for...in :不适用于遍历这些可迭代对象。
- for...of :可以遍历这些可迭代对象,如字符串、Map、Set等。

4. 性能:

- for...in :由于需要遍历对象的原型链,可能导致性能较差。
- for...of :遍历可迭代对象时,性能较好。

 

总结:

- 使用 for...in 循环遍历对象的可枚举属性(包括原型链上的属性)。
- 使用 for...of 循环遍历可迭代对象,如数组、字符串、Map、Set等。
- 在处理数组时,尽量避免使用 for...in 循环,以防止意外的结果和性能问题。

 

在实际应用中,根据数据类型和所需操作来选择合适的循环结构。同时,还可以考虑使用其他迭代方法,如数组的 forEach 、 map 、 filter 等高阶函数。

原文链接:https://www.cnblogs.com/ronaldo9ph/p/17332209.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS中的for in和for of - Python技术站

(0)
上一篇 2023年4月20日
下一篇 2023年4月22日

相关文章

  • JavaScript 应用类库代码

    下面是关于JavaScript应用类库代码的完整攻略: 什么是JavaScript应用类库 JavaScript应用类库是一系列封装好的JavaScript函数和对象,它们能够充分利用JavaScript语言的优势,实现一些特定的功能需求。通过引入JavaScript应用类库,能够方便地完成一些复杂的功能开发,避免重复造轮子,提高开发效率。 常见的JavaS…

    JavaScript 2023年5月27日
    00
  • JavaScript立即执行函数用法解析

    JavaScript中的立即执行函数是指在定义后立即执行的函数。它的语法是使用函数表达式或函数声明的方式定义一个函数,然后紧接着使用括号将其包起来,并在后面添加括号,如下: // 函数表达式方式 (function() { // 立即执行的代码 })(); // 函数声明方式 (function foo() { // 立即执行的代码 })(); 这种立即执行…

    JavaScript 2023年5月27日
    00
  • 当json键为数字时的取值方法解析

    当JSON的键为数字时,我们可以使用以下三种方式来取值: 方式一:使用点号加双引号,将数字键转换成字符串来访问。 例如,在下面的JSON数据中,键名为数字1和2: { "1": "Apple", "2": "Banana" } 我们可以通过以下方式访问它们: – Apple可以这…

    JavaScript 2023年5月27日
    00
  • JS判断表单输入是否为空(示例代码)

    JS判断表单输入是否为空是前端开发中常用的一种技巧,可以通过JS代码来判断用户是否填写了表单输入框,从而提高用户体验和数据输入的准确性。下面将详细讲解如何使用JS判断表单输入是否为空,以及一些示例代码和注意事项。 判断表单输入是否为空 JS判断表单输入是否为空的核心代码如下所示: var input = document.getElementById(&qu…

    JavaScript 2023年6月10日
    00
  • javascript中日期函数new Date()的浏览器兼容性问题

    JavaScript中的日期对象是非常常用的,其中一个常见的日期函数是new Date()。然而,在不同的浏览器中,它的行为是不一样的,因此需要特别注意。 不同浏览器中的行为差异 在 new Date() 方法中,如果不传递任何参数,那么它将返回当前日期和时间。例如: var now = new Date(); console.log(now); 但是,在不…

    JavaScript 2023年5月27日
    00
  • JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)

    判断浏览器是否为IE浏览器的方法有很多种,包括通过检测UserAgent(用户代理字符串)、检测浏览器特性、检测IE浏览器独有的属性等方式。以下是一些方法的示例说明。 方法一:检测UserAgent中是否包含”MSIE”或”Trident” function isIE() { const ua = window.navigator.userAgent; co…

    JavaScript 2023年6月10日
    00
  • Javascript Math tan() 方法

    JavaScript中的Math.SQRT2属性是一个常数,表示2的平方根。以下是关于Math.SQRT2属性的完整攻略,含两个示例。 JavaScript Math对象的SQRT2属性 JavaScript的SQRT2属性是一个常数,表示2的平方根。下面是SQRT2属性的语法: Math.SQRT2 下面是一个SQRT2属性的示例: console.log…

    JavaScript 2023年5月11日
    00
  • jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    想要实现记住密码功能需要首先使用jquery.cookie.js库来操作cookie,这个库可以在GitHub上下载到。 引入jquery.cookie.js 首先在head标签中引入jquery和jquery.cookie.js库。 <script src="https://cdn.staticfile.org/jquery/1.12.0/…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部