JavaScriptの開発は技能を身につけなければなりません.

申明:本文は次のように転載します.https://github.com/dawn-plex/translate/blob/master/articles/5-Tips-to-Write-Better-Conditionals-in-JavaScript.md
作者に感謝します.ありがとうございます.

    ：5 Tips to Write Better Conditionals in JavaScript
    ：ecelyn Yeen(@jecelynyeen)
    ：       
    ：https://github.com/dawn-teams/translate/blob/master/articles/5-Tips-to-Write-Better-Conditionals-in-JavaScript.md
  ：  (  )
   ：  ，Mcskiller

JavaScript条件語句の5つの規則を書きます.
JavaScriptを使って仕事をする時、私達はいつも条件の語句と付き合って、ここに5条があって、あなたにもっと良い/綺麗な条件の語句を書かせる提案があります.
1.複数判定の場合はAray.includesを使用する
2.より少ない入れ子で、早くreturn
3.標準パラメータと構成解除を使う
4.Switch文ではなくオブジェクトを遍歴する傾向があります.
5.すべて/部分判定に対して、アラy.every&Aray.someを使う
6.まとめ
1.複数判定の場合はAray.includesを使用する
この例を見てみましょう.

// condition
function test(fruit) {
  if (fruit == 'apple' || fruit == 'strawberry') {
    console.log('red');
  }
}

まず、上の例は大丈夫です.もっと名前があったら、呼んでください.  cherry 和  cranberries 赤い果物は?私たちはもっと多くのものを使うつもりです.  || 条件文を広げますか?
私たちは使えます  Array.includes (Aray.includes)条件文を書き換えます.

function test(fruit) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

  if (redFruits.includes(fruit)) {
    console.log('red');
  }
}

(red fruits)という判断条件を一つの配列に抽出します.このようにしてコードがもっと綺麗に見えます.
 
これは確かに使いやすいです.ここで著者はAray.includesだけをあげました.もう一つのAray.indexOfも使えます.帰って配列の中で与えられた要素の最初の索引が見つけられます.もし存在しないならば-1に戻ります.

function test(fruit) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

  if (redFruits.indexOf(fruit) != -1) {
　　 console.log('red'); 
　} 
}
test('apple') //red

 
感覚効果は同じですが、ここでは配列に所与の要素が含まれているかどうかを判断するなら、アラy.includesを使って直接ブール値に戻すのが一番いいでしょう.
2.より少ない入れ子、早期Return
前の例を拡張して二つの条件を含ませましょう.

着信パラメータflutがない場合、エラーを投げます.

は、quantityパラメータを受け取り、かつ、quantityが10より大きいときに

を印刷する.

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  //    1: fruit     
  if (fruit) {
    //    2:    red 
    if (redFruits.includes(fruit)) {
      console.log('red');
      //    3: quantity  10
      if (quantity > 10) {
        console.log('big quantity');
      }
    }
  } else {
    throw new Error('No fruit!');
  }
}
//     
test(null); // error: No fruits
test('apple'); // print: red
test('apple', 20); // print: red, big quantity

上のコードには、私たちがあります.

1 if/else文のフィルタリングが無効な文

層ifネスティングステートメント(条件1,2&3)

私が個人的に遵守しているルールは、一般的に無効な条件を発見した時に、できるだけ早くReturnします.

 
   
/_         ，  Return _/
function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

  //    1:       
  if (!fruit) throw new Error('No fruit!');

  //    2:       
  if (redFruits.includes(fruit)) {
    console.log('red');

    //    3:        
    if (quantity > 10) {
      console.log('big quantity');
    }
  }
}
こうすると、私たちは入れ墨の言葉が足りなくなります.このコードのスタイルはとてもいいです.特にif文が長い時(一番下にスクロールしてからelse文があると知っています.これはクールではありません.)
逆さま判定条件＆早目のリターンでifネストをさらに減らすことができます.次に私達はどのように判断条件を処理しますか?
/_         ，  Return _/

function test(fruit, quantity) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

  //    1:       
  if (!fruit) throw new Error('No fruit!');
  //    2:               
  if (!redFruits.includes(fruit)) return; 

  console.log('red');

  //    3:        
  if (quantity > 10) {
    console.log('big quantity');
  }
}
  
逆さま判定条件2により、私たちのコードは入れ子文を避けました.この技術は長い論理判断が必要な時に非常に役立ちます.特に条件が満たされない時には停止して処理したいです.
そしてこのようにするのは難しくないです.自分に聞いてみてください.このバージョンは前のものよりもっと良くて、読み取り可能性が高いですか?
しかし、私は以前のバージョンを残します.なぜなら、
コードは短くて直接的で、ifネストのより鮮明な
を含みます.
逆さまの判断条件は思考の負担を強めることがあります.
そのため、入れ子を極力減らし、早めにリセットしますが、やりすぎないようにしてください.興味があれば、この話題についての文章とStockOverflow上の討論を見てもいいです.
 Avoid Else,Return Early by Tim Oxley 
 Stock Overflow discussion オンフ/else coding style 
3.標準パラメータと構成解除を使う
下のコードを当ててみます.JavaScriptの中ではいつもチェックが必要です.  null /  undefinedの値と標準値を指定します.
function test(fruit, quantity) {
  if (!fruit) return;
  //    quantity       ，       1
  const q = quantity || 1; 

  console.log(`We have ${q} ${fruit}!`);
}

