五个技巧写出更好的js条件语句

35 篇文章 0 订阅
27 篇文章 0 订阅

解决JavaScript中不必要的条件嵌套,多余判定,参数设置,以及参数不确定性。

<script>
        'use strict';
        //1.使用Array.includes来处理多重条件
        /**
         * 如果我们要找到符合我们需要的鞋子
         * 符合的有"Asics" , "Nike" , "Adidas"
         */
        //一般方式处理
        let fondShoes_1 = (shoes)=> {
            if (shoes === "慢跑鞋" || shoes === "休闲鞋" || shoes === "娃娃鞋")
                console.log(`这双${shoes}我喜欢!`);
        };
        // fondShoes_1("慢跑鞋"); //这双慢跑鞋我喜欢!

        //使用Array.includes处理
        //首先将需要验证的对象放到数组中
        const SHOESArr = ["慢跑鞋" , "休闲鞋" , "娃娃鞋"];
        let fondShoes_2 = (shoes)=>{
            if (SHOESArr.includes(shoes))
                console.log(`这双${shoes}我喜欢!`);
        };
        // fondShoes_2("娃娃鞋");//这双娃娃鞋我喜欢!

        //2.减少条件的嵌套
        /**
         * 添加条件:
         * a.在上面的鞋子中如果没有,抛出错误
         * b.如果该鞋子是蓝色的打印标注
         */
        //第一种
        let dealShoes_1 = (shoes , color)=>{
            if (shoes) {//shoes是存在的
                if (SHOESArr.includes(shoes)) {
                    console.log(`这双${shoes}还可以!`);
                    if (color === "blue")
                        console.log(`我很喜欢蓝色的${shoes}!`);
                }
            }else {
                throw new Error("没有鞋子");//打印错误信息,停止后面的代码执行
            }
        };
        // dealShoes_1();//报错打印“没有鞋子”
        // dealShoes_1("休闲鞋");//这双休闲鞋还可以!
        // dealShoes_1("休闲鞋" , "blue");//这双休闲鞋还可以!我很喜欢蓝色的休闲鞋!

        //第二种
        let dealShoes_2 = (shoes , color)=>{
            if (!shoes) throw new Error("没有鞋子");
            if (SHOESArr.includes(shoes)) {
                console.log(`这双${shoes}还可以!`);
                if (color === "blue")
                    console.log(`我很喜欢蓝色的${shoes}!`);
            }
        };
        // dealShoes_2();//报错打印“没有鞋子”
        // dealShoes_2("休闲鞋");//这双休闲鞋还可以!
        // dealShoes_2("休闲鞋" , "blue");//这双休闲鞋还可以!我很喜欢蓝色的休闲鞋!

        //第三种
        let dealShoes_3 = (shoes , color)=>{
            if (!shoes) throw new Error("没有鞋子");
            if (!SHOESArr.includes(shoes)) return;
            console.log(`这双${shoes}还可以!`);
            if (color === "blue")
                console.log(`我很喜欢蓝色的${shoes}!`);
        };
        // dealShoes_3();//报错打印“没有鞋子”
        // dealShoes_3("休闲鞋");//这双休闲鞋还可以!
        // dealShoes_3("休闲鞋" , "blue");//这双休闲鞋还可以!我很喜欢蓝色的休闲鞋!


        //3.使用函数默认参数和解构
        //原始方式处理参数
        let defPara_1 = (shoes , color)=>{
            if (!shoes) return;//如果没有鞋子就不处理了
            let def_color = color || "蓝色";
            console.log(`我很喜欢${def_color}的${shoes}`);
        };
        // defPara_1("篮球鞋");//我很喜欢蓝色的篮球鞋
        // defPara_1("篮球鞋" , "红色");//我很喜欢红色的篮球鞋

        //使用默认参数
        let defPara_2 = (shoes , color = "蓝色")=>{
            if (!shoes) return;
            console.log(`我很喜欢${color}的${shoes}`);
        };
        // defPara_2("篮球鞋");//我很喜欢蓝色的篮球鞋
        // defPara_2("篮球鞋" , "红色");//我很喜欢红色的篮球鞋

        //结构(deconstruction):当处理对象是一个对象时
        //原始
        let dec_1 = (shoes)=>{
            if (shoes && shoes.name)
                console.log(shoes.name);
            else
                console.log("没有这个鞋子");
        };
        // dec_1("篮球鞋");
        // dec_1({});
        // dec_1({name : "篮球鞋" , color : "blue"});
        //默认参数为{}空对象
        let dec_2 = ({name} = {})=>{
            console.log(name || "没有这个鞋子")
        };
        // dec_2("篮球鞋");
        // dec_2({});
        // dec_2({name : "篮球鞋" , color : "blue"});

        //对于switch/map来说Object也许是更好的选择
        /**
         * 根具颜色打印鞋子
         */
        //switch方式
        let findShoesOfColor_1 = (color)=>{
            switch (color){
                case "blue" :
                    console.log("休闲鞋");
                    break;
                case "red":
                    console.log("娃娃鞋");
                    break;
                default:
                    console.log("五颜六色的鞋子");
            }
        };
        findShoesOfColor_1();//五颜六色的鞋子
        findShoesOfColor_1("red");//娃娃鞋

        //使用对象字面量
        const shoes_color_group = {blue : "休闲鞋" , red : "娃娃鞋"};
        let findShoesOfColor_2 = (color)=>{
            console.log(shoes_color_group[color] || "五颜六色的鞋子");
        };
        findShoesOfColor_2();//五颜六色的鞋子
        findShoesOfColor_2("red");//娃娃鞋

        //使用Map
        const shoes_map = new Map()
            .set("blue","休闲鞋")
            .set("red" , "娃娃鞋");
        let findShoesOfColor_3 = (color)=>{
            console.log(shoes_map.get(color) || "五颜六色的鞋子");
        };
        findShoesOfColor_3();//五颜六色的鞋子
        findShoesOfColor_3("blue");//娃娃鞋

        //重构语法
        /**
         * filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
         * 注意: filter() 不会对空数组进行检测。
         * 注意: filter() 不会改变原始数组。
         */
        const shoes_obj = [
            {name : "慢跑鞋" , color : "black"},
            {name : "休闲鞋" , color : "blue"},
            {name : "娃娃鞋" , color : "red"}
        ];
        let findShoesOfColor_4 = (color)=>{
            console.log(shoes_obj.filter(f =>f.color === color));
        };
        findShoesOfColor_4();//[]
        findShoesOfColor_4("black");//[{name : "慢跑鞋" , color : "black"},]

        //使用Array.every和Array.some来检查数组中是否全部/部分满足需求
        //原始
        let checkShoes_1 = (color)=>{
            let isRed = true;
            for (let s of shoes_obj) {
                if (!isRed) break;
                isRed = (s.color === color);
            }
            console.log(isRed);
        };
        checkShoes_1();//false
        checkShoes_1("red");//false

        //使用every检查全部是否符合
        let checkShoes_2 = (color)=>{
            let isRed = shoes_obj.every(f => f.color === color);
            console.log(isRed);
        };
        checkShoes_2();//false
        checkShoes_2("red");//false

        //使用some检查是否含有符合标准的项
        let checkShoes_3 = (color)=>{
            let hasRes = shoes_obj.some(f => f.color === color);
            console.log(hasRes);
        };
        checkShoes_3();//false
        checkShoes_3("red");//true
    </script>

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值