使用的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

回答

相关问题