優れた JS コードを書くための 8 つのヒントとコツ (共有)

次の js チュートリアル コラムでは、JavaScript コードを記述するための 8 つのヒントとテクニックを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#推奨チュートリアル: 「

JavaScript ビデオ チュートリアル #」

1. 指定された間隔内の数値を生成します

特定の数値範囲内で配列を作成する必要がある場合があります。たとえば、誕生日を選ぶとき。最も簡単な方法は次のとおりです。

let start = 1900,
    end = 2000;
[...new Array(end + 1).keys()].slice(start);
// [ 1900, 1901, ..., 2000]

// 也可以这样，但是大范围结果不稳定
Array.from({ length: end - start + 1 }, (_, i) => start + i);

2. 値配列の値を関数のパラメーターとして使用する

最初に値を配列に入力する必要がある場合があります。次に、それらを関数のパラメータとして使用します。 ES6 構文を使用すると、スプレッド演算子 (

...): [arg1, arg2] => (arg1, arg2) のみを使用して配列から値を抽出できます。

const parts = {
  first: [0, 2],
  second: [1, 3],
};

["Hello", "World", "JS", "Tricks"].slice(...parts.second);
// ["World", "JS", "Tricks"]

このテクニックはどの関数にも適用できます。記事 3 に進んでください。

3. 値配列の値を Math メソッドのパラメーターとして使用します

配列内の数値の最大値または最小値を見つける必要がある場合

// 查到元素中的 y 位置最大的那一个值
const elementsHeight =  [...document.body.children].map(
  el => el.getBoundingClientRect().y
);
Math.max(...elementsHeight);
// 输出最大的那个值

const numbers = [100, 100, -1000, 2000, -3000, 40000];
Math.min(...numbers);
// -3000

4. ネストされた配列を平坦化する

Array には

Array. flat というメソッドがあり、これには深さが必要です。ネストされた配列を平坦化するためのパラメータ (デフォルトは 1)。しかし、深さがわからない場合はどうすればよいでしょうか? 現時点では、パラメーターとして Infinity を使用するだけで済みます。便利な flatMap メソッドもあります。

const arrays = [[10], 50, [100, [2000, 3000, [40000]]]];
arrays.flat(Infinity);
// [ 10, 50, 100, 2000, 3000, 40000 ]

5. コード クラッシュの防止

コード内に予測できない動作がある場合、その結果は予測できないため、対処する必要があります。

たとえば、取得したいプロパティが

unknown または null の場合、TypeError エラーが発生します。

プロジェクト コードがオプションのチェーンをサポートしていない場合は、次のようにすることができます:

const found = [{ name: "Alex" }].find(i => i.name === 'Jim');
console.log(found.name);
// TypeError: Cannot read property 'name' of undefined

この方法で回避できます

const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {};
console.log(found.name);
// undefined

ただし、状況によって異なります。小規模なコードの処理にはまったく問題ありません。これを処理するのに多くのコードは必要ありません。

6. パラメーターを渡す良い方法

ES6 では、

テンプレート リテラル を括弧なしの関数パラメーターとして扱うことができます。これは、テキストの書式設定や変換を行うときに便利です。

const makeList = (raw) =>
  raw
    .join()
    .trim()
    .split("\n")
    .map((s, i) => `${i + 1}. ${s}`)
    .join("\n");

makeList`
Hello, World
Hello, World
`;

// 1. Hello
// 2. World

7. 魔法のように変数の値を入れ替える

代入構文を構造化することで変数を簡単に入れ替えることができます。

let a = "hello";
let b = "world";

// 错误 ❌
a = b
b = a
// { a: 'world', b: 'world' }

// 正确 ✅
[a, b] = [b, a];
// { a: 'world', b: 'hello' }

8. 文字列のマスキング

もちろんパスワードだけではなく、文字列の一部をマスクする必要がある場合があります。次のコードでは、

substr(-3) を使用して文字列の一部、つまり文字列の末尾から 3 文字前方を取得し、残りの位置を任意の文字で埋めます (たとえば、*)

const password = "hackme";
password.substr(-3).padStart(password.length, "*");
// ***kme

結論

を使用します。コーディングするときは、コードをクリーンに保ち、コーディングで使用されるスキルの蓄積に注意を払い、支払いを行う必要もあります。 JavaScript の新機能に注目してください。

元のアドレス: https://dev.to/gigantz/9-javascript-tips-tricks-to-code-like-a-wizard-559i

著者: Orkhan Jafarov

翻訳アドレス: https://segmentfault.com/a/1190000030697379

プログラミング関連の知識の詳細については、

プログラミング コースをご覧ください。 ！

以上が優れた JS コードを書くための 8 つのヒントとコツ (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。