ほとんどのチュートリアルが見逃している JavaScript の 12 のトリック

JavaScript を学び始めたとき、私が最初にしたことは、時間を節約するのに役立つトリックのリストを作成することでした。 私は他のプログラマのさまざまなサイトやマニュアルでそれらを見つけました。

この記事では、JavaScript コードを改善して高速化する 12 の優れた方法を紹介します。 ほとんどの場合、それらは普遍的です。

リマインダー： 「Habr」のすべての読者が対象 - 「Habr」プロモーション コードを使用してスキルボックス コースに登録すると 10 ルーブルの割引。

スキルボックスは次のことを推奨します。 実践コース 「モバイルデベロッパーPRO」.

一意の値のフィルタリング

配列

Set オブジェクト タイプは、... スプレッド演算子とともに ES6 で導入されました。これを使用して、一意の値のみを含む新しい配列を作成できます。

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Result: [1, 2, 3, 5]

通常の状況では、同じ操作を実行するにはさらに多くのコードが必要になります。

この手法は、未定義、null、ブール、文字列、数値などのプリミティブ型を含む配列に対して機能します。 オブジェクト、関数、または追加の配列を含む配列を操作している場合は、別のアプローチが必要になります。

サイクル単位のキャッシュ配列の長さ

サイクル

for ループを学習するときは、次の標準的な手順に従います。

for (let i = 0; i < array.length; i++){
  console.log(i);
}

ただし、この構文では、for ループは反復ごとに配列の長さを繰り返しチェックします。

これが役立つ場合もありますが、ほとんどの場合、配列の長さをキャッシュする方が効率的であり、配列へのアクセスが XNUMX 回必要になります。 これを行うには、次のように変数 i を定義する長さ変数を定義します。

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

原理的には上記とほぼ同じですが、ループ サイズを増やすことで大幅な時間を節約できます。

短絡定格（マッカーシー定格）

条件演算子

三項演算子は、単純な (場合によってはそれほど単純でない) 条件文を記述するための高速かつ効率的な方法です。

x > 100? 「100 を超える」:「100 未満」。
x > 100? (x>200? "200 を超える": "100 ～ 200"): "100 未満";

しかし、場合によっては、三項演算子でさえ必要以上に複雑になることがあります。 || 代わりに 'and' && および 'or' を使用できます。 特定の式をさらに簡潔な方法で評価するためのブール演算子。 これは、「短絡」または「短絡定格」と呼ばれることがよくあります。

これはどう動かすのですか

XNUMX つ以上の条件のうち XNUMX つだけを返したいとします。

&& を使用すると、最初の false 値が返されます。 各オペランドが true と評価されると、最後に評価された式が返されます。

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
 
console.log(0 && null); // Result: 0

|| を使用する最初の true 値を返します。 各オペランドが false と評価された場合、最後に評価された値が返されます。

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
 
console.log(0 || null); // Result: null

例1

変数の長さを返したいが、その型がわからないとします。

この場合、if/else を使用して foo が正しい型であることを確認できますが、このメソッドは長すぎる可能性があります。 したがって、「短絡」をする方が良いでしょう。

return (foo || []).length;

変数 foo が適切な長さであれば、それが返されます。 それ以外の場合は 0 が返されます。

例2

ネストされたオブジェクトにアクセスするときに問題が発生しましたか? オブジェクトまたはそのサブプロパティのいずれかが存在するかどうかがわからない場合があり、これが問題を引き起こす可能性があります。

たとえば、this.state の data プロパティにアクセスしたいと考えましたが、プログラムがフェッチ要求を返すまでデータは定義されません。

使用する場所によっては、this.state.data を呼び出すとアプリケーションが起動できなくなる可能性があります。 この問題を解決するには、これを条件式でラップします。

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

より良いオプションは、「or」演算子を使用することです。

return (this.state.data || 'Fetching Data');

&& を使用するように上記のコードを変更することはできません。 「データの取得」&& this.state.data 演算子は、未定義であるかどうかに関係なく、this.state.data を返します。

オプションのチェーン

ツリー構造の奥深くにあるプロパティを返そうとする場合は、オプションのチェーンを使用することを提案する場合があります。 では、疑問符記号はどうでしょうか？ null でない場合にのみ、プロパティを取得するために使用できます。

たとえば、上記の例をリファクタリングして this.state.data?..() を取得できます。 つまり、値が null でない場合にのみデータが返されます。

