使用的forEach ES6

添加對象的陣列分成對象的陣列I具有這組顏色陣列["#c4b18f", "#100f5c"]使用的forEach ES6

的和我要添加到每個攝像機，但攝像機是一個嵌套陣列，像這樣

[ 
    { 
    "id": 1, 
    "date": "Sat", 
    "cameras": [ 
     { 
     "name": "East Gate", 
     "total_count": 233 
     }, 
     { 
     "name": "South Gate", 
     "total_count": 2599 
     } 
    ] 
    }, 
    { 
    "id": 2, 
    "date": "Sun", 
    "cameras": [ 
     { 
     "name": "East Gate", 
     "total_count": 123342 
     }, 
     { 
     "name": "South Gate", 
     "total_count": 2333 
     } 
    ] 
    } 
]

我做過嘗試，但我得到了不確定

const result = data.forEach(obj => ({ 
       ...obj, 
       cameras: obj.cameras.map((obj2, i) => ({ 
        ...obj2, 
        color: colors[i] 
       })) 
      }))

我懷疑我忘了返回的東西，或者我應該使用地圖，而不是針對的forEach第一循環？

來源

2017-09-14 Cecilia Chan

我認爲你的意思是'.map'而不是'.forEach'。 –

[對象擴展語法]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Spread_in_object_literals）不是ES6，它是當前的第3階段提議。你確定你沒有收到語法錯誤嗎？ –

您預期的最終數據格式是什麼？ – spiritwalker

Array.map

您可以使用Array.map()遍歷每個元素並返回一個新的數組。

的地圖（）方法創建呼叫主叫陣列中的每個元件上的提供功能的結果的新的數組。

在下面的例子中，我們要求地圖（）兩次。一次爲對象數組（天），然後每次我們找到一個攝像頭陣列。

let addColors = (days, colors) => days.map(o => { 
    o.cameras = o.cameras.map((c, i) => { 
    c.colors = colors[i%colors.length]; 
    return c; 
    }); 
    return o; 
});

什麼，如果我有3個或多個顏色，將這個解決方案的工作？

它將通過更改此行來工作c.colors = colors[i%colors.length];它使用Remainder (%)運算符。對於每個相機，它將索引除以顏色數量，並將餘數用作顏色數組的索引。

這有點難以解釋。

相機看起來是這樣的：

"cameras": [{ 
    "name": "East Gate", 
    "total_count": 123342 
    }, 
    { 
    "name": "South Gate", 
    "total_count": 2333 
    } 
]

東門相機擁有0和南門相機的指標有1索引。所以我們用顏色數量除0（我改變了例子，所以我們有7個相機）。它進入0,0次而沒有餘數。所以我們選擇colors[0]即red。接下來，我們將1除以7.進入1,0次，餘數爲1.所以我們選擇colors[1]即orange。這可以針對每組相機繼續。如果攝像機的數量比顏色的數量更長，那麼顏色選擇將開始重複。

我擴展了下面的例子來展示當你有更多的攝像機而不是顏色時會發生什麼。

Runnable的實例

let colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]; 
 
let foo = [{ 
 
    "id": 1, 
 
    "date": "Sat", 
 
    "cameras": [{ 
 
     "name": "East Gate", 
 
     "total_count": 233 
 
     }, 
 
     { 
 
     "name": "South Gate", 
 
     "total_count": 2599 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "id": 2, 
 
    "date": "Sun", 
 
    "cameras": [{ 
 
     "name": "East Gate", 
 
     "total_count": 123342 
 
     }, 
 
     { 
 
     "name": "South Gate", 
 
     "total_count": 2333 
 
     }, 
 
     { 
 
     "name": "North Gate", 
 
     "total_count": 2234 
 
     }, 
 
     { 
 
     "name": "West Gate", 
 
     "total_count": 2234 
 
     }, 
 
     { 
 
     "name": "North West Gate", 
 
     "total_count": 2234 
 
     }, 
 
     { 
 
     "name": "North East Gate", 
 
     "total_count": 2234 
 
     }, 
 
     { 
 
     "name": "South West Gate", 
 
     "total_count": 2234 
 
     }, 
 
     { 
 
     "name": "South East Gate", 
 
     "total_count": 2234 
 
     } 
 
    ] 
 
    } 
 
]; 
 

 
let addColors = (days, colors) => days.map(o => { 
 
    o.cameras = o.cameras.map((c, i) => { 
 
    c.colors = colors[i%colors.length]; 
 
    return c; 
 
    }); 
 
    return o; 
 
}); 
 

 
document.querySelector('pre').innerHTML = JSON.stringify(addColors(foo, colors), null, 2);

<pre></pre>

來源

2017-09-14 03:37:52 Will

hmm 1個顏色只適用於1個攝像頭 –

然後使用地圖索引和模型2選擇一個或另一個。我修改了上面的代碼。 – Will

如果我有3種或更多顏色，該解決方案是否可行？ –

你可以簡單地使用循環。下面的代碼將有所幫助。讓arr成爲最初的數組。

for(var j=0;j<2;j++){ 
     var cameras = arr[j]["cameras"]; 
     for(var i=0;i<2;i++){ 
      cameras[i]["color"]=["#c4b18f", "#100f5c"] 
     } 
    }

來源

2017-09-14 03:52:30 Abhijit

使用的forEach ES6

回答

相關問題