js for循环更简洁的写法

最新推荐文章于 2025-06-10 21:29:35 发布
原创 最新推荐文章于 2025-06-10 21:29:35 发布 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            //1.argument形参，在实参数目比形参数目多的时候，实参也会保存在argument中，能够被读取
//            function params(){
//                console.log(arguments)
//                if(arguments.length==0){
//                    alert("请输入参数")
//                }else if(arguments.length==1){
//                    alert(Math.pow(arguments[0],2))                        
//                }else{
//                    var sum = 0;
//                    for(var i = 0;i<arguments.length;i++){
//                        sum += arguments[i]
//                    }
//                    alert(sum)
//                }
//            }
//            params(9)
            //2.通过数组观察闭包
            //for循环10次完成之后才调用了函数，所以每次输出都为10
//            var arr = []
//            for(var i=0;i<10;i++){
//                arr[i] = function(){
//                    console.log(i)
//                }
//            }
//            arr[0]()
            //通过IIFE解决闭包问题
//            var arr = [];
//            for(var i = 0;i < 10; i++){
//                (function(m){
//                    arr[m] = function(){
//                        console.log(m)
//                    }
//                })(i)   //i每次穿进去都是当前循环的数字，所以不会造成闭包
//            }
//            console.log(arr)
//            arr[4]()

            //3.多重判断的时候使用Array.includes,代码会更简洁
            
//            function test(fruit){
//                if (fruit == "apple" || fruit == "strawberry"){
//                    console.log("red")
//                }
//            }
//            
//            function test(fruit){
//                const redFruits ['apple','strawberry','cherry','cranberries'];
//                
//                if(redFruits.includes(fruit)){
//                    console.log('red')
//                }
//            }
            
            //4.更少的嵌套，尽早return
            
//            function test(fruit,quantity){
//                const redFruits = ['apple','strawberry','cherry','cranbrries'];
//                
//                //条件1，fruit必须有值
//                if(fruit){
//                    //条件2，必须是红色
//                    if(redFruits.includes(fruit)){
//                        console.log('red')
//                        //条件3，quantity大于10
//                        if(quantity > 10){
//                            console.log('big quantity')
//                        }
//                    }
//                }else{
//                    throw new Error('No Fruit!')
//                }
//            }
//            test(null)
//            test("apple")
//            test("apple",30)

            //正确写法
//            function test(fruit,quantity){
//                const redFruits = ['apple','strawberry','cherry','cranberries'];
//                
//                //条件1，尽早抛出错误
//                if(!fruit) throw new Error('No Fruit');
//                
//                //条件2
//                if(redFruits.includes(fruit)){
//                    console.log("red")
//                    
//                    //条件3，必须大质量
//                    if(quantity > 10){
//                        console.log('big quantity') 
//                    }
//                }
//            }
            
            //更少的嵌套
//            function test(fruit,quantity){
//                const redFruit = ['apple','strawberry','cherry','cranberries']
//                
//                //条件1，尽早抛出错误
//                if(!fruit) throw new Error('No FRUIT')
//                
//                //条件2，当水果不是红色时停止继续执行
//                if(!redFruits.includes(fruit)) return;
//                console.log("red")
//                
//                if()
//            }
            
            //使用参数和结构
//            function test(fruit,quantity){
//                if(!fruit) return 
//                
//                //如果quantity值没有传入，设置默认值为1
//                
//                const q = quantity || 1
//                
//                console.log(`we have ${q} ${fruit}`)
//            }
//            
//            test('banana')
//            test('apple',2)
            
            //通过声明默认函数参数来消除变量q
//            function test(fruit,quantity=1){
//                //如果quantity没有传入参数，设置默认参数为1，同时也可以给fruit分配默认值fruit='unknown'
//                console.log(`we have ${quantity} ${fruit}!`)
//            }
            
            //如果fruit是个对象
//            function test(fruit,quantity){
//                //当值存在时打印fruit的值
//                if(fruit && fruit.name){
//                    console.log(fruit.name)
//                }else{
//                    console.log('unknown')
//                }
//            }
//            test(undefined)
//            test({})
//            test({name:'apple',color:'red'})
            
            //解构，仅仅获取name属性
            //为其赋默认值为空对象
            /*由于只需要name属性，所以用{name}解构出参数，然后就能使用变量name代替fruit.name,同时也需要声明空对象{}
             作为默认值，否则将得到一个undefined和null解构的错误，因为在undefined中没有name的属性
             */
//            function test({name} = {}){
//                console.log(name || 'unknown')
//            }
//            test(undefined)
//            test({})
//            test({name:'apple',color:'red'})

            //使用第三方库，减少对null的检查
            //1)使用Lodash get函数
            //使用facebook开源的东西库（with babeljs）
