JavaScriptでデフォルト値を取得する方法

JavaScript でデフォルト値を取得する方法

JavaScript コードを記述するときは、通常、関数の呼び出し時に関数に渡せるように関数のパラメーター値を設定します。ただし、場合によっては、特定のパラメーターに明示的に設定されていない場合にデフォルト値を持たせたい場合があります。これにより、コードがより簡潔になり、読みやすくなります。この記事では、JavaScript でデフォルト値を設定および使用する方法について説明します。

デフォルト値の設定

従来、関数パラメータのデフォルト値を設定するには、通常、関数本体でnullか未定義かを判断し、手動でデフォルト値を設定する必要がありました。価値。以下に示すように:

function sayHello(name) {
    if(name === undefined) {
        name = "world";
    }
    console.log("Hello, " + name + "!");
}

sayHello(); // "Hello, world!"
sayHello("Tom"); // "Hello, Tom!"

デフォルト値に設定する必要があるパラメータが複数ある場合、このアプローチは冗長になりやすく、保守が困難になる可能性があります。 ES6 では、より便利な方法を使用してデフォルト値を設定できます。

デフォルト値を使用する

ES6 では、関数パラメーターのデフォルト値を指定できます。これにより、コード量を減らして読みやすさを向上させながら、関数のデフォルト値をより簡単に設定できるようになります。以下に示すように:

function sayHello(name="world") {
    console.log("Hello, " + name + "!");
}

sayHello(); // "Hello, world!"
sayHello("Tom"); // "Hello, Tom!"

この例では、関数sayHelloを定義し、そのパラメータ名にデフォルト値「world」を割り当てます。関数にパラメータが渡されない場合、デフォルト値が使用され、「Hello, world!」が出力されます。関数にパラメータを渡すと、渡した値が使用されます。たとえば、Tom を渡すと、「Hello, Tom!」と出力されます。

他のパラメータのデフォルト値を使用してデフォルト値を設定することもできます。例:

function sayHello(name="world",greeting=`Hello`) {
    console.log(`${greeting}, ${name}!`);
}

sayHello(); // "Hello, world!"
sayHello("Tom"); // "Hello, Tom!"
sayHello("Jenny", "Hi"); // "Hi, Jenny!"
sayHello(undefined, "Goodbye"); // "Goodbye, world!"

この例では、関数 SayHello を再度定義し、そのパラメータの名前と挨拶にデフォルト値を指定します。挨拶パラメータを渡さない場合は、デフォルト値「Hello」が使用されます。 TomとHiを渡すと「Hi, Tom!」と出力されます。 unknown と "Goodbye" を渡すと、デフォルト値が使用され、"Goodbye, world!" が出力されます。

デフォルト値に関する注意事項

デフォルト値を使用する場合は、次の問題に注意する必要があります。

1. パラメータの値が未定義の場合のみ、デフォルト値を使用します。したがって、null、""、0 などの false 値を渡す場合、デフォルト値は使用されません。

function getColor(color = "blue") {
    console.log(color);
}

getColor(null); // null
getColor(""); // ""
getColor(0); // 0

2. デフォルト値を使用する場合、パラメータはまだ存在しますが、その値はデフォルト値です。したがって、引き続き引数オブジェクトを使用してこれらのパラメータにアクセスできます。例:

function sayHello(name = "world") {
    console.log(`Hello, ${arguments[0]}!`);
}

sayHello("Tom"); // "Hello, Tom!"

3. デフォルト値を使用する場合、パラメータは他のパラメータにのみ適用されます。パラメーターが関数自体または他のグローバル変数を参照する場合、デフォルト値は使用されません。例:

let language = "English";
function sayHello(name = "world", greeting = `Hello ${language}!`) {
    console.log(`${greeting}, ${name}!`);
}

sayHello(); // "Hello English, world!"

結論

ES6 より前は、関数パラメータのデフォルト値を設定するのは面倒で、手動で null か未定義かを判断する必要がありました。 ES6の登場により、関数パラメータのデフォルト値の設定がより簡潔で読みやすくなりました。デフォルト値を設定すると、コードがより簡潔になり、保守性が向上し、エラーの発生を減らすことができます。さらに、デフォルト値を使用する場合、パラメータはまだ存在しており、デフォルト値は設定されていないパラメータにのみ適用され、他の関数やグローバル変数とは関係がないことにも注意する必要があります。

以上がJavaScriptでデフォルト値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。