24 の実用的な JavaScript 開発のヒント

1.配列を初期化する

指定した長さの 1 次元配列を初期化し、デフォルト値を指定する場合は、次のようにします。

const配列 = Array(6).fill(''); 
// [''、''、''、''、'']

指定した長さの 2 次元配列を初期化し、デフォルト値を指定する場合は、次のようにします。

const 行列 = Array(6).fill(0).map(() => Array(5).fill(0)); 
// [[0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0],
// [0, 0, 0, 0, 0]]

2. 配列の合計、最大値、最小値

定数配列 = [5,4,7,8,9,2];

配列を合計する:

配列を縮小します((a,b) => a+b);

配列の最大値:

配列を縮小します((a,b) => a > b ? a : b);

Math.max(...配列)

配列の最小値:

配列を縮小します((a,b) => a < b ? a : b);

Math.min(...配列)

配列のreduceメソッドを使用すると、多くの配列評価の問題を解決できます。

3. エラー値をフィルタリングする

配列内の false、0、null、undefined などの値を除外したい場合は、次のようにします。

const配列 = [1, 0, 未定義, 6, 7, '', false];

配列.フィルター(ブール値);
// [1, 6, 7]

4. 論理演算子を使用する

次のようなコードがあったとします。

もし(a > 10) {
    何かをする(a)
}

これは論理演算子を使用して書き直すことができます。

a > 10 && doSomething(a)

この書き方ははるかに簡単です。論理 AND && 演算子の前の値が false の場合、短絡演算が発生し、この文の実行はそのまま終了します。true の場合は、&& の後のコードが引き続き実行され、次のコードの戻り値が返されます。この方法を使用すると、if...else の判断を大幅に減らすことができます。

5. 判断を簡素化する

次のような判決があった場合：

if(a === 未定義 || a === 10 || a=== 15 || a === null) {
    //...
}

この判断ロジックを簡略化するために配列を使用できます。

if([未定義、10、15、null].includes(a)) {
    //...
}

この方法により、コードがはるかにシンプルになり、拡張しやすくなります。それでも a と等しいかどうかを判断する必要がある場合は、配列に追加するだけです。

6. 配列をクリアする

配列をクリアしたい場合は、配列の長さを 0 に設定します。

配列 = ["A", "B", "C", "D", "E", "F"] とします。
配列の長さ = 0 
console.log(配列) // []

7. コードのパフォーマンスを計算する

コードのパフォーマンスは、次の操作を使用して計算できます。

定数 startTime = performance.now(); 
// いくつかの手順 for(let i = 0; i < 1000; i++) {
    コンソールログ(i)
}
定数 endTime = performance.now();
const 合計時間 = 終了時間 - 開始時間;
console.log(合計時間); // 30.299999952316284

8. 配列の連結

複数の配列を連結したい場合は、スプレッド演算子を使用できます。

定数開始 = [1, 2] 
定数終了 = [5, 6, 7] 
const numbers = [9, ...開始, ...終了, 8] // [9, 1, 2, 5, 6, 7 , 8]

または、配列の concat() メソッドを使用します。

定数開始 = [1, 2, 3, 4] 
定数終了 = [5, 6, 7] 
start.concat(end); // [1, 2, 3, 4, 5, 6, 7]

ただし、concat ncat()メソッドを使用する場合、結合する配列が大きいと、 concat()関数は別の新しい配列を作成するときに大量のメモリを消費します。この時点で、配列をマージするには次の方法を使用できます。

配列.push.apply(開始、終了)

この方法では、メモリ使用量を大幅に削減できます。

9. オブジェクト検証方法

次のようなオブジェクトがあるとします。

定数親 = {
    子供： {
      子1: {
        子2: {
          キー: 10
      }
    }
  }
}

特定のレベルが存在しないことによって発生するエラーを回避するために、次のように記述することがよくあります。

親 && 親.子 && 親.子.子1 && 親.子.子1.子2

このコードは肥大化しているように見えますが、JavaScript のオプションの連鎖演算子を使用できます。

親?.子?.子1?.子2

この実装と効果は上記の長いリストと同じです。​

オプションの連鎖演算子は配列でも機能します。

定数配列 = [1, 2, 3];
配列？[5]

オプションの連鎖演算子を使用すると、チェーン内のすべての参照が有効であることを明示的に検証しなくても、接続されたオブジェクトのチェーンの奥深くにあるプロパティの値を読み取ることができます。参照が null または undefined の場合、エラーは発生せず、式の短絡戻り値はundefinedなります。関数呼び出しで使用する場合、指定された関数が存在しない場合はundefinedが返されます。

10. undefined と null を検証する

そのようなコードがある場合:

if(a === null || a === 未定義) {
    何かを行う()
}

つまり、値がnullまたはundefinedと等しいことを確認して操作を実行する必要がある場合は、null 値結合演算子を使用して上記のコードを簡略化できます。

何かを行う()

