オブジェクトの分割により JavaScript 関数のパラメーターはどのように簡素化されるのでしょうか?

関数パラメータの JavaScript のオブジェクト分割の詳細

JavaScript で関数を宣言する場合、開発者は通常、パラメータを次のような名前付き変数として定義します。

function moo(myArgObj) {
    print(myArgObj.a);
}

ただし、言語の最近のバージョンでは、

function moo({ a, b, c }) { // valid syntax!
    print(a); // prints 4
}

オブジェクトの分割とは何ですか?

オブジェクトの分割は、オブジェクトから特定のプロパティを抽出するパターンです。上記の関数では、中括弧 {} でオブジェクト名を変数名で囲み、変数名は対応するオブジェクト プロパティにバインドされています。

構文について

構文関数パラメータでのオブジェクトの構造化は次のとおりです:

function functionName({ property1, property2, ... }) {
    // code using the destructured properties
}

• curly中かっこ {} は、オブジェクトが構造化されていないことを示します。
• プロパティ名は、引数として渡されたオブジェクトのプロパティと一致します。
• プロパティ値は関数内で直接アクセスできます。

関数内の分割の例パラメータ

// Extract the 'age' property
function getAge({ age }) {
    console.log(age);
}

// Extract multiple properties
function getFullName({ firstName, lastName }) {
    console.log(`${firstName} ${lastName}`);
}

// Use the rest operator ... to extract remaining properties
function getProfile({ name, ...profileDetails }) {
    console.log(name);
    console.log(profileDetails); // contains other object properties
}

詳細情報のリソース

• MDN: [構造化割り当て](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
• ECMAScript wiki: [バインディングの構造化](https://wiki.ecmascript .org/doku.php?id=harmony:destructuring_binding)
• DailyJS: [オブジェクトの構造化とES6 のデフォルト パラメーター](https://dailyjs.com/2015/04/28/object-destructuring-and-default-parameters-in-es6/)

以上がオブジェクトの分割により JavaScript 関数のパラメーターはどのように簡素化されるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。