文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript 中 for、forEach、for...in、for...of 循环的区别和使用

2024-11-30 01:09

关注

1. for 循环

for 循环是 JavaScript 中最常用的循环语句之一,它的基本语法为:

for (初始化; 条件; 递增或递减) {
    // 循环体
}

示例:

// 使用 for 循环计算数组中所有元素的总和
let numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}
console.log(sum); // 输出:15

2. forEach 方法

forEach 是 JavaScript 数组对象的一个方法,用于遍历数组的每个元素,并对每个元素执行指定的回调函数。其基本语法为:

array.forEach(function(currentValue, index, array) {
    // 回调函数
});

示例:

// 使用 forEach 方法计算数组中所有元素的总和
let numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(function(number) {
    sum += number;
});
console.log(sum); // 输出:15

3. for...in 循环

for...in 循环用于遍历对象的可枚举属性,并执行指定的代码块。其基本语法为:

for (let key in object) {
    // 执行代码
}

需要注意的是,for...in 循环不仅遍历对象自身的属性,还会遍历继承的属性,因此在遍历对象时,通常需要使用 hasOwnProperty 方法来过滤掉继承的属性。

示例:

// 使用 for...in 循环遍历对象的属性
let person = {
    name: 'John',
    age: 30,
    gender: 'male'
};
for (let key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(key + ': ' + person[key]);
    }
}
// 输出:
// name: John
// age: 30
// gender: male

4. for...of 循环

for...of 循环是 ES6 引入的一种遍历可迭代对象的语法,包括数组、字符串、Set、Map、Generator 对象等。其基本语法为:

for (let element of iterable) {
    // 执行代码
}

与 for...in 循环不同,for...of 循环只遍历可迭代对象自身的元素,不会遍历对象的属性。

示例:

// 使用 for...of 循环遍历数组
let numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let number of numbers) {
    sum += number;
}
console.log(sum); // 输出:15

区别和使用场景

  1. for 循环
  1. forEach 方法
  1. for...in 循环
  1. for...of 循环

不同的循环语句各有特点,应根据具体的需求和场景选择合适的循环方式。

来源:海燕技术栈内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