介绍

我很高兴很多人看到我的上一篇文章。非常感谢您的收看。https://qiita.com/tkdayo/items/5701013735c667d4cf03

现在是八月，不是吗？

我开始工作已经3个月了。我终于习惯了在东京独自生活和工作生活的节奏。我想说，但我感染了冠状病毒，基本上与社会隔绝（目前在家休养）。然而，由于我们灵活的工作方式，我们正在努力制定新的员工措施。

好吧，我成为了社会的一员，我买了两本写干净代码的书，读完了。

好/坏代码设计简介 - 如何编写可维护、不断增长的代码 可读代码

在这两本书中，从命名约定和注释等非技术元素，我学到了很多东西，比如类的元编程设计，作为一名工程师，有些部分很困难，让我想知道“？？？”。

尽管如此，在阅读时，有关条件表达式的提示信息非常丰富，因此我将对其进行总结。这次是我自己学习的一个输出，是一个类似备忘录的元素。

本文的目标 Yowayowa工程师→请使用它。让我们一起努力 中级工程师 → 如果你什么都不知道，请使用它。感谢您的工作 Tsuyotsuyo Master Engineer → 我不认为有什么我不知道的。请用它来回顾你的日常编码，同时又冒昧。 已经阅读过的工程师→请使用它进行审查。比没读过的人更容易安顿下来 示例说明 概述

这一次，我将使用 React 轻松编写它。为常见的教程计数应用程序添加安排，这是我写的更糟糕的内容：

作为一个动作，

显示计数 如果将变量 visible 设置为 false，则会显示“不可见”（这是视频中没有的功能） 如果是偶数，则显示“This number is even”以及计数 如果数字是奇数，显示“这个数字是奇数”连同计数 显示 ``hogehogefugafuga'' 为 10 的倍数 这就是它的意思。 由于该行为也在视频中发布，请观看以了解。

这是本次审查的脏代码。

应用程序.js

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const visible = true;
  let str = "odd";

  if (!visible) {
    return <h1>閲覧不可です</h1>;
  } else if (count % 2 === 1) {
    str = "odd";
    return (
      <>
        <h1>Count is {count}. This number is {str}</h1>
        <button onClick={() => setCount(count + 1)}>click to add</button>
      </>
    );
  } else {
    if (count % 10 === 0 && count !== 0) {
      return (
        <>
          <h1>hogehogefugafuga</h1>
          <button onClick={() => setCount(count + 1)}>click to add</button>
        </>
      );
    }

    str = "even";
    return (
      <>
        <h1>Count is {count}. This number is {str}</h1>
        <button onClick={() => setCount(count + 1)}>click to add</button>
      </>
    );
  }
}

这段代码中的脏东西

快速浏览和稍微思考一下就会发现

垂直长且难以看到 有长的垂直巢 返回语句往往很冗长

当然，我认为这个问题可以通过代码格式化等来解决。这一次，让我们利用最开始的两本书的知识来解决它。

主要科目 1.尽量减少else if,else with early return（尽量避免嵌套）

pOG无论您是在做 te 还是在阅读文档，“如果有多个条件，写一个 else if 子句，如果它适用于条件以外的东西，写一个 else 子句。”我们被教导

但是，这会降低可读性。为了解决它，让我们在筑巢前早点回来！这就是为什么。

让我们真正重写它。还要在return() 内部进行调整，使其更容易看到。

应用程序.js

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const visible = true;
  let str = "odd";

  if (!visible) return <h1>閲覧不可です</h1>;
  
  if (count % 2 === 1) {
    str = "odd";
    return (
      <>
        <h1>Count is {count}. This number is {str}</h1>
        <button onClick={() => setCount(count + 1)}>click to add</button>
      </>
    );
  }
  
  if (count % 10 === 0 && count !== 0) {
    return (
      <>
        <h1>hogehogefugafuga</h1>
        <button onClick={() => setCount(count + 1)}>click to add</button>
      </>
    );
  }

  str = "even";
  return (
    <>
      <h1>Count is {count}. This number is {str}</h1>
      <button onClick={() => setCount(count + 1)}>click to add</button>
    </>
  );
}

