配列とオブジェクトにJavaScriptスプレッドシンタックスを併用するにはどうすればいいですか？

Question

私は、入力配列から複数のオブジェクトをマージし、すべてのキーと値をマージして単一のオブジェクトを返すという問題を解決しています。入力配列内の1つ以上のオブジェクトにキーが存在する場合、そのキーの最新の値は最終的に返されるオブジェクトに格納されます。

例 -

var a={1:'1',2:'2',3:'3'}, 
    b={3:'4',5:'6',6:'7',7:'8'}, 
    c={5:'9',8:'9',6:'12',23:'35'} 
    o=[a,b,c]; 

返されたオブジェクトがあるべきである - 重複キーケースの一例として

{ '1': '1','2': '2','3': '4','5': '9','6': '12','7': '8','8': '9','23':'35' }

、3キーがでて、両方のオブジェクトaとbに存在します最後の結果は値が{3:'4'}であるため、最新のものです。

この問題ではオブジェクトにspread syntaxを使用しますが、その一部だけを解決します。これは私がのように、普及に各配列要素を記述する必要がある、機能するためには

function foo() { 
 
    var a={'1':'1','2':'2','3':'3'}, 
 
    b={'3':'4','5':'6','6':'7','7':'8'}, 
 
    c={'5':'9','8':'9','6':'12','23':'35'}, 
 
    arr = [a,b,c]; 
 
    
 
    return {...arr[0], ...arr[1], ...arr[2]} 
 
} 
 

 
console.log(foo());

- 私はのように、作品ごとに個別のオブジェクトのためのスプレッドを使用している場合私は何を意味することは、あります上記のスニペット - ...arr[0], ...arr[1], ...arr[2]。しかし、入力配列には任意の数のオブジェクトを含めることができるため、各要素を書き出すことは実現できません。配列のように反復可能なのスプレッドを使用して

通常、あなたはSO-

var parts = ['shoulders', 'knees']; 
 
var lyrics = ['head', ...parts, 'and', 'toes']; 
 
console.log(lyrics)

のように入力配列上に広げ使用することが可能であり、配列の要素を拡張することができますスプレッドを再度適用できるすべての個々のオブジェクトを集めて最終オブジェクトを取得しますか？あなただけのObject.assign()を使用することができ

Answer 1

：

function foo() { 
 
    var a={'1':'1','2':'2','3':'3'}, 
 
    b={'3':'4','5':'6','6':'7','7':'8'}, 
 
    c={'5':'9','8':'9','6':'12','23':'35'}, 
 
    arr = [a,b,c]; 
 
    
 
    return Object.assign(...arr); 
 
} 
 

 
console.log(foo());

注これは、暗黙のうちにあなたの配列の最初のオブジェクトを変更すること：

return Object.assign(...arr); 

をここで完全な抜粋です。あなたはそれをしたくない場合は、Object.assign()に最初の引数として新しい空のオブジェクトを渡す：あなたがそれらを直接マージするオブジェクトの上に広がる構文を使用することができます

return Object.assign({}, ...arr); 

Answer 2

。

function foo() { 
 
    var a={'1':'1','2':'2','3':'3'}, 
 
     b={'3':'4','5':'6','6':'7','7':'8'}, 
 
     c={'5':'9','8':'9','6':'12','23':'35'}; 
 
    return {...a, ...b, ...c}; 
 
} 
 

 
console.log(foo());

あなたは配列を持っている場合は、array#reduceとObject#assignを使用することができます。

var a={'1':'1','2':'2','3':'3'}, 
 
    b={'3':'4','5':'6','6':'7','7':'8'}, 
 
    c={'5':'9','8':'9','6':'12','23':'35'}, 
 
    arr = [a,b,c]; 
 
var result = arr.reduce(function(r,o){ 
 
    return Object.assign(r,o); 
 
},Object.create(null)); 
 

 
console.log(result);

注：ECMAScriptの提案（ステージ3）レスト/拡がり性リテラルをオブジェクトに広がる性質を追加します。提供されたオブジェクトから独自の列挙可能なプロパティを新しいオブジェクトにコピーします。