?switch用法详解以及React分支结构优化

switch用法详解以及分支结构优化

?️一.switch用法

switch是一个分支接口可以通过匹配不同的值输出不同的结果，具体语法如下

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

注意：当没有break的时候整个循环会无脑向下走，直到遇到break才结束，或者一直执行到最后，如下例子

function myFunction(){
	var x;
	var expression=2;
	switch (expression){
  		case 0:x="今天是星期日";
 		  case 1:x="今天是星期一";
  		case 2:x="今天是星期二";
      case 3:x="今天是星期三";
  		case 4:x="今天是星期四";
    	break;
  		case 5:x="今天是星期五";
      break;
  		case 6:x="今天是星期六";
    	break;
 	}
	document.getElementById("demo").innerHTML=x;
}

这个例子中的代码就会一直执行到“今天是星期四”这一行并且会忽略case的匹配，如果要解决这个问题就要使用break。

在使用 switch 语句时，需要注意以下几点：

• expression 可以是任何类型的表达式，包括数字、字符串、布尔值、对象等等。
• case 后面的表达式值必须与 expression 的值类型相同，否则会被强制转换为相同的类型进行比较。比如，如果 expression 是一个字符串，case 后面的表达式值也必须是字符串，否则会被强制转换为字符串进行比较。
• case 后面的表达式值可以是常量、变量、表达式等等，只要它们的值与 expression 的值相等即可。
• 如果没有匹配的 case，则会执行 default 后面的代码块。如果没有 default 代码块，则不会执行任何代码。
• break 关键字用于结束当前的 case 代码块，转而执行 switch 语句后面的代码。如果省略 break，则会继续执行下一个 case 的代码块，直到遇到 break 或者执行完所有的 case。

?二.在实际开发中的应用

由于在c语言中我们都知道switch的性能是没有if–else的高的，所以往往直接if嵌套了，但是从代码可读性和可维护性考虑是不推荐的有时候遇到分支逻辑判断的时候我们完全可以使用switch来代替

function getDayOfWeek(day) {
  switch(day) {
    case 0:
      return 'Sunday';
    case 1:
      return 'Monday';
    case 2:
      return 'Tuesday';
    case 3:
      return 'Wednesday';
    case 4:
      return 'Thursday';
    case 5:
      return 'Friday';
    case 6:
      return 'Saturday';
    default:
      return 'Invalid day';
  }
}
console.log(getDayOfWeek(0)); // 输出：Sunday
console.log(getDayOfWeek(7)); // 输出：Invalid day

?三.与react结合使用

function App() {
  const [page, setPage] = useState('home');

  switch (page) {
    case 'home':
      return <HomePage />;
    case 'about':
      return <AboutPage />;
    case 'contact':
      return <ContactPage />;
    default:
      return <NotFoundPage />;
  }
}

function HomePage() {
  return <h1>Home Page</h1>;
}

function AboutPage() {
  return <h1>About Page</h1>;
}

function ContactPage() {
  return <h1>Contact Page</h1>;
}

function NotFoundPage() {
  return <h1>404 Not Found</h1>;
}

四.React中分支结构的处理方式

• 单个if判断方式，没有else的方式

  <div>
  
    {isLoggedIn && <AdminPanel />}
  </div>
  

• 有if–else完整判断的情况

  <div>
  
    {isLoggedIn ? (
      <AdminPanel />
    ) : (
      <LoginForm />
    )}
  </div>
  

  let content;
  if (isLoggedIn) {
    content = <AdminPanel />;
  } else {
    content = <LoginForm />;
  }
  return (
    <div>
      {content}
    </div>
  );
  

  一般能够使用三元表达式解决的就用三元表达式解决，这样代码比较紧凑，容易维护，但是使用if这种并不是没有场景，这种和switch在多个组件分支结构中比较合适，这种情况下反而三元表达式不太适合。