JS — 10 if...else 判断

最新推荐文章于 2023-01-30 09:15:00 发布

小郭呀~

最新推荐文章于 2023-01-30 09:15:00 发布

阅读量154

点赞数

分类专栏： JS上课笔记

本文链接：https://blog.csdn.net/weixin_46448458/article/details/106738774

版权

JS上课笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

if…else…

判断
*代码执行的时候,在某种情况下执行A,其余情况下执行B
*判断条件有两个结果 : true false

二选一

格式一:
	if(判断条件 A){
		语句一 B
	}
	如果A为真,B里面的内容都会执行
	如果A为假,B里面的内容就不执行

代码示例 :

let num = 0;
if( num === 0 ){
	console.log( "num等于0" );//执行
}

格式二:
	if(判断条件 A){
			语句一 B
	}else{
			语句二 C
	}
	如果A为真,B里面的内容都会执行
	如果A为假,c里面的内容都会执行

代码示例 :

let food = "大米";
if( food === "大米" ){
	console.log( "大米真好吃" );//执行
}else{
	console.log( "火锅真香");//不执行
}

n选一

格式:
	if(判断条件A){
		语句一
	}else if(判断条件B){
		语句二
 	}else if(判断条件C){
		语句三
	}else{
		语句四
	}

let time = "早上";
if( time === "早上" ){
	console.log( "吃早饭" );//执行
}else if( time === "中午" ){
	console.log( "吃中饭" );//不执行
}else if( time === "晚上" ){
	console.log( "吃晚饭" );//不执行
}else{
	console.log( "吃零食" );//不执行
}

例子

let a;// a = undefined => 六大假值为false
if( a ){
	console.log( "a里面有内容" );//不执行
}else{
	console.log( "a里面没有内容" );//执行
}
//结果 => a里面没有内容

let obj = {};
if( obj.a ){//obj.a = undefined
	console.log( "a属性存在" );//不执行
}else{
	console.log( "a属性不存在" );//执行
}
//结果 => a属性不存在

应用

<input type="text" id="content">
<input type="button" id="button" value="提交">
<script>
	//if...else...应用 => 输入框没有内容时点击提交不输出,有内容时点击提交才输出
	//获取元素
	let content = document.getElementById( "content" ),
	button = document.getElementById( "button" );
	button.onclick = function(){
		if( content.value === "" ){//当输入框的value属性值为空字符串时,不执行任何代码 //content.value === "" 可以写成 !content.value 转布尔值取反
			//不执行任何内容
		}else{
			console.log( content.value );//其他情况下执行的代码
		}
	}
</script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title></title>
</head>
<body>
    <input type="text" id="content">
    <input type="button" id="button" value="提交">
    <script>
        /*
        *   判断 => 代码执行的时候,在某种情况下执行A,其余情况下执行B => 判断条件有两个结果 => true false
        *
        *   二选一
        *       if(判断条件 A){
        *           语句一 B
        *       }
        *       如果A为真,B里面的内容都会执行
        *       如果A为假,B里面的内容就不执行
        *
        *   二选一
        *       if(判断条件 A){
        *           语句一 B
        *       }else{
        *           语句二 C
        *       }
        *       如果A为真,B里面的内容都会执行
        *       如果A为假,c里面的内容都会执行
        *
        *   n选一
        *       if(判断条件A){
        *           语句一
        *       }else if(判断条件B){
        *           语句二
        *       }else if(判断条件C){
        *           语句三
        *       }else{
        *           语句四
        *       }
        *
        *
        * */
        let num = 0;
        if( num === 0 ){
            console.log( "num等于0" );
        }

        let food = "大米";
        if( food === "大米" ){
            console.log( "大米真好吃" );
        }else{
            console.log( "火锅真香");
        }

        let a;// a = undefined => 六大假值为false
        if( a ){
            console.log( "a里面有内容" );
        }else{
            console.log( "a里面没有内容" );
        }
        //结果 => a里面没有内容

        let obj = {};
        if( obj.a ){
            console.log( "a属性存在" );
        }else{
            console.log( "a属性不存在" );
        }
        //结果 => a属性不存在

        let time = "早上";
        if( time === "早上" ){
            console.log( "吃早饭" );
        }else if( time === "中午" ){
            console.log( "吃中饭" );
        }else if( time === "晚上" ){
            console.log( "吃晚饭" );
        }else{
            console.log( "吃零食" );
        }
        结果 => 吃早饭

        //if...else...应用 => 输入框没有内容时点击提交不输出,有内容时点击提交才输出
        //获取元素
        let content = document.getElementById( "content" ),
            button = document.getElementById( "button" );
        button.onclick = function(){
            if( content.value === "" ){//当输入框的value属性值为空字符串时,不执行任何代码 //content.value === "" => !content.value 转布尔值取反

            }else{
                console.log( content.value );//其他情况下执行的代码
            }
        }
    </script>
</body>
</html>