または、状態が定義されているかどうかが重要な場合は、this.state?.data を返すこともできます。

ブール値に変換

型変換

通常のブール関数 true と false に加えて、JavaScript は他のすべての値も true または false として扱います。

特に明記しない限り、JavaScript のすべての値は、0、""、null、未定義、NaN、そしてもちろん false を除き、真実です。 後者は誤りです。

! 演算子を使用すると、この XNUMX つを簡単に切り替えることができ、型もブール値に変換されます。

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

文字列に変換する

型変換

整数から文字列への素早い変換は次のように行うことができます。

const val = 1 + "";
 
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

整数に変換する

型変換

このように逆変換を行っていきます。

let int = "15";
int = +int;
 
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

このメソッドは、次に示すように、ブール データ型を通常の数値に変換するために使用することもできます。

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

+ が加算演算子ではなく連結演算子として解釈される場合があります。 これを避けるには、チルダ: ~~ を使用する必要があります。 この演算子は -n-1 と同等です。 たとえば、~15 は -16 と同じです。

- (- - n - 1) - 1 = n + 1 - 1 = n であるため、16 つのチルダを続けて使用すると、演算が無効になります。 つまり、~-15 は XNUMX に等しいということです。

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

<Quick Powers

オペレーション

ES7 以降では、累乗演算子 ** を累乗の短縮形として使用できるようになりました。 これは Math.pow(2, 3) を使用するよりもはるかに高速です。 簡単なようですが、この点はどこでも言及されていないため、テクニックのリストに含まれています。

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

一般にべき乗に使用される ^ 記号と混同しないでください。 しかし、JavaScript では、これは XOR 演算子です。

ES7 より前では、** ショートカットはビット単位の左シフト演算子 <<: を使用した基数 2 のべき乗にのみ使用できました。

Math.pow(2, n);
2 << (n - 1);
2**n;

たとえば、2 << 3 = 16 は 2 ** 4 = 16 と同等です。

浮動小数点から整数へ

操作 / 型変換

浮動小数点を整数に変換する必要がある場合は、Math.floor()、Math.ceil()、または Math.round() を使用できます。 しかし、もっと速い方法があります。これには | 、つまり OR 演算子を使用します。

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

行動 | は正の数を扱うか負の数を扱うかによって大きく異なるため、この方法は自分のやっていることに自信がある場合にのみ適しています。

n | 0 は小数点以下をすべて削除し、浮動小数点数を整数に切り捨てます。

~~ を使用すると、同じ丸め効果を得ることができます。 整数への強制変換後、値は変更されません。

末尾の数字を削除する

OR 演算子を使用すると、数値から任意の桁数を削除できます。 これは、次のように型を変換する必要がないことを意味します。

let str = "1553";
Number(str.substring(0, str.length - 1));

代わりに、単に次のように書きます。

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

自動リンク

クラス

ES6 の矢印表記はクラス メソッドで使用でき、バインディングが暗黙的に指定されます。 つまり、 this.myMethod = this.myMethod.bind(this) のような繰り返しの式に別れを告げることができます。

import React, { Component } from React;
 
export default class App extends Compononent {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () => {
    // This method is bound implicitly!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

配列のトリミング

配列

配列から値を削除する必要がある場合は、splice() よりも高速なメソッドがあります。

たとえば、元の配列のサイズがわかっている場合は、次のようにその length プロパティをオーバーライドできます。

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Result: [0, 1, 2, 3]

しかし、別の、より速い方法があります。 速度が重要である場合は、次の選択肢を選択してください。

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Result: [0, 1, 2, 3]

配列の最後の値を出力する

配列
この手法では、slice() メソッドを使用する必要があります。

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

JSONコードのフォーマット

JSONの

すでに JSON.stringify を使用している可能性があります。 JSON のフォーマットに役立つことをご存知ですか?

stringify() メソッドは、表示される JSON をフィルタリングするために使用できる replacer 関数とスペース値という XNUMX つのオプションのパラメータを取ります。

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

以上、これらすべてのテクニックがお役に立てば幸いです。 あなたはどんなトリックを知っていますか？ コメントに書いてください。

スキルボックスは次のことを推奨します。

• XNUMX年間の実践コース 「私はプロのウェブ開発者です」.
• オンラインコース 「0からのC#開発者」.
• 実践一年コース 「0からPROまでのPHP開発者」.

出所： habr.com