//test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!
実際には、変数qはデフォルトの関数パラメータを宣言することによって消去されます.
function test(fruit, quantity = 1) {
  //    quantity       ，       1
  if (!fruit) return;
  console.log(`We have ${quantity} ${fruit}!`);
}

//test results
test('banana'); // We have 1 banana!
test('apple', 2); // We have 2 apple!
これはもっと直観的ではないですか?各声明にはデフォルトのパラメータがあります.
例えば、fruitにデフォルト値を割り当てることもできる.
もしfunction test(fruit = 'unknown', quantity = 1)がobjectだったらどうなりますか?デフォルトのパラメータを割り当てることができますか?
function test(fruit) { 
  //         fruit   
  if (fruit && fruit.name)  {
    console.log (fruit.name);
  } else {
    console.log('unknown');
  }
}

//test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple
上記の例を見ると、私たちはflutオブジェクトの中に存在する可能性のあるname属性をプリントしたいです.そうしないとunknownを印刷します.デフォルトのパラメータと構成によって判断条件を避けることができます.  fruit
//    -      name   
//           
function test({name} = {}) {
  console.log (name || 'unknown');
}

// test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple
私たちは必要なだけです.  fruit && fruit.name 属性を使うことができます.  name パラメータを分解して、変数を使うことができます.  {name} 代わりに  name私たちも空のオブジェクトを宣言したいです.  fruit.name 標準として.もし私たちがそうしないなら、実行します.  {} undefinedまたはnullに対して解決できないエラーが発生します.undefinedにはないからです.  test(undefined) を選択します
もし第三者倉庫を使ってもいいなら、これはいくつかの方法でnullの検査を減らすことができます.
使用 Lodash get関数
フェイスブックソースのidxライブラリ(with Babeljs)を使用して
これはLodashを使用した例である.
function test(fruit) {
  //      ，        ，      unknown
  console.log(__.get(fruit, 'name', 'unknown'); 
}

// test results
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple
jsbinでデモコードを実行できます.これ以外にも、関数的にプログラミングされたファンなら、使用することができます. Lodash fp,Lodashの関数バージョン(方法はnameまたはgetに変更).
4.Switch文ではなく、対象を遍歴する傾向がある
次の例を見てみましょう.私たちは色に基づいて果物をプリントしたいです.
function test(color) {
  //                 
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}

// test results
test(null); // []
test('yellow'); // ['banana', 'pineapple']
上のコードは間違っていないように見えますが、邪魔なものを見つけました.オブジェクトを巡回して同じ結果を達成すると、文法はより簡潔に見える.
const fruitColor = {
  red: ['apple', 'strawberry'],
  yellow: ['banana', 'pineapple'],
  purple: ['grape', 'plum']
};

function test(color) {
  return fruitColor[color] || [];
}
あるいはあなたも使えます. Mapは同じ結果を達成する:
const fruitColor = new Map()
    .set('red', ['apple', 'strawberry'])
    .set('yellow', ['banana', 'pineapple'])
    .set('purple', ['grape', 'plum']);

function test(color) {
  return fruitColor.get(color) || [];
}
MapはES 2015仕様の後に実装されるオブジェクトタイプで、keyとvalueの値を記憶することができます.
でも、私達はswitch文の使用を禁止するべきですか?答えはあなた自身を制限しないことです.個人的には、できるだけ相手を使って遍歴しますが、それを厳格に守るのではなく、現在のシーンにもっと意味のある方法を使います.
Todd Mottoには、switch文について、対象と比べてもっと深く書かれた文章があります.ここで読むことができます.
TL;DR;再構成文法
上記の例では、getOrを使うことができます. コードを再構成して同じ効果を実現します.
const fruits = [
    { name: 'apple', color: 'red' }, 
    { name: 'strawberry', color: 'red' }, 
    { name: 'banana', color: 'yellow' }, 
    { name: 'pineapple', color: 'yellow' }, 
    { name: 'grape', color: 'purple' }, 
    { name: 'plum', color: 'purple' }
];

function test(color) {
  return fruits.filter(f => f.color == color);
}
一つ以上の方法で同じ結果を達成することができます.以上の4つの方法を示しました.
5.すべて/部分判定に対して、アラy.every&Aray.someを使う
この最後の提案は、JavaScript Arayを利用した内蔵方法についてコードの行数を減らすことが多い.下のコードを見てください.果物は全部赤いかどうか確認したいです.
const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
  ];

function test() {
  let isAllRed = true;

  //   ：        
  for (let f of fruits) {
    if (!isAllRed) break;
    isAllRed = (f.color == 'red');
  }

  console.log(isAllRed); // false
}
コードが長いですね私たちは通過できます  Array.filterコードの行数を減らす:
const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
  ];

function test() {
  const isAllRed = fruits.every(f => f.color == 'red');

  console.log(isAllRed); // false
}
今はもっと簡潔になりましたよね.同じ方法で、赤い果物があるかどうかをテストしたいなら、使ってもいいです.  Array.every ラインコードを実現します.
const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
];

function test() {
  //   ：         
  const isAnyRed = fruits.some(f => f.color == 'red');

  console.log(isAnyRed); // true
}
6.まとめ
より多くの可読性の高いコードを一緒に生産しましょう.この文章から学んでほしいです.
これがすべての内容です.楽しいコーディング!