JavaScript Object.assign()

概要: このチュートリアルでは、ES6におけるJavaScriptのObject.assign()メソッドの使い方を学びます。

Object.assign()メソッドの構文を以下に示します。

Object.assign(target, ...sources)Code language: CSS (css)

Object.assign()は、sourceオブジェクトからtargetオブジェクトに、列挙可能な自身のプロパティを全てコピーします。targetオブジェクトを返します。

Object.assign()は、sourceオブジェクトでゲッターを、targetオブジェクトでセッターを呼び出します。プロパティのみを代入し、新しいプロパティのコピーや定義は行いません。

JavaScript Object.assign()によるオブジェクトの複製

次の例では、Object.assign()メソッドを使用してオブジェクトを複製します。

let widget = {
    color: 'red'
};

let clonedWidget = Object.assign({}, widget);

console.log(clonedWidget);
Code language: JavaScript (javascript)

出力

{ color: 'red' }
Code language: CSS (css)

Object.assign()は浅い複製のみを行い、深い複製は行わないことに注意してください。

JavaScript Object.assign()によるオブジェクトのマージ

Object.assign()は、sourceオブジェクトのプロパティ全てを含むプロパティを持つtargetオブジェクトに、sourceオブジェクトをマージできます。例：

let box = {
    height: 10,
    width: 20
};

let style = {
    color: 'Red',
    borderStyle: 'solid'
};

let styleBox = Object.assign({}, box, style);

console.log(styleBox);
Code language: JavaScript (javascript)

出力

{
    height: 10,
    width: 20,
    color: 'Red',
    borderStyle: 'solid'
}
Code language: CSS (css)

sourceオブジェクトが同じプロパティを持つ場合、後のオブジェクトのプロパティが前のオブジェクトのプロパティを上書きします。

let box = {
    height: 10,
    width: 20,
    color: 'Red'
};

let style = {
    color: 'Blue',
    borderStyle: 'solid'
};

let styleBox = Object.assign({}, box, style);

console.log(styleBox);
Code language: JavaScript (javascript)

出力

{
    height: 10,
    width: 20,
    color: 'Blue',
    borderStyle: 'solid'
}
Code language: CSS (css)

概要

• Object.assign()は、sourceオブジェクトからtargetオブジェクトに列挙可能な自身のプロパティを代入します。
• Object.assign()は、オブジェクトの複製またはオブジェクトのマージに使用できます。