JavaScriptコードを書くための8つのヒント

フロントエンドパイオニア

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構文を使用すると、値は、spread演算子（...）によってのみ配列から抽出できます：[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というメソッドがあり、ネストされた配列をフラット化するためにdepthパラメーターが必要です（デフォルト値は1）。ただし、深度をどうするかわからない場合は、現時点ではパラメータとしてInfinityを使用するだけで済みます。非常に便利なflatMapメソッドもあります。


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

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

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

たとえば、取得するプロパティが未定義または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の新機能に注意を払います。