//            function test(fruit){
//                //获取属性名，如果属性名不可用，赋默认值为unknown
//                console.log(__.get(fruit,'name','unknown'))
//            }
//            test(undefined)
//            test({})
//            test({ name:'apple',color:'red' })

            //5.倾向于对象遍历而不是switch语句
//            function test(color) {
//              // 使用条件语句来寻找对应颜色的水果
//              switch (color) {
//                case 'red':
//                  return ['apple', 'strawberry'];
//                case 'yellow':
//                  return ['banana', 'pineapple'];
//                case 'purple':
//                  return ['grape', 'plum'];
//                default:
//                  return [];
//              }
//            }
//            
//            // test results
//            test(null); // []
//            test('yellow'); // ['banana', 'pineapple']

            //更简洁的代码
//            const fruitColor = {
//                red:['apple',strawberry],
//                yellow:['banana','pineapple'],
//                purple:['grape','plum']
//            }
//            
//            function test (color){
//                return fruitColor[color]
//            }
//            //或者是使用Map实现相同的效果
//            //map是es5规范之后实现的对象类型，允许你存储key和value的值
//            const fruitColor = new Map()
//                .set('red',['apple','strawberry'])
//                .set('yellow',['banana','pineapple'])
//                .set('purple',['grape','plum'])
//            
//            function test (color){
//                fruitColor.get(color) || []
//            }

            //TL;DR 的重构语法
            //用Array.filter重构我们的代码，实现相同的效果
            
            var fruits = [
                { name:'apple',color:'red' },
                { name:'banana',color:'yellow' },
                { name:'grape',color:'purple' }
                
            ]
            
            function test (color){
                return fruits.filter(f => f.color == color)
            }
            test(red)
            //对所有/部分判断使用Array.every/Array.some
             //检查所有的饿水果是否都是红色
//             const fruits = [
//             { name:'apple',color:'red' },
//             { name:'banana',color:'yellow' },
//             { name:'grape',color:'purple' },
//             ];
//             function test (){
//                 let isAllRed = true;
//                 
//                 //条件，所有水果都是红色
//                 for (let f of fruits){
//                     if(!isAllRed) break;
//                     isAllRed = (f.color == 'red')
//                 }
//                 
//                 console.log(isAllRed)
//             }

            //代码优化
            //             const fruits = [
//             { name:'apple',color:'red' },
//             { name:'banana',color:'yellow' },
//             { name:'grape',color:'purple' },
//             ];
            
//            function test (){
//                const isAllRed = fruits.every(f => f.color == 'red');
//                console.log(isAllRed)
//            }

            //检测是否存在红色的水果
             const fruits = [
             { name:'apple',color:'red' },
             { name:'banana',color:'yellow' },
             { name:'grape',color:'purple' },
             ];

            const isAnyRed  = fruits.some(f = f.color == 'red');
            console.log(isAnyRed)
            
        </script>
    </body>
</html>

