1.変数の交換には構造化を使用する

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

理由: 一時変数を使用せずに変数値を交換するためのクリーンな 1 行の方法を提供します。

2.文字列補間にテンプレート リテラルを使用する

const name = "Alice";
console.log(`Hello, ${name}!`); // Hello, Alice!

理由: 従来の方法よりも文字列の連結が読みやすくなり、エラーが発生しにくくなります。

3.デフォルト値にはヌル合体演算子 (??) を使用します

const value = null;
const defaultValue = value ?? "Default";
console.log(defaultValue); // "Default"

理由: 0 や空の文字列などの偽の値と区別して、null または未定義の値を処理する簡潔な方法を提供します。

4.安全なプロパティ アクセスにはオプションのチェーン (?.) を使用します

const obj = { nested: { property: "value" } };
console.log(obj?.nested?.property); // "value"
console.log(obj?.nonexistent?.property); // undefined

理由: 存在しない可能性のあるネストされたプロパティにアクセスするときのエラーを防ぎ、詳細なチェックの必要性を減らします。

5.配列操作にはスプレッド演算子 (...) を使用します

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

理由: 要素の結合、コピー、追加などの配列操作が簡略化され、コードがより簡潔で読みやすくなります。

6. Array.from() を使用して、配列のようなオブジェクトから配列を作成します

const arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };
const newArray = Array.from(arrayLike);
console.log(newArray); // ["a", "b", "c"]

理由: 配列のようなオブジェクトまたは反復可能オブジェクトを真の配列に簡単に変換し、配列メソッドの使用を可能にします。

7.オブジェクトの反復を簡単にするには Object.entries() を使用します

const obj = { a: 1, b: 2, c: 3 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}

理由: オブジェクトのキーと値の両方を同時に反復処理するクリーンな方法を提供します。

8. Array.prototype. flat() を使用してネストされた配列を平坦化します

const nestedArray = [1, [2, 3, [4, 5]]];
console.log(nestedArray.flat(2)); // [1, 2, 3, 4, 5]

理由: ネストされた配列を指定した深さまで平坦化することで、その操作を簡素化します。

9.よりクリーンな非同期コードのために async/await を使用する

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

理由: 非同期コードの外観と動作が同期コードのようになり、読みやすさとエラー処理が向上します。

10.配列内の固有の値には Set を使用します

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

理由: 手動でループせずに配列から重複を削除する効率的な方法を提供します。

11． Object.freeze() を使用して不変オブジェクトを作成する

const frozenObj = Object.freeze({ prop: 42 });
frozenObj.prop = 100; // Fails silently in non-strict mode
console.log(frozenObj.prop); // 42

理由: オブジェクトの変更を防止します。定数の作成やデータの整合性の確保に役立ちます。

12．強力な配列変換には Array.prototype.reduce() を使用します

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // 15

理由: 複雑な配列操作を 1 回のパスで実行できるため、多くの場合ループよりも効率的です。

13．条件付き実行には論理 AND 演算子 (&&) を使用します

const isTrue = true;
isTrue && console.log("This will be logged");

理由: 明示的な if ステートメントを使用せずに、条件が true の場合にのみコードを実行する簡単な方法を提供します。

14． Object.assign() を使用してオブジェクトをマージします

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = Object.assign({}, obj1, obj2);
console.log(merged); // { a: 1, b: 3, c: 4 }

理由: オブジェクトのマージが簡略化され、構成オブジェクトを結合したり、オーバーライドを含むオブジェクトのコピーを作成したりする場合に便利です。

15． array
には Array.prototype.some() と Array.prototype.every() を使用します

checking
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.some(n => n > 3)); // true
console.log(numbers.every(n => n > 0)); // true

理由: 明示的なループを避け、配列内の一部またはすべての要素が条件を満たすかどうかを確認する簡潔な方法を提供します。

16． console.table() を使用して表形式データのロギングを改善します

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 28 },
];
console.table(users);

理由: 表形式のログ データの読みやすさが向上します。特にオブジェクトの配列に役立ちます。

17． Array.prototype.find() を使用して、最初に一致する要素を取得します

const numbers = [1, 2, 3, 4, 5];
const found = numbers.find(n => n > 3);
console.log(found); // 4

理由: 条件を満たす配列内の最初の要素を効率的に検索し、見つかったら反復を停止します。

18． object
には Object.keys()、Object.values()、および Object.entries() を使用します。

manipulation
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // ["a", "b", "c"]
console.log(Object.values(obj)); // [1, 2, 3]
console.log(Object.entries(obj)); // [["a", 1], ["b", 2], ["c", 3]]

理由: オブジェクトのプロパティと値を抽出して操作する簡単な方法を提供し、多くのオブジェクト操作に役立ちます。

19．国際化のために Intl API を使用する

const number = 123456.789;
console.log(new Intl.NumberFormat('de-DE').format(number)); // 123.456,789

理由: 手動で実装することなく、ロケール固有のルールに従って数値、日付、文字列の書式設定を簡素化します。

20. Array.prototype. flatMap() を使用して 1 ステップでマッピングとフラット化を行う

const sentences = ["Hello world", "How are you"];
const words = sentences.flatMap(sentence => sentence.split(" "));
console.log(words); // ["Hello", "world", "How", "are", "you"]

理由: マッピング操作とフラット化操作を効率的に組み合わせ、ネストされた結果を生成する変換に役立ちます。