而不是让它更容易看到，我的印象是它可能更容易看到。

2.使用条件的肯定形式

这是阅读代码的时候“这是这个变量的行为相反的”,这部分加粗的识别资源非常浪费。

因此，让我们使代码易于阅读。条件分支也作为逻辑存储一次。（较早的提前退货将取消一次）

应用程序.js

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const visible = true;
  let str = "odd";

  function judgeCount(){
    if (count % 2 === 1) {
      str = "odd";
      return (
        <>
          <h1>Count is {count}. This number is {str}</h1>
          <button onClick={() => setCount(count + 1)}>click to add</button>
        </>
      );
    }
    
    if (count % 10 === 0 && count !== 0) {
      return (
        <>
          <h1>hogehogefugafuga</h1>
          <button onClick={() => setCount(count + 1)}>click to add</button>
        </>
      );
    }
  
    str = "even";
    return (
      <>
        <h1>Count is {count}. This number is {str}</h1>
        <button onClick={() => setCount(count + 1)}>click to add</button>
      </>
    );
  }

  if (visible) {
    return judgeCount()
  }else{
    return <h1>閲覧不可です</h1>;
  }
}

也许这些例子不好，所以不太容易看到......

3.使用三元运算符

说到“短文”，我还是写不出三元运算符。

当涉及到条件分支时，包括我自己在内的新手工程师首先想到的是它通常是一个 if 语句。

[初学者在使用条件分支编写时的感受]

“条件分支？” “现在，让我们编写一个 if 文档。” “即使在重构时也要编写三元运算符...（不要这样做）”

我希望能够从一开始就使用三元运算符进行编写。

应用程序.js

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const visible = true;

  let str = (count % 2 === 1) ? "odd" : "even"
  let message = (count % 10 === 0 && count !== 0) ? "hogehogefugafuga" 
    : visible ?`Count is ${count}. This number is ${str}`
    : "閲覧不可です";
  let hidden = visible ? false : true

  return (
    <>
      <h1>{message}</h1>
      <button onClick={() => setCount(count + 1)} hidden={hidden}>click to add</button>
    </>
  );
}

代码要短得多！ ！对于熟悉三元运算符的人来说，这应该更容易阅读。

题外话 我在这里介绍的内容不一定有效。

这里介绍的原则不一定适用于每个组织或编码工程师。

例如，最后介绍的三元运算符的代码在用 if 语句表示时具有if elseif else 的嵌套结构。但是，如果将三元运算符分开并写出来，

应用程序.js

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const visible = true;

  let str = (count % 2 === 1) ? "odd" : "even"
  let messageCondition = visible ?`Count is ${count}. This number is ${str}`: "閲覧不可です"
  let message = (count % 10 === 0 && count !== 0) ? "hogehogefugafuga" : messageCondition;
  let hidden = visible ? false : true

  return (
    <>
      <h1>{message}</h1>
      <button onClick={() => setCount(count + 1)} hidden={hidden}>click to add</button>
    </>
  );
}

不知何故，这很难看到可读性还取决于组织内的代码标准和团队内工程师的偏好。

比如三元运算符很难看懂，所以特意写了if else文，我不在乎一点嵌套，所以我不敢让轻嵌套就这样，有多种原因，例如故意将否定形式放在条件表达式中以使其更易于阅读。

所以，在将其纳入团队开发时，我认为在采用之前咨询我周围的工程师会更好。在做个人开发的时候，我觉得在使用之前最好先咨询一下自己的技术栈。

以上为主观意见。

综上所述

即使在组织中进行开发，我认为条件句的应用也应牢记以上三点。技术书籍很难从一个角落阅读到另一个角落。

我希望我可以继续使用技术书籍来提高我的技能，并在我遇到困难时作为参考。请让我知道是否有更好的编写方法。

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308622673.html