JavaScript 逻辑运算符在switch case中不生效的问题

目录

问题由来：

问题原因：

解决问题：

结束语：

补充：

---

问题由来：

       朋友在学习Js移动Div位置的时候，想要实现当按上方向键和W键的时候都可以让页面中的Div上移。用到了下面的写法，但是发现只接受到了38也就是上方向键，而点击W键的时候就没有效果。即多种不同的Case要执行相同的代码应该如何做呢？

        错误写法如下:

				switch (event.keyCode) {
					case 37:
						//alert("向左"); left值减小
						box1.style.left = box1.offsetLeft - speed + "px";
						break;
					case 39:
						//alert("向右");
						box1.style.left = box1.offsetLeft + speed + "px";
						break;
					case 38 || 87:
						//alert("向上");
						box1.style.top = box1.offsetTop - speed + "px";
						break;
					case 40:
						//alert("向下");
						box1.style.top = box1.offsetTop + speed + "px";
						break;
				}

---

问题原因：

        这是一种错误的Switch Case语法。在经过调试之后发现38可以正常执行，而87就不被识别，这与或运算符(||)的短路特性有关(当或运算符的条件中的一项被满足时，便会直接执行函数体)。反之如果使用的是与运算符(&&)，则会识别38之后再识别87，最终选择87。即在页面上点击W键，Div会向上移动而点击上方向键则不会。

---

解决问题：

        要使用正确的switch case 语法

        正确写法如下:

		switch (event.keyCode) {
					case 37:
						//alert("向左"); left值减小
						box1.style.left = box1.offsetLeft - speed + "px";
						break;
					case 39:
						//alert("向右");
						box1.style.left = box1.offsetLeft + speed + "px";
						break;
					case 38: case 87:
						//alert("向上");
						box1.style.top = box1.offsetTop - speed + "px";
						break;
					case 40:
						//alert("向下");
						box1.style.top = box1.offsetTop + speed + "px";
						break;
				}

         正确的写法是连续设置多个case，在最后一个case之后写上要执行的函数。

---

结束语：

        至此问题已经解决完毕了

---

补充：

        switch 结构说明：

• switch、case、break、default都是系统关键字，都必须全小写。
• switch后的小括号( )：小括号内一般是一个变量名，这个变量可能会有不同的取值。
• 每个 case的值都会与变量的值进行对比，看是否相等，如果一致就执行该 case语句对应的代码。
• 所有的 case都是 “或”（or） 的关系，每时每刻只有一个 case会满足条件。
• 每个 case中的代码执行完毕后，必须要用 break 语句来阻止代码自动地向下一个 case运行。
• 如果不写 break 语句的话，下面所有的 case语句都会执行一遍。
• 请使用 default关键词来规定匹配不存在时做的事情。可省略不写。

        switch 工作原理： 

• 首先设置表达式 n（通常是一个变量）。
• 随后表达式的值会与结构中的每个 case的值做比较。如果存在匹配，则与该 case关联的代码块会被执行。
• 请使用 break  来阻止代码自动地向下一个 case 运行。
• 请使用 default关键词来规定匹配不存在时做的事情。即匹配失败时默认要执行的代码。