コーディングスキルを向上させるためのJavaScriptのヒント

1. 一意の値をフィルタリングする

Set 型は ES6 で新しく追加されました。配列に似ていますが、メンバーの値は一意であり、重複する値はありません。スプレッド演算子 (...) と組み合わせると、元の配列内の重複した値を除外する新しい配列を作成できます。

定数配列 = [1, 2, 3, 3, 5, 5, 1];
const uniqueArray = [...新しいSet(配列)];

console.log(uniqueArray); // [1, 2, 3, 5]

ES6 より前では、この機能を実装するには、さらに多くの処理コードが必要でした。この手法は、undefined、null、boolean、string、number の型の配列値に適用できます。これは、オブジェクト、関数、または配列が含まれている場合には適用されません。

2. 短絡評価

三項演算子は、いくつかの単純な論理ステートメントを記述するための非常に便利で簡単な方法です。

x > 100 ? '100 を超える' : '100 未満';
x > 100 ? (x > 200 ? 「200 以上」:「100～200 の間」):「100 未満」;

しかし、ロジックが複雑な場合、三項演算子が読みにくくなることがあります。この時点で、論理 AND (&&) 演算子と論理 OR (||) 演算子を使用して式を書き換えることができます。

論理 AND 演算子と論理 OR 演算子は常に最初に左オペランドを評価し、論理式の結果が左オペランドの値だけでは決定できない場合にのみ右オペランドを評価します。

これは「短絡評価」と呼ばれ、その仕組みは、&& 演算子が最初の false/'falsy' 値を返すというものです。すべてのオペランドが true の場合、最後の式の結果が返されます。

1 = 1、2 = 2、3 = 3 とします。
console.log(one && two && three); // 結果: 3


console.log(0 && null); // 結果: 0

or (||) 演算子は最初の true/'truthy' 値を返します。すべてのオペランドが false の場合、最後の式の結果が返されます。

1 = 1、2 = 2、3 = 3 とします。
console.log(one || two || three); // 結果: 1

console.log(0 || null); // 結果: null

2.1 シナリオ例

サーバーからデータを要求すると、別の場所でこのデータを使用しますが、this.state のデータプロパティにアクセスする場合など、データの状態はわかりません。

通常のやり方では、まず this.state.data の有効性を判断し、有効性に応じて区別して処理します。

if (this.state.data) {
  this.state.data を返します。
} それ以外 {
  'データを取得中' を返します。
}

しかし、上記の方法でこの論理処理を簡素化することができます。

return (this.state.data || 'データを取得しています');

比較してみると、この方法の方がシンプルで便利であることがわかりました。

3. ブール変換

従来のブール値は true と false だけですが、JavaScript では他の値を「真」または「偽」と見なすことができます。

0、""、null、undefined、NaN、false を除き、その他はすべて「真実」であるとみなすことができます。マイナス演算子を使用できます。一連の変数を「ブール」型に変換します。

定数isTrue = !0;
定数isFalse = !1;
定数もFalse = !!0;
console.log(isTrue); // 結果: true
console.log(typeof true); // 結果: "boolean"

4. 文字列を変換する

+ 連結演算子を使用して、数値型変数を文字列型に変換できます。

定数val = 1 + "";

console.log(val); // 結果: "1"
console.log(typeof val); // 結果: "string"

5. 数値型を変換する

上記に対応して、加算演算子 + を使用して、文字列型変数を数値型に戻すことができます。

int = "15"とします。
整数 = +整数;

console.log(int); // 結果: 15
console.log(typeof int); 結果: "number"

コンテキストによっては、+ は加算演算子ではなく連結演算子として解釈されます。このような場合 (浮動小数点数ではなく整数を返したい場合)、2 つのチルダ (~~) を使用できます。

(英語形式であることに注意してください) チルダ記号 ~ は「ビット NOT 演算子」と呼ばれ、- n - 1 と同等です。したがって、~15 = -16 です。2 つの ~~ を使用すると、実質的に演算が否定されます。これは、- (- n - 1) - 1 = n + 1 - 1 = n であるためです。つまり、約-16 = 15

定数 int = ~~"15"

console.log(int); // 結果: 15
console.log(typeof int); 結果: "number"

6. 高速累乗

ES7 からは、累乗演算子 ** を指数計算のショートカットとして使用できます。これは、以前の Math.pow(2, 3) よりも高速です。これは非常に単純かつ実用的なポイントですが、ほとんどのチュートリアルでは具体的に紹介されていません。

console.log(2 ** 3); // 結果: 8