この方法では、制御合体演算子に続くコードは、a がundefinedまたは null の場合にのみ実行されます。ヌル合体演算子 (??) は、左のオペランドが null またはundefined場合は右のオペランドを返し、それ以外の場合は左のオペランドを返す論理演算子です。

11. 配列要素を数値に変換する

配列があり、配列内の要素を数値に変換したい場合は、map メソッドを使用してそれを実現します。

定数配列 = ['12', '1', '3.1415', '-10.01'];
array.map(数値); // [12, 1, 3.1415, -10.01]

このように、 map配列を走査しながら配列の各要素に対して Number コンストラクターを実行し、結果を返します。

12. クラス配列を配列に変換する

配列のような引数を配列に変換するには、次の方法を使用できます。

Array.prototype.slice.call(引数);

あるいは、スプレッド演算子を使用することもできます。

[...議論]

13. オブジェクトの動的宣言プロパティ

オブジェクトのプロパティを動的に宣言したい場合は、次のようにします。

定数ダイナミック = 'color';
var アイテム = {
    ブランド:「フォード」
    [ダイナミック]: '青'
}
console.log(アイテム); 
// { ブランド: "Ford", 色: "青" }

14. console.log() を短くする

デバッグするたびに console.log() をたくさん書くのは面倒です。次の形式を使用すると、コードを簡素化できます。

const c = console.log.bind(ドキュメント) 
（996） 
c("こんにちは世界")

この方法では、毎回メソッド c を実行するだけで済みます。

15. クエリパラメータを取得する

URL 内のパラメータを取得したい場合は、window オブジェクトのプロパティを使用できます。

ウィンドウの場所の検索

URL が www.baidu.com?project=js&type=1 の場合、上記の操作により ?project=js&type=1 が取得されます。パラメータの 1 つを取得したい場合は、次のようにします。

type = new URLSearchParams(location.search).get('type'); とします。

16. 丸め

小数点を含む数値があり、小数点を削除したい場合は、 math.floor 、 math.ceil 、またはmath.roundを使用して小数点を削除します。実際、~~ 演算子を使用して数値の小数部を削除できます。これは、数値に対するこれらの方法よりもはるかに高速です。

~~3.1415926 // 3

実際、この演算子には多くの機能があります。通常は変数を数値型に変換するために使用されます。変換結果の種類によって結果は異なります。

• 数値型の文字列の場合は純粋な数値に変換されます。
• 文字列に数字以外の値が含まれている場合は 0 に変換されます。
• ブール型の場合、true は 1 を返し、false は 0 を返します。
  

この方法に加えて、ビット単位の AND を使用して数値の丸め演算を実装することもできます。数値の後に |0 を追加するだけです。

23.9 | 0 // 23
-23.9 | 0 // -23

この操作により、数値の後の小数点も直接削除されます。この方法は上記の方法と似ており、 JavaScript API よりもパフォーマンスがはるかに優れています。

17. 配列要素の削除

配列内の要素を削除したい場合は、delete を使用して削除できますが、削除後の要素はundefinedになり、消えず、実行中に多くの時間を消費するため、ほとんどの場合、ニーズを満たすことができません。したがって、配列のsplice()メソッドを使用して配列要素を削除できます。

定数配列 = ["a", "b", "c", "d"] 
配列.splice(0, 2) // ["a", "b"]

18. オブジェクトがnullかどうかを確認する

オブジェクトが空かどうかを確認したい場合は、次のメソッドを使用できます。

Object.keys({}).length // 0
Object.keys({key: 1}).length // 1

Object.keys()メソッドはオブジェクトのキーを取得するために使用され、これらのキー値を含む配列を返します。返された配列の長さが 0 の場合、オブジェクトは間違いなく空です。

19. if/elseの代わりにswitch caseを使う

switch case if/else よりも実行パフォーマンスが高く、コードもより明確になります。

if (1 == 月) {日数 = 31;}
そうでない場合、(2 == 月) {days = IsLeapYear(year) ? 29 : 28;}
そうでない場合、(3 == 月) {日数 = 31;}
そうでない場合 (4 == 月) {日数 = 30;} 
そうでない場合、(5 == 月) {日数 = 31;} 
そうでない場合、(6 == 月) {日数 = 30;} 
そうでない場合、(7 == 月) {日数 = 31;} 
そうでない場合、(8 == 月) {日数 = 31;} 
そうでない場合、(9 == 月) {日数 = 30;} 
そうでない場合、(10 == 月) {日数 = 31;} 
そうでない場合、(11 == 月) {日数 = 30;} 
そうでない場合、(12 == 月) {日数 = 31;} 

switch...case を使用して書き直します。

