この新しい JavaScript オペレーターは絶対的なゲームチェンジャーです

JavaScript は進化し続け、言語のパフォーマンスと表現力を向上させるために新しい機能と構文を常に導入しています。最も魅力的な改良点の 1 つは、null 合体演算子 (??) です。この演算子は革新的なもので、null と undefined の値を操作する簡潔かつ直感的な方法を提供します。この記事では、null 結合演算子を詳しく調べ、その利点を分析し、TypeScript で効果的に使用する方法を説明します。

NULL 値合体演算子の概要

null 合体演算子 (??) は、左のオペランドが null または undefined の場合に右のオペランドを返す論理演算子です。これは、デフォルト値を提供し、論理 OR (||) 演算子に関連する一般的な落とし穴を回避する場合に特に役立ちます。

論理 OR (||) 演算子に関する問題

null 合体演算子が導入される前は、開発者はデフォルト値を提供するために論理 OR (||) 演算子をよく使用していました。ただし、このアプローチには重大な欠点があります。虚数値 (0、''、false など) が null または undefined と同等であるということです。

let value = 0;
let defaultValue = value || 10;
console.log(defaultValue); // 输出：10

上記の例では、value は虚数である 0 です。したがって、0 が有効な数値であっても、defaultValue には値 10 が割り当てられます。この動作により、コード内で予期しない結果やエラーが発生する可能性があります。

null 合体演算子 (??) の解決策

null 合体演算子 (??) は、左のオペランドが null または undefined の場合にのみ右のオペランドを返すことで、この問題を解決します。これにより、デフォルト値を提供するためのより信頼性の高いオプションになります。

let value: number | null | undefined = 0;
let defaultValue = value ?? 10;
console.log(defaultValue); // 输出：0

この例では、value は 0 であり、null ではありません。したがって、defaultValue には値 0 が割り当てられ、期待値が維持されます。

null 値合体演算子の利点

1. 明確な意図: null 合体演算子は、元の値が null または undefined の場合にのみデフォルト値を提供するという意図を明確に伝えます。
2. エラーの回避: 虚数値と null 値を区別することにより、null 合体演算子は、一般的なエラーや予期しない動作を回避するのに役立ちます。
3. 簡潔性: null 合体演算子は、デフォルト値を処理するための簡潔で読みやすい方法を提供し、長い条件文の必要性を減らします。

TypeScript での null 合体演算子の使用

TypeScript は null 合体演算子を完全にサポートしているため、TypeScript プロジェクトに簡単に統合できます。いくつかの例を見て、どのように効果的に使用できるかを見てみましょう。

例: デフォルト値を指定します

null 合体演算子の最も一般的な使用例の 1 つは、関数パラメーターにデフォルト値を提供することです。

function greet(name: string | null | undefined, greeting: string = 'Hello'): string {
  const defaultName = name ?? 'Guest';
  return `${greeting}, ${defaultName}!`;
}

console.log(greet(null)); // 输出：Hello, Guest!
console.log(greet(undefined)); // 输出：Hello, Guest!
console.log(greet('Alice')); // 输出：Hello, Alice!

この例では、greet 引数が name または null の場合、undefined 関数は null 合体演算子を使用してデフォルト名 'Guest' を提供します。

例: オプションの属性の処理

null 合体演算子は、オブジェクト内のオプションのプロパティを処理するために使用することもできます。

let value = 0;
let defaultValue = value || 10;
console.log(defaultValue); // 输出：10

この例では、User インターフェースにはオプションの name 属性と email 属性があります。 null 合体演算子は、これらのプロパティが null または undefined の場合にデフォルト値を提供するために使用されます。

例: 配列の使用

null 合体演算子は、配列内の null 値を処理するために使用することもできます。

let value: number | null | undefined = 0;
let defaultValue = value ?? 10;
console.log(defaultValue); // 输出：0

この例では、values 配列には数値 null と undefined が含まれています。 null 合体演算子は、null 値を 0 に置き換えます。

高度な使用例

null 合体演算子は、単純なデフォルト値だけを対象とするものではありません。複数のフォールバック値をチェーンしたり、他の演算子と組み合わせたりするなど、より高度なシナリオでも使用できます。

例: 複数のフォールバック値をチェーンする

複数の null 合体演算子をチェーンして、複数のフォールバック値を提供できます。

function greet(name: string | null | undefined, greeting: string = 'Hello'): string {
  const defaultName = name ?? 'Guest';
  return `${greeting}, ${defaultName}!`;
}

console.log(greet(null)); // 输出：Hello, Guest!
console.log(greet(undefined)); // 输出：Hello, Guest!
console.log(greet('Alice')); // 输出：Hello, Alice!

この例では、value と fallback1 は null であるため、null 合体演算子は値 42 を持つ fallback2 に戻ります。

例: 他の演算子との組み合わせ

null 合体演算子は、三項演算子などの他の演算子と組み合わせて、より複雑な条件式を作成できます。

interface User {
  id: number;
  name?: string;
  email?: string;
}

const user: User = {
  id: 1,
  name: null,
};

const displayName = user.name ?? 'Anonymous';
const displayEmail = user.email ?? 'No email provided';

console.log(`User ID: ${user.id}`);
console.log(`Display Name: ${displayName}`);
console.log(`Display Email: ${displayEmail}`);

この例では、三項演算子を使用して、value が null でないかどうかを確認します。 null ではない場合、null 合体演算子を使用してデフォルト値 10 が設定されます。 value が null の場合、結果は 20 になります。

ベストプラクティス

null 合体演算子を使用する場合は、必ずベスト プラクティスに従って、コードが明確で保守しやすく、エラーがないことを確認してください。

1. 注意して使用してください: Null 合体演算子は強力ですが、注意して使用する必要があります。これを使いすぎると、コードが読みにくくなり、理解しにくくなる可能性があります。
2. 意図を文書化: null 合体演算子を使用する場合、特に複雑な式では、コメントを追加して意図を文書化することを検討してください。
3. 論理 OR との混合を避ける : null 結合演算子と論理 OR 演算子を混合すると、混乱やエラーが発生する可能性があります。演算子を使用してデフォルト値を指定します。
4. 徹底的にテストする: 常にコードを徹底的にテストして、特に特殊なケースで null 合体演算子が期待どおりに動作することを確認します。

結論

null 合体演算子 (??) は、JavaScript および TypeScript 開発者にとって革新的な機能です。これは、null と undefined の値を処理する簡潔かつ直感的な方法を提供し、論理 OR 演算子に関連する一般的な落とし穴を回避します。 null 合体演算子を使用すると、より明確で保守しやすく、エラーが発生しにくいコードを作成できます。

デフォルト値を指定する場合でも、オプションのプロパティを処理する場合でも、配列を使用する場合でも、null 合体演算子を使用すれば対応できます。今すぐ TypeScript プロジェクトに統合して、その利点を直接体験してください。

コーディングを楽しんでください!

以上がこの新しい JavaScript オペレーターは絶対的なゲームチェンジャーですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。