if多条件判断、三元运算符、switch语句例子

68 阅读 0 评论 45 点赞

我是靠谱客的博主虚拟缘分，最近开发中收集的这篇文章主要介绍if多条件判断、三元运算符、switch语句例子，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

三元运算符:

如名字表示的三元运算符需要三个操作数。

语法是条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

oBth.onclick=function(){
        if (oUl.style.display=='block') {
            oUl.style.display=='none';
        }else{
            oUl.style.display=='block';
        }
    }

用三目运算符;

oBth.onclick=function(){
    oUl.style.display == "block" ? oUl.style.display="none" : oUl.style.display="block"
}

精简：

oBth.onclick=function(){
    var style = oUl.style.display;
    oUl.style.display= style == "block" ? "none":"block"  //这样写的话就一定不能忘了把运算结果重新赋值给元素 - -
　　//oUl.style.display= (style == "block" ? "none":"block") 可读性更高
}

<script type="text/javascript">
	window.onload = function(){
		var oDiv = document.getElementById('div1');
		// 不是所有元素都能够接受键盘事件，有焦点就可以
		document.onkeydown = function(event){
			switch(event.keyCode){
				case 37:
				oDiv.style.left = oDiv.offsetLeft - 10+'px';
				break;
				case 38:
				oDiv.style.top = oDiv.offsetTop - 10+'px';
				break;
				case 39:
				oDiv.style.left = oDiv.offsetLeft + 10+'px';
				break;
				case 40:
				oDiv.style.top =oDiv.offsetTop + 10+'px';
				break;
				default://default 关键词来规定匹配不存在时做的事情
				oDiv.style.top = 0;
			}
		}
	}
</script>

switch(表达式){
            case n:
            需要执行的代码块;
            break;
            case n:
            需要执行的代码块;
            break;
            default:
            需要执行的代码块;
 
 }
    switch 中的case是进行严格的比较 ===,只有当值要与匹配的类型相同时才能匹配。
        var n = "10";
        switch(n){
            case 10:
            document.writeln("第一个case 10");
            break;
            case "10":
            document.writeln("第二个双引号case 10");// 出这个
            break;
            default:
            document.writeln("匹配不成功");
        }

        var num = 1;
        switch (num) {
            case 1:
                document.writeln("show 1!!");
                break;
            case 2:
                document.writeln("show 2!!");
                break;
            case 3:
                document.writeln("show 3!!");
                break;
            default:
                document.writeln("show others!!");
                break;
        }