Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

2つのJavaScriptオブジェクトのプロパティを動的にマージする方法は？

javascriptオブジェクトのプロパティを動的にマージする方法は2つあります。彼らは

1）Object.assign（）

Object.assign（） メソッドは、すべてのプロパティの値を1つ以上のソースオブジェクトからターゲットオブジェクトにコピーするために使用されます。 ターゲットオブジェクトを返します 。

例-1

<html>
<body>
<script>
   var target = { a: "ram", b: "rahim" };
   var source = { c: "akbar", d: "anthony" };
   var returnedTarget = Object.assign(target, source);
   document.write(JSON.stringify(target));
   document.write(JSON.stringify(returnedTarget));
</script>
</body>
</html>

出力

{"a":"ram","b":"rahim","c":"akbar","d":"anthony"}
{"a":"ram","b":"rahim","c":"akbar","d":"anthony"}


オブジェクトが同じキーを持っている場合、ディストリビューションの後半に表示されるオブジェクトのキーの値がコピーされます。次の例は、値が異なる同じキーがある場合のシナリオを示しています。

例-2

<html>
<body>
<script>
   var target = { a: "ram", b: "rahim" };
   var source = { b: "akbar", d: "anthony" };
   var returnedTarget = Object.assign(target, source);
   document.write(JSON.stringify(target));
   document.write("</br>");
   document.write(JSON.stringify(returnedTarget));
</script>
</body>
</html>

出力

{"a":"ram","b":"akbar","d":"anthony"}
{"a":"ram","b":"akbar","d":"anthony"}

2）スプレッド演算子の使用

スプレッド演算子 複数の要素/変数/引数が予想される場所で式を展開できるようにします。これは主に、複数の値が予想される変数配列で使用されます。 javascriptオブジェクトはキーと値のペアのエンティティであるため、spread演算子を使用してそれらを1つにマージできます。

構文

var target = [...obj1, ...obj2, ...]

例

<html>
<body>
<script>
   var target = { a: "ram", b: "rahim" };
   var source = { b: "akbar", d: "anthony" };
   var returnedTarget = {...target, ...source}
   document.write(JSON.stringify(returnedTarget));
</script>
</body>
</html>

出力

{"a":"ram","b":"akbar","d":"anthony"}

  1. 2つのJavaScriptオブジェクトをマージする方法は？

    以下は、2つのJavaScriptオブジェクトをマージするコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> &nbs

  2. JavaScriptを使用してオブジェクトを単一のオブジェクト配列にマージする方法は？

    以下は、オブジェクトを単一のオブジェクト配列にマージするコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>