展開オブジェクト関数 | JavaScript チュートリアル

JavaScript におけるオブジェクト配列の展開

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、ここをクリックしてください

はじめに

この実験では、JavaScript の unwind 関数を調べます。この関数の目的は、オブジェクトとその配列値のプロパティの 1 つからオブジェクトの配列を生成することです。オブジェクトの分解構文と Array.prototype.map() を使用することで、指定されたキーが個々の値にマップされる以外は、元のオブジェクトの値を含むオブジェクトの配列を作成できます。この実験を通じて、JavaScript のオブジェクトからデータを操作および抽出する方法を深く理解することができます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28684{{"JavaScript におけるオブジェクト配列の展開"}} javascript/data_types -.-> lab-28684{{"JavaScript におけるオブジェクト配列の展開"}} javascript/arith_ops -.-> lab-28684{{"JavaScript におけるオブジェクト配列の展開"}} javascript/comp_ops -.-> lab-28684{{"JavaScript におけるオブジェクト配列の展開"}} javascript/array_methods -.-> lab-28684{{"JavaScript におけるオブジェクト配列の展開"}} javascript/higher_funcs -.-> lab-28684{{"JavaScript におけるオブジェクト配列の展開"}} javascript/destr_assign -.-> lab-28684{{"JavaScript におけるオブジェクト配列の展開"}} javascript/spread_rest -.-> lab-28684{{"JavaScript におけるオブジェクト配列の展開"}} end

オブジェクトを展開する関数

配列値のプロパティによってオブジェクトを展開するには、unwind 関数を使用します。

コーディングを始めるには、ターミナル/SSH を開き、node と入力します。

この関数は、オブジェクト分解構文を使用して、指定された key に対するキーバリューペアをオブジェクトから除外します。

次に、与えられた key の値に対して Array.prototype.map() を使用して、オブジェクトの配列を作成します。

各オブジェクトは、元のオブジェクトの値を含みますが、key は個々の値にマップされます。

const unwind = (key, obj) => { const { [key]: _, ...rest } = obj; return obj[key].map((val) => ({ ...rest, [key]: val })); };

使用例：

unwind("b", { a: true, b: [1, 2] }); // [{ a: true, b: 1 }, { a: true, b: 2 }]