广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中三种for循环语句的使用总结(for、for...in、for...of)
  • 360
分享到

JavaScript中三种for循环语句的使用总结(for、for...in、for...of)

2024-04-02 19:04:59 360人浏览 安东尼
摘要

前言 每个接触js的开发人员都不可避免的与for循环打交道,毕竟这是遍历必不可少的工具之一。javascript 中的 for 循环语句相信大家都已经快用厌了,现在有好多文章都在讲怎

前言

每个接触js开发人员都不可避免的与for循环打交道,毕竟这是遍历必不可少的工具之一。javascript 中的 for 循环语句相信大家都已经快用厌了,现在有好多文章都在讲怎么减少代码中的 for 循环语句,但是,你又不得不承认它们真的很有用。今天,我来总结一下前端 JavaScript 中三种 for 循环语句。

for

这大概是应用最广的循环语句了吧,简单实用,且大多数时候性能还是在线的,唯一的缺点大概就是太普通,没有特色,导致很多人现在不愿用它。


const array = [4, 7, 9, 2, 6];
for (let index = 0; index < array.length; index++) {
    const element = array[index];
    console.log(element);
}
// 4, 7, 9, 2, 6

for...in

for...in 语句可以以任意顺序遍历一个对象的除 Symbol 以外的可枚举属性。


const temp = {name: "temp"};
function Apple() {
    this.color = 'red';
}

Apple.prototype = temp;

const obj = new Apple();

for (const prop in obj) {
    console.log(`obj.${ prop } = ${ obj[prop] }`);
}

// obj.color = red
// obj.name = temp

如果你只要考虑对象本身的属性,而不是它的原型,那么使用  getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性。


const temp = {name: "temp"};
function Apple() {
    this.color = 'red';
}

Apple.prototype = temp;

const obj = new Apple();

for (const prop in obj) {
    if (obj.hasOwnProperty(prop)) {
        console.log(`obj.${ prop } = ${ obj[prop] }`);
    }
}

// obj.color = red

当然,也可以用来遍历数组


const arr = [1, 2, 3, 4, 5];
for (const key in arr) {
    console.log(key)
}
// 0,1,2,3,4

使用 for...in 可以遍历数组,但是会存在以下问题:

  1. index 索引字符串型数字(注意,非数字),不能直接进行几何运算。
  2. 遍历顺序有可能不是按照实际数组的内部顺序(可能按照随机顺序)。

所以一般不建议使用 for...in 来遍历数组。

for...of

for...of 语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。


const array = ['a', 'b', 'c'];
for (const element of array) {
    console.log(element);
}

// a
// b
// c

for...of 和 for...in 的区别:

  • for...in 语句以任意顺序迭代对象的可枚举属性。
  • for...of 语句遍历可迭代对象定义要迭代的数据。

Object.prototype.objCustom = function () { };
Array.prototype.arrCustom = function () { };

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (const key in iterable) {
    console.log(key); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
// 0, 1, 2, "foo", "arrCustom", "objCustom"

for (const key of iterable) {
    console.log(key);
}
// 3, 5, 7

使用 for...of 遍历 Map 结构:


let nodes = new Map();
nodes.set("node1", "t1")
    .set("node2", "t2")
    .set("node3", "t3");

for (const [node, content] of nodes) {
    console.log(node, content);
}
// node1 t1
// node2 t2
// node3 t3

可以看出,使用 for...of 遍历 Map 结构还是挺方便的,推荐使用!

总结

  1. 如果普通 for 循环用腻了,推荐使用 for...of 来替代。
  2. 这三种循环都可以使用 break 关键字来终止循环,也可以使用 continue 关键字来跳过本次循环。
  3. for...of 循环的适用范围最大。

到此这篇关于JavaScript中三种for循环语句使用总结的文章就介绍到这了,更多相关JS中for循环语句内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript中三种for循环语句的使用总结(for、for...in、for...of)

本文链接: https://www.lsjlt.com/news/129475.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中三种for循环语句的使用总结(for、for...in、for...of)
    前言 每个接触JS的开发人员都不可避免的与for循环打交道,毕竟这是遍历必不可少的工具之一。JavaScript 中的 for 循环语句相信大家都已经快用厌了,现在有好多文章都在讲怎...
    99+
    2022-11-12
  • Python for 循环语句的使用
    目录 Python for 循环语句通过序列索引迭代循环使用 else 语句 Python for 循环语句 Python for循环可以遍历任何序列的项目,如一个列表或者一个字符串。 语法: f...
    99+
    2022-06-02
    Python for 循环语句
  • python中for循环语句如何使用
    在Python中,for循环用于迭代一个可迭代对象(如列表、元组、字符串等)中的元素。语法结构:```for 变量 in 可迭代对象...
    99+
    2023-09-14
    python
  • JS的for循环语句如何使用
    本文小编为大家详细介绍“JS的for循环语句如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“JS的for循环语句如何使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一:...
    99+
    2022-10-19
  • Java中List for循环的6种写法总结(推荐)
    如下所示:List<String> list = new ArrayList<String>();for (int i = 0; i < list.size(); i++) {System.out.printl...
    99+
    2023-05-31
    list for循环 java
  • JavaScript中for-of语句的作用是什么
    这期内容当中小编将会给大家带来有关JavaScript中for-of语句的作用是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。说明for-of语句是一种严格的迭代语句,用于遍历可迭代对象的元素。for...
    99+
    2023-06-20
  • 详解Rust中三种循环(loop,while,for)的使用
    目录楔子loop 循环while 循环for 循环楔子 我们常常需要重复执行同一段代码,针对这种场景,Rust 提供了多种循环(loop)工具。一个循环会执行循环体中的代码直到结尾,...
    99+
    2022-11-13
  • JavaScript中for-in语句的作用是什么
    这篇文章将为大家详细讲解有关JavaScript中for-in语句的作用是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。说明for-in语句是一种严格的迭代语句,用于对象中的非符号键属性...
    99+
    2023-06-20
  • Python的for和break循环结构中使用else语句的技巧
    在Python中的while或者for循环之后还可以有else子句,作用是for循环中if条件一直不满足,则最后就执行else语句。 for i in range(5): if i == 1: p...
    99+
    2022-06-04
    语句 结构 技巧
  • python中for循环的多种使用实例
    目录前言for循环迭代字符串for打印数字注意for循环不能迭代数值类型for循环打印数字的话要借用range函数for循环可用来初始化列表简单的往列表里添加数据列表推导式总结前言 ...
    99+
    2022-11-11
  • python如何在for循环语句中使用Reversed()函数
    这篇文章主要介绍了python如何在for循环语句中使用Reversed()函数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在for循环语句中使用Reversed()函数r...
    99+
    2023-06-27
  • C/C++中for语句循环使用的方法是什么
    这篇文章主要介绍“C/C++中for语句循环使用的方法是什么”,在日常操作中,相信很多人在C/C++中for语句循环使用的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C/C++中for语句循环使用...
    99+
    2023-07-05
  • 【Python入门篇】——Python中循环语句(for循环的嵌套应用)
    作者简介: 辭七七,目前大一,正在学习C/C++,Java,Python等 作者主页: 七七的个人主页 文章收录专栏: Python入门,本专栏主要内容为Python的基础语法,Python中的选...
    99+
    2023-09-27
    python 开发语言 numpy
  • js中for in循环的使用注意哪些问题
    这篇文章主要介绍“js中for in循环的使用注意哪些问题”,在日常操作中,相信很多人在js中for in循环的使用注意哪些问题问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js中for in循环的使用注意哪...
    99+
    2023-06-25
  • Python使用for实现无限循环的多种方式汇总
    目录Python使用for实现无限循环python遍历循环与无限循环遍历循环无限循环循环控制保留字循环的高级用法总结Python使用for实现无限循环 # 方法1.1:借助循环遍历列...
    99+
    2023-03-02
    Python使用for Python无限循环 Python for无限循环
  • JAVA中的for循环几种使用方法讲解
    目录一般写法1.遍历数组的传统方式2.遍历Collection对象的传统方式第二种写法3.遍历数组的简单方式4.遍历Collection的简单方式防止在循环体里修改循环变量5.禁止重...
    99+
    2022-11-12
  • Java中如何使用for循环语句遍历所有元素
    这篇文章主要为大家展示了“Java中如何使用for循环语句遍历所有元素”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Java中如何使用for循环语句遍历所有元素...
    99+
    2022-10-19
  • python如何在for循环语句中使用Enumerate()枚举函数
    小编给大家分享一下python如何在for循环语句中使用Enumerate()枚举函数,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!在for循环语句中使用Enumerate()枚举函数用enumerate()函数获取可迭代...
    99+
    2023-06-27
  • Python中在for循环中嵌套使用if和else语句的技巧
    for...[if]...构建List (List comprehension) 1.简单的for...[if]...语句 Python中,for...[if]...语句一种简洁的构建List的方法,从fo...
    99+
    2022-06-04
    嵌套 语句 技巧
  • Go语言中的for循环使用实例分析
    这篇文章主要介绍“Go语言中的for循环使用实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Go语言中的for循环使用实例分析”文章能帮助大家解决问题。问题案例一:取地址符在 Go 语言中,我...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作