JavaScript のショートカットのヒント

1. 配列を結合する

通常の書き方：

通常、2 つの配列を結合するには、Array の concat() メソッドを使用します。 concat() メソッドは、2 つ以上の配列を結合するために使用されます。既存の配列は変更されず、新しい配列が返されます。簡単な例を見てみましょう。

リンゴを['🍎', '🍏']とします。
果物を['🍉', '🍊', '🍇'].concat(リンゴ)とします。

console.log( 果物 );
//=> ["🍉", "🍊", "🍇", "🍎", "🍏"]

速記法：

次のように ES6 スプレッド演算子 (...) を使用するとコードを削減できます。

リンゴを['🍎', '🍏']とします。
let fruit = ['🍉', '🍊', '🍇', ...apples]; // <-- ここ

console.log( 果物 );
//=> ["🍉", "🍊", "🍇", "🍎", "🍏"]

得られる出力は通常の書き込み方法と同じです。

2. 配列をマージする（最初に）

通常の書き方：

前の例のように、apples 配列内のすべての項目を、fruits 配列の末尾ではなく先頭に追加したいとします。使用できる

リンゴを['🍎', '🍏']とします。
果物を['🥭', '🍌', '🍒']とします。

// 開始時にリンゴから果物まですべてのアイテムを追加します
Array.prototype.unshift.apply(果物、リンゴ)

console.log( 果物 );
//=> ["🍎", "🍏", "🥭", "🍌", "🍒"]

赤いリンゴと緑のリンゴが最後ではなく最初に結合されるようになりました。

速記法：

次のように、ES6 のスプレッド演算子 (...) を使用して、この長いコードを短縮することもできます。

リンゴを['🍎', '🍏']とします。
let fruit = [...apples, '🥭', '🍌', '🍒']; // <-- ここ

console.log( 果物 );
//=> ["🍎", "🍏", "🥭", "🍌", "🍒"]

3. 配列の複製

通常の書き方：

次のように、Array の slice() メソッドを使用して配列を簡単に複製できます。

果物を['🍉', '🍊', '🍇', '🍎']とします。
cloneFruits = fruit.slice() とします。

console.log(クローンフルーツ);
//=> ["🍉", "🍊", "🍇", "🍎"]

速記法：

ES6 のスプレッド演算子 (...) を使用して、次のように配列を複製できます。

果物を['🍉', '🍊', '🍇', '🍎']とします。
let cloneFruits = [...fruits]; // <-- ここ

console.log(クローンフルーツ);
//=> ["🍉", "🍊", "🍇", "🍎"]

4. 構造化分解割り当て

通常の書き方：

配列を操作する場合、次のように配列を一連の変数に「展開」する必要がある場合があります。

リンゴを['🍎', '🍏']とします。
redApple = apples[0]とします。
greenApple = apples[1]とします。

console.log( redApple ); //=> 🍎
console.log( greenApple ); //=> 🍏

速記法：

分割代入を使用すると、1 行のコードで同じ結果を得ることができます。

リンゴを['🍎', '🍏']とします。
let [redApple, greenApple] = apples; // <-- ここ

console.log( redApple ); //=> 🍎
console.log( greenApple ); //=> 🍏

5. テンプレートリテラル

通常の書き方：

通常、文字列に式を追加する必要がある場合は、次のようにします。

// 2つの文字列の間に名前を表示します
名前を 'Palash' とします。
console.log('こんにちは、' + name + '!');
//=> こんにちは、パラッシュ！

// 2つの数値を加算および減算する
num1 = 20 とします。
num2 = 10 とします。
console.log('合計 = ' + (num1 + num2) + '、減算 = ' + (num1 - num2));
//=> 合計 = 30、減算 = 10

速記法：