Deamy8023
关注
JavaScript之 For 循环的写法汇总和适用场景
oscar999的专栏
07-05 2024
JS的For循环方式主要有： 1. for 循环 2. for ... in 循环 3. for ... of 循环 4. forEach() 除了 for循环外， JavaScript 还具有其他循环方式，例如 while、do...while、map() 方法等
JavaScript 基础三 for 循环；循环嵌套；while循环； do...while循环；关键字 continue、break
m0_55170432的博客
03-28 1661
1.0 循环 循环的目的： 在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句 在JS中主要有三种循环： for 循环 while 循环 do…while 循环 2.0 for 循环 语法结构： <script> for 让我们重复执行某些代码 ,通常与计数有关 for 语法 for (初始化变量； 条件表达式； 操作表达式) { //循环体 }
js for循环简写
sf4928579的博客
02-11 1094
csdn 问答找到的知识点 var arr = [1, 2, 3, 4, 5] // for循环三个参数都是可选参数,但是;要写全 // 此题目的 item=arr[i++] 就是判断条件,如果循环到数组不存在的下标 就给item赋值undefined 而undefined就是false 就会跳出循环 for (var i = 0, item; item = arr[i++];) { console.log(item); } console.log(item);//
JavaScript for 循环
最新发布
likuoelie的博客
06-10 1941
以下表格总结了for循环和for/in循环类型用途示例for循环基于索引的遍历（如数组）for/in循环遍历对象属性。
JS中简单的for循环
just a moment
11-15 1143
1、普通的for循环 totalPrice() { let totalPrice = 0; for (let i = 0; i < this.books.length; i++) { totalPrice += this.books[i].price * this.books[i].count; } return totalPrice; }, 2、for(let … in) totalPrice() { let totalPrice = 0;
js使用for in和for of来简化普通for循环
weixin_43258184的博客
02-21 594
let arr = [10, 20, 30, 40]; //普通写法 for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } // 简写 for (const val of arr) { console.log(val); } for (const index in arr) { console.log(arr[index]); }
js中for循环的简单写法
t_i_a_n_1_1的博客
05-25 292
js中for循环的简单写法。
JavaScript中for循环的几种写法与效率总结
10-20
每个接触JS的开发人员都不可避免的与for循环打交道，毕竟这是遍历必不可少的工具之一。...下面这篇文章就主要介绍了JavaScript中几种for循环的写法与效率,需要的朋友可以参考借鉴，下面来一起看看吧。
Javascript中for循环语句的几种写法总结对比
10-20
在JavaScript中，for循环有多种不同的写法，每种都有其适用的场景和优缺点。以下是几种常见的for循环语句的总结对比： 1. **基础写法**： ```javascript for (var i = 0; i ; i++) { var a = arr[i]; // ... }...
超强推荐的js编程中的简洁写法收集
10-30
### 超强推荐的JS编程中的简洁写法收集 #### 概述 本文将详细介绍在JavaScript编程中一些常用的简洁写法，旨在帮助开发者提高代码的可读性和编写效率。这些技巧不仅能够使代码更加简洁，还能提升程序的性能。 ###...
JS中for循环的四种写法
曹进的博客
09-14 3939
JS中for循环的四种写法
js中奇特的for循环写法
weixin_34194551的博客
10-15 115
//正常的for循环 for(var i=0;i&lt;10;i++){ console.log(i); } //输出：1，2，3……10 //简写 for(var i=10;i--;){ console.log(i); } //输出：9，8，7，……0 //变种： for(var i=-10;i++;){ console.log(i*-1); } //...
js的循环简单练习
weixin_43900601的博客
03-27 370
水仙花 for(var i = 100; i<1000;i++){ var g=i%10; var s=parseInt(i/10)%10; var b=parseInt(index/100)%10; if( i == ggg+sss+bbb){ alert(i) } } 九九乘法表 for(var i=1;i<10;i++){ for(var j=1;j<10;j++){ ...
js中的for循环
qq_40410916的博客
09-02 6906
for循环经常使用，js常用有4中for循环， 普通 for（表达式1；表达式2；表达式3），for（ i in obj），for （item of obj），foreach(callback(val,index,arr),thisArg ) for for 语句用于创建一个循环，它包含了三个可选的表达式，这三个表达式被包围在圆括号之中，使用分号分隔，后跟一个用于在循环中执行的语句（通常是一个块语句）。 let str = ''; for (let i = 0; i < 9; i++) {
JS中for循环的两种写法
weixin_45151960的博客
10-12 8364
第一种： 最常见普遍的写法，适用于多种语言 for(let i = 0; i < 10 ; i++){ console.log(i); } 打印结果： 第二种： 较第一种比较简单方便 const todo = [ { id : '1', name : 'zhangsan', age : '20', }, { id : '2', name : 'lisis', age :
js中的循环
汤姆猫的博客
05-30 649
循环是编程中一个非常重要的概念，它可以让程序根据一定的条件重复执行某段代码。在 JavaScript 中，我们可以使用多种不同的循环结构来实现这个功能。
新人学习笔记之（JavaScript循环）
2401_83311390的博客
05-28 1060
JavaScript循环
js(javascript)中的奇特for循环写法！
weixin_33862514的博客
06-20 137
本文章为JavaScript强化教程系列介绍js开发最近在在一份面试题中看到这样几种for循环的写法第一反应是懵逼的之后仔细看一下还是没有问题的首先上代码第一种 正常的循环[javascript]view plaincopyforvari=0;i<10;i++{}这种f循环是正常的循环完全没有问题第二种[javascript]view plaincopy...
js的循环
tsc666777的博客
03-26 238
此循环是while循环的一个变体，它首先执行一次操作，然后再进行条件判断，是true的话就继续执行操作，否则的话，循环结束。JS常见的循环，常用于循环数组、
js的for循环写法
04-26
<think>好的，我现在需要帮助用户解决关于JavaScript中for循环语法的问题。首先，用户明确询问正确的写法或语法示例，所以我应该先回顾一下自己掌握的JavaScript知识，确保准确性。 根据系统指令，我需要使用中文回答，并且确保数学表达式格式正确，但这个问题可能不涉及数学公式，所以重点放在代码示例和结构上。用户还要求生成相关问题，这部分需要最后处理。 先回忆JavaScript的for循环基本结构。for循环通常由三个部分组成：初始化表达式、循环条件和更新表达式。基本语法是： for (初始化; 条件; 更新) { // 循环体 } 比如，一个简单的例子是打印数字0到4： for (let i = 0; i < 5; i++) { console.log(i); } 这里，初始化是声明变量i并赋值为0，条件是i < 5，每次循环后i自增1。循环体执行5次，i从0到4。 接下来，用户可能需要更复杂的例子，比如遍历数组。例如： const arr = ['a', 'b', 'c']; for (let j = 0; j < arr.length; j++) { console.log(arr[j]); } 这里，循环变量j从0开始，直到数组长度减1，依次访问每个元素。 另外，用户提供的引用中有提到for/in循环，但用户的问题是关于基本的for循环，可能需要区分两者。不过根据用户的问题，他们可能只需要标准的for循环语法，所以暂时不需要深入讨论for/in，但或许可以简要提及作为扩展。 然后，我需要检查是否有常见的错误或注意事项需要提醒用户。例如，循环条件如果写错可能导致无限循环，或者初始化变量时的作用域问题（比如使用let还是var）。比如，使用var时变量会存在于函数作用域，而let是块级作用域，这在循环中处理闭包时会有不同表现。 例如： for (var k = 0; k < 3; k++) { setTimeout(() => console.log(k), 1000); } // 输出3次3 而使用let： for (let k = 0; k < 3; k++) { setTimeout(() => console.log(k), 1000); } // 输出0,1,2 这说明作用域的不同影响，可能对用户有帮助，可以提及。 另外，用户可能想知道循环的变体，比如省略某些部分。例如，初始化可以在循环外部： let m = 0; for (; m < 5; m++) { console.log(m); } 或者省略所有表达式，但需要使用break来退出循环： let n = 0; for (;;) { if (n >= 5) break; console.log(n); n++; } 不过这种情况较少见，但用户应该了解语法上的可能性。 现在需要确保回答结构清晰，分点说明，并给出示例代码。根据系统指令，代码块需要用三个反引号包裹，并标注语言类型。例如： ```javascript for (let i = 0; i < 5; i++) { console.log(i); } ``` 此外，引用中的内容需要适当提及，但用户的问题主要关注语法，所以引用中的for循环结构可以参考引用[1]和引用[3]，其中引用[1]提到了基本语法，引用[3]讨论了循环要素如循环体和终止条件。因此可以在回答中引用这些部分，比如在解释循环的三个部分时添加引用标识。 现在总结回答的结构： 1. 基本语法结构，分点解释初始化、条件、更新。 2. 示例代码，如数字循环和数组遍历。 3. 注意事项，如作用域、无限循环避免。 4. 相关引用，如引用[1]和[3]。 生成的问题可能需要包括for循环的变体、常见错误、与其他循环结构的对比等。 最后检查是否符合所有系统指令：中文回答，代码格式正确，引用正确，生成相关问题。</think>### JavaScript for 循环语法详解 JavaScript 的 `for` 循环通过控制初始化、循环条件和更新表达式实现重复执行代码块的功能[^3]。 #### 基础语法 ```javascript for (初始化; 条件; 更新表达式) { // 循环体代码 } ``` - **初始化**：声明循环控制变量（例如 `let i = 0`）。 - **条件**：每次循环前检查的条件，若为 `true` 则执行循环体（例如 `i < 5`）。 - **更新表达式**：每轮循环结束后执行的操作（例如 `i++`）。 #### 示例代码 1. **遍历数字 0-4**： ```javascript for (let i = 0; i < 5; i++) { console.log(i); // 输出 0,1,2,3,4 } ``` 2. **遍历数组元素**： ```javascript const fruits = ["apple", "banana", "orange"]; for (let j = 0; j < fruits.length; j++) { console.log(fruits[j]); // 依次输出数组元素 } ``` #### 注意事项 1. **作用域问题**： 使用 `let` 声明变量时，循环变量仅在块级作用域内有效；若使用 `var`，变量会提升至函数作用域[^3]。 ```javascript // 使用 var 可能导致意外结果 for (var k = 0; k < 3; k++) { setTimeout(() => console.log(k), 100); // 输出 3,3,3 } ``` 2. **避免无限循环**： 确保条件最终会变为 `false`。若省略条件，需在循环体内通过 `break` 退出： ```javascript let n = 0; for (;;) { if (n >= 5) break; console.log(n); // 输出 0,1,2,3,4 n++; } ``` #### 扩展用法 - **省略初始化或更新表达式**： 可在循环外定义变量或手动更新： ```javascript let m = 0; for (; m < 3;) { console.log(m); // 输出 0,1,2 m++; } ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值