スイッチ(月) {
        ケース 1: days = 31; break;
        ケース 2: days = IsLeapYear(year) ? 29 : 28; break;
        ケース 3: 日数 = 31; 休憩;
        ケース 4: 日数 = 30; 休憩;
        ケース5: 日数 = 31; 休憩;
        ケース 6: 日数 = 30; 休憩;
        ケース 7: 日数 = 31; 休憩;
        ケース 8: 日数 = 31; 休憩;
        ケース9: 日数 = 30; 休憩;
        ケース10: 日数 = 31; 休憩;
        ケース11: 日数 = 30; 休憩;
        ケース12: 日数 = 31; 休憩;
        デフォルト: break;
}

見た目は比較的シンプルです。状況に応じて、配列またはオブジェクトを使用して if...else を書き換えることができます。

20. 配列の最後の項目を取得する

配列の最後の項目を取得したい場合は、次のように記述することがよくあります。

定数arr = [1, 2, 3, 4, 5];
arr[arr.長さ - 1] // 5

実際、配列のスライス メソッドを使用して配列の最後の要素を取得することもできます。

arr.スライス(-1)

スライスメソッドのパラメータを負の値に設定すると、配列の値は配列の後ろからインターセプトされます。最後の 2 つの値をインターセプトしたい場合は、パラメータとして -2 を渡すだけです。

21. 値をブール値に変換する

JavaScriptでは、ブール値に変換すると次の値は false に変換され、その他の値はすべて true に変換されます。

• 未定義
• ヌル
• 0
• -0
• 非N
• 「」
  

通常、明示的な値をブール値に変換する場合は、 Boolean()メソッドを使用して変換します。実際に、 !! 演算子を使用して値をブール値に変換できます。わかっています、一つ！オブジェクトをブール型に変換して否定する、2つです!これは、否定されたブール値を再度否定することであり、非ブール型の値をブール型の値に直接変換することと同じです。この操作はコンピューターのネイティブ操作であるため、 Boolean()メソッドよりもはるかに高速です。

!!未定義 // 偽
!!"996" // 真
!!null // 偽
!!NaN // 偽

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

誰もが、 JavaScriptオブジェクトまたは値を JSON 文字列に変換できるJSON.stringifyメソッドを使用したことがあると思います。構文は次のとおりです。

JSON.stringify(値、置換子、スペース)

3 つのパラメータがあります。

• value : JSON 文字列にシリアル化される値。
• replacerはオプションです。このパラメータが関数の場合、シリアル化された値の各プロパティはシリアル化プロセス中に関数によって変換および処理されます。このパラメータが配列の場合、この配列に含まれるプロパティ名のみが最終的な JSON 文字列にシリアル化されます。このパラメータが null または指定されていない場合は、オブジェクトのすべてのプロパティがシリアル化されます。
• spaceはオプションです。インデント用の空白文字列を指定します。これは、きれいな印刷に使用されます。パラメータが数値の場合、スペースの数を表します。上限は 10 です。この値が 1 未満の場合、スペースがないことを意味します。パラメータが文字列の場合 (文字列の長さが 10 文字を超える場合は、最初の 10 文字が取得されます)、文字列はスペースとして扱われます。このパラメータが指定されていない場合 (または null の場合)、スペースは含まれません。
  

通常、JavaScript オブジェクトまたは値を JSON 文字列に変換するためのパラメータを記述します。 2 つのオプション パラメーターがあることがわかります。これらの 2 つのパラメーターを使用して JSON コードをフォーマットできます。

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

出力は次のようになります。

23. eval() と with() の使用を避ける

• with()変数をグローバルスコープに挿入します。したがって、別の変数に同じ名前が付いていると、混乱が生じて値が上書きされる可能性があります。
• eval()はコストのかかる操作です。呼び出されるたびに、スクリプト エンジンはソース コードを実行可能コードに変換する必要があります。
  

24. 関数のパラメータにはパラメータリストではなくオブジェクトを使用する

パラメータリストを使用して関数にパラメータを渡す場合、パラメータが少ない場合は問題ありませんが、パラメータが多い場合は、パラメータリストの順序でパラメータを渡す必要があるため面倒になります。 TypeScriptを使用して記述する場合は、記述時に必須パラメータの後にオプション パラメータを配置する必要もあります。​

関数に多くのパラメータがある場合は、それらをオブジェクトの形式で渡すことを検討できます。パラメータをオブジェクトの形式で渡す場合、オプションのパラメータを最後に渡す必要はなく、パラメータの順序は重要ではありません。オブジェクトを介して渡されるものは、パラメータ リストよりも読みやすく理解しやすいです。​

例を見てみましょう:

関数 getItem(価格、数量、名前、説明) {}

getItem(15, undefined, 'バナナ', 'フルーツ')

オブジェクトの受け渡しを使用しましょう:

関数 getItem(args) {
    const {価格、数量、名前、説明} = args
}

アイテムを取得する({
    名前: 「バナナ」
    価格: 10,
    数量: 1, 
    説明: 'フルーツ'
})

24 の実用的な JavaScript 開発スキルに関するこの記事はこれで終わりです。より関連性の高い JavaScript 開発スキルについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。