これは、指数を表すためによく使用されますが、JavaScript ではビット単位の XOR 演算子である ^ 記号と混同しないでください。 ES7 より前では、power の省略形は主にビット単位の左シフト演算子 << に依存しており、記述方法は異なっていました。

// 次の式は同等です: Math.pow(2, n);
2 << (n-1);
2**n;

2 << 3 = 16は2 ** 4 = 16と等しいことに注意する必要がある。

7. 浮動小数点数を高速に整数に変換する

通常、floor 型を整数型に変換するには、Math.floor()、Math.ceil()、Math.round() を使用します。しかし、| (ビット OR 演算子) を使用して浮動小数点数を整数に切り捨てるより速い方法があります。

console.log(23.9 | 0); // 結果: 23
console.log(-23.9 | 0); // 結果: -23

| の動作は、正の数を扱っているか負の数を扱っているかによって異なります。そのため、確実な場合にのみこのショートカットを使用することをお勧めします。 n が正の場合、n | 0 は実質的に切り捨てになります。 n が負の場合、実質的に切り上げられます。

より正確には、この操作の結果は、小数点以下の内容を直接削除し、浮動小数点数を整数に切り捨てることであり、これは上記の他の方法とは異なります。

また、上で述べたように、~~ を使用して同じ丸め効果を得ることもできます。また、実際には任意のビット演算子を使用して、浮動小数点数を整数に強制変換できます。これらの特別な操作は、一度整数に強制変換されると、値は変更されないため機能します。

7.1 使用シナリオ

ビット OR 演算子を使用すると、整数の末尾から任意の数の桁を削除できます。つまり、型間の変換にこのようなコードを使用する必要はありません。

str = "1553"とします。 
数値(str.substring(0, str.length - 1));

代わりに、次の方法を使用して関数を実装することができます。

console.log(1553 / 10 | 0) // 結果: 155
console.log(1553 / 100 | 0) // 結果: 15
console.log(1553 / 1000 | 0) // 結果: 1

8. クラス内の自動バインディング

ES6 で追加された矢印関数を使用して、クラス内に暗黙的なバインディングスコープを実装できます。前の処理に従って、this.myMethod = this.myMethod.bind(this) のように、記述したメソッドを明示的にバインドする必要があります。クラスにメソッドが多数ある場合、多くのバインディングコードが記述されます。ここで、矢印関数を使用してこのプロセスを簡略化できます。

React から React, { コンポーネント } をインポートします。
デフォルトクラスAppをエクスポートし、Componentを拡張します。
  コンストラクタ(props) {
    スーパー(小道具);
    this.state = {};
  }
  マイメソッド = () => {
    // 暗黙的なバインディング }
  与える（） {
    戻る （
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    ）
  }
};

9. 配列のインターセプト

配列の末尾から値を削除する場合は、splice() を使用するよりも高速な代替手段があります。たとえば、元の配列の長さがわかっている場合は、長さプロパティを再定義して配列を切り捨てることができます。

配列を[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]とします。
配列の長さ = 4;
console.log(配列); // 結果: [0, 1, 2, 3]

これは特にすばらしい解決策です。ただし、slice() メソッドの実行時間はより高速です。速度が主な目標である場合は、次のアプローチの使用を検討してください。

配列を[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]とします。
配列 = 配列.スライス(0, 4);

console.log(配列); // 結果: [0, 1, 2, 3]

10. 配列の最後の要素を取得する

配列メソッド slice() は負の整数を受け入れることができ、指定した場合は配列の先頭ではなく末尾から値の切り取りを開始します。

配列を[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]とします。

console.log(array.slice(-1)); // 結果: [9]
console.log(array.slice(-2)); // 結果: [8, 9]
console.log(array.slice(-3)); // 結果: [7, 8, 9]

11. JSONコードのフォーマット

JSON 関連の処理を行うときに JSON.stringify を頻繁に使用しますが、これが JSON のインデントにも役立つことをご存知でしたか? stringify() メソッドは、置換関数とスペース値という 2 つのオプションパラメータを受け入れます。置換関数を使用すると、表示される JSON をフィルター処理できます。スペース値は、必要なスペースの数を表す整数または文字列 (タブ文字を挿入する 't' など) を受け入れます。これにより、取得した JSON データの読み取りがはるかに簡単になります。

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));

// 結果：
// '{
// "アルファ": A,
// "ベータ": B
// }'

これで、コーディングスキルの向上に役立つ JavaScript のヒントに関するこの記事は終了です。さらに関連性の高い JavaScript のヒントについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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