テンプレートリテラルを使用すると、バックティック () を使用して式を ${...}` で囲み、次のように文字列に埋め込むことができます。

// 2つの文字列の間に名前を表示します
名前を 'Palash' とします。
console.log(`Hello, ${name}!`); // <-- もう + var + を使う必要はありません
//=> こんにちは、パラッシュ！

// 2つの数値を加算する
num1 = 20 とします。
num2 = 10 とします。
console.log(`合計 = ${num1 + num2}、減算 = ${num1 - num2}`);
//=> 合計 = 30、減算 = 10

6. Forループ

通常の書き方：

次のように for ループを使用して配列をループすることができます。

果物を['🍉', '🍊', '🍇', '🍎']とします。

// 各果物をループする
for (let index = 0; index < fruit.length; index++) { 
  console.log( fruit[index] ); // <-- 現在のインデックスの果物を取得します
}

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

速記法：

次のように for...of ステートメントを使用すると、はるかに少ないコードで同じ結果を達成できます。

果物を['🍉', '🍊', '🍇', '🍎']とします。

// for...of ステートメントの使用 
（果物の果実を）{
  console.log( フルーツ );
}

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

7. 矢印関数

通常の書き方：

配列を反復処理するには、Array の forEach() メソッドを使用することもできます。しかし、これには多くのコードを書く必要があります。最も一般的な for ループよりは少ないですが、for...of ステートメントよりは少し長くなります。

果物を['🍉', '🍊', '🍇', '🍎']とします。

// forEach メソッドを使用する
果物.forEach(関数(果物){
  console.log( フルーツ );
});

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

速記法：

しかし、矢印関数式を使用すると、次のようにループコード全体を 1 行で記述できます。

果物を['🍉', '🍊', '🍇', '🍎']とします。
fruit.forEach(fruit => console.log( fruit )); // <-- 魔法✨

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

ほとんどの場合、矢印関数を使用した forEach ループを使用します。ここでは、好みに応じてコードを使用できるように、for...of ステートメントと forEach ループの両方を示します。

8. 配列内のオブジェクトの検索

通常の書き方：

オブジェクトの配列からプロパティの 1 つを指定してオブジェクトを検索するには、通常、 for ループを使用します。

在庫を = [
  {名前: 'バナナ'、数量: 5}、
  {名前: 'リンゴ'、数量: 10}、
  {名前: 'ブドウ'、数量: 2}
];

// 配列内の `Apples` という名前のオブジェクトを取得します
関数 getApples(arr, 値) {
  for (let index = 0; index < arr.length; index++) {

    // このオブジェクト プロパティ `name` の値が 'Apples' と同じであることを確認します
    if (arr[index].name === 'Apples') { //=> 🍎

      // 一致が見つかったので、このオブジェクトを返します
      arr[インデックス]を返します。
    }
  }
}

結果 = getApples(在庫);
console.log( 結果 )
//=> { 名前: "リンゴ", 数量: 10 }

速記法：

おお！このロジックを実装するために、上記で非常に多くのコードを記述しました。しかし、Array の find() メソッドと矢印関数 => を使用すると、次のように 1 行で実行できます。

// 配列内の `Apples` という名前のオブジェクトを取得します
関数 getApples(arr, 値) {
  return arr.find(obj => obj.name === 'Apples'); // <-- ここ
}

結果 = getApples(在庫);
console.log( 結果 )
//=> { 名前: "リンゴ", 数量: 10 }

9. 文字列を整数に変換する

通常の書き方：

num = parseInt("10") とします。

console.log( 数値 ) //=> 10
console.log( typeof num ) //=> "数値"

速記法：

次のように文字列の前に + を付けることで同じ結果を得ることができます。

num = +"10"とします。

console.log( 数値 ) //=> 10
console.log( typeof num ) //=> "数値"
console.log( +"10" === 10 ) //=> true

10. 短絡評価

通常の書き方：

別の値に応じて値が偽にならないように設定する必要がある場合は、通常、次のように if-else ステートメントを使用します。

関数 getUserRole(ロール) {
  ユーザーロールを作成します。

  // ロールが偽値でない場合
  // 渡された `role` 値として `userRole` を設定します
  if (役割) {
    ユーザーロール = ロール;
  } それ以外 {

    // それ以外の場合は `userRole` を USER に設定します
    ユーザーロール = 'ユーザー';
  }

  userRole を返します。
}

console.log( getUserRole() ) //=> "USER"
console.log( getUserRole('ADMIN') ) //=> "ADMIN"

速記法：

しかし、短絡評価 (||) を使用すると、次のように 1 行のコードでこれを実行できます。

関数 getUserRole(ロール) {
  return role || 'USER'; // <-- ここ
}

console.log( getUserRole() ) //=> "USER"
console.log( getUserRole('ADMIN') ) //=> "ADMIN"

基本的に、expression1 || expression2 は真の式として評価されます。つまり、最初の部分が真であれば、式の残りの部分を評価する必要はないということです。

追加事項

矢印関数

this コンテキストが必要ない場合は、矢印関数を使用するとコードをさらに短くすることができます。

果物を['🍉', '🍊', '🍇', '🍎']とします。
コンソールに出力されたフルーツをログに記録します。

配列内のオブジェクトの検索

オブジェクトの分割と矢印関数を使用すると、コードをより簡潔にすることができます。

// 配列内の `Apples` という名前のオブジェクトを取得します
const getApples = array => array.find(({ name }) => name === "Apples");

結果 = getApples(在庫);
console.log(結果);
//=> { 名前: "リンゴ", 数量: 10 }

短絡評価の代替案

const getUserRole1 = (role = "USER") => ロール;
const getUserRole2 = role => role ?? "USER";
const getUserRole3 = role => role ? role : "USER";

最後に、次の言葉を引用して終わりたいと思います。

コードが私たちの敵である理由は、私たちプログラマーの多くが質の悪いコードを大量に書くからです。それができない場合は、コードをシンプルに保つよう最善を尽くすのが最善です。
コーディングが好きなら、つまりコーディングが本当に好きなら、コーディングを少なくすればするほど、コーディングが好きになります。

JavaScript 省略スキルに関するこの記事はこれで終わりです。JavaScript 省略スキルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: