js for循环更简洁的写法

最新推荐文章于 2023-07-05 22:36:59 发布
最新推荐文章于 2023-07-05 22:36:59 发布
阅读量1.7k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amily8023/article/details/98880175
版权

<!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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js循环练习
m0_53214892的博客
08-05 371
var num = prompt('请输入您要的操作：\n1.存钱\n2.取钱\n3.显示余额\n4.退出');var save = prompt('请您输入存的钱数：');var get = prompt('请您输入取的钱数：');alert('您现在的钱数是:' + money);alert('您现在的钱数是:' + money);alert('您现在的钱数是:' + money);var pwd = prompt ('请输入密码：');4.使用for循环打印矩形，要求每次只能输出一个☆。...
js 循环练习题
weixin_49868928的博客
10-28 1585
js 循环求值 案例 拓展 <script> //求和演示 var sumWhile = 0; var i=1; while(i<=100){ sumWhile += i; i++; } console.log(sumWhile); var j = 1; var sumDoWhile = 0; do{ sumDoWhile += j; .
JS中简单的for循环
just a moment
11-15 1030
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循环的简单写法
t_i_a_n_1_1的博客
05-25 166
js中for循环的简单写法。
js使用for in和for of来简化普通for循环
weixin_43258184的博客
02-21 504
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]); }
JavaScript之 For 循环的写法汇总和适用场景
oscar999的专栏
07-05 1725
JS的For循环方式主要有： 1. for 循环 2. for ... in 循环 3. for ... of 循环 4. forEach() 除了 for循环外， JavaScript 还具有其他循环方式，例如 while、do...while、map() 方法等
js for循环简写
sf4928579的博客
02-11 988
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循环的几种写法与效率总结
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]; // ... }...
深入了解JavaScript中的for循环
02-01
下面先来看看大家最常见的一种写法：当数组长度在循环过程中不会改变时，我们应将数组长度用变量存储起来，这样会获得更好的效率，下面是改进的写法：通常情况下，我们可以用for-in来遍历一遍数组的内容，代码如下：...
javascript for循环设法提高性能
10-29
在这种情况下，`while`和`do...while`循环体更简洁，并且在循环体可以先执行一次的场景下，`do...while`循环特别有效。但需要注意的是，这样做将`i`移出了循环控制条件，可能会影响代码的可读性。 总的来说，优化...
JS中for循环的四种写法
曹进的博客
09-14 3529
JS中for循环的四种写法
JS中for循环的两种写法
weixin_45151960的博客
10-12 8259
第一种： 最常见普遍的写法，适用于多种语言 for(let i = 0; i < 10 ; i++){ console.log(i); } 打印结果： 第二种： 较第一种比较简单方便 const todo = [ { id : '1', name : 'zhangsan', age : '20', }, { id : '2', name : 'lisis', age :
【进阶】JS超实用的17个代码简写技巧
坚信万物皆可切的切图仔
03-15 3911
再写捞捞的代码要被鄙视的
js代码简化（含es6）
weixin_34159110的博客
09-27 205
1 for-of loop（for循环） for (let i = 0; i < .length; i++) //简化为 for (let index of allImgs) //用于循环key，不推荐在数组使用 for (let index in allImgs) 例 var arr = ['a', 'b', 'c']; arr.forEach(function (elem, index...
js的for循环语句
m0_63639281的博客
08-01 4111
赶紧来学习技术
js的四种for循环的区别和优化写法，与性能区别
HDdgut的博客
04-21 542
orEach和map,await不生效；使用break或continue会报错 for循环、for…in,for…of，支持await，for和for…of中可以使用break和continue；for…in会忽略continue和break
js简单入门 for循环的简单使用
迪丽热bug的博客
08-08 293
for(初始化变量；条件判断；条件变化){ 执行语句 } 1:初始化变量 2：条件判断 2.1：为true时 进入循环体 ==》 执行语句 4：条件变化 4.1：条件判断 如果为true 进入循环体 --》 执行语句 如果为false 结束循环--> ...
js(javascript)中的奇特for循环写法！
weixin_33862514的博客
06-20 101
本文章为JavaScript强化教程系列介绍js开发最近在在一份面试题中看到这样几种for循环的写法第一反应是懵逼的之后仔细看一下还是没有问题的首先上代码第一种 正常的循环[javascript]view plaincopyforvari=0;i<10;i++{}这种f循环是正常的循环完全没有问题第二种[javascript]view plaincopy...
js中for循环的写法
最新发布
10-14
在JavaScript中，for循环有以下几种写法： 1. 基本写法： ``` for (初始化表达式; 条件表达式; 递增表达式) { // 循环体 } ``` 2. for...in循环（用于遍历对象属性）： ``` for (variable in object) { // ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值