Javascript重写一个数组

Question

我有两个动态的数组，可以随时改变。 例如：

var vehicleColor = "red,green,blue,white".split(",");
var vehicleType = "Truck,Car,Bus".split(",");

如何将这些数组合并为我的图形以这种格式制作javascript数组。

var links = [
    {source: vehicleColor[0], target: vehicleType[0]},
    {source: vehicleColor[1], target: vehicleType[0]},  
    {source: vehicleColor[2], target: vehicleType[0]},
    {source: vehicleColor[3], target: vehicleType[0]},  
    {source: vehicleColor[0], target: vehicleType[1]},
    {source: vehicleColor[1], target: vehicleType[1]},
    etc...
]

基本上我需要一个循环遍历两个数组中所有元素的数组，但为每个数组创建一个单独的行。

我试过了：

links = links.map(x => ({source:vehicleColor, target:vehicleType}));

但这并没有让我把每个元素都放在一个单独的行中。

map方法给了我这个输出

var links = [
    {source: ["red","green","blue","white"], target: ["Truck","Bus","Car"]},
]

Answer 1

您将使用嵌套循环：

 var vehicleColor = "red,green,blue,white".split(","); var vehicleType = "Truck,Car,Bus".split(","); var links = []; for (var i = 0; i < vehicleType.length; ++i) { var type = vehicleType[i]; for (var j = 0; j < vehicleColor.length; ++j) { links.push({ source: type, target: vehicleColor[j] }); } } console.log(links); 

Answer 2

如果带有对象的数组再次调用getCartesian并构建新对象，则可以采用递归函数分隔所有键/值对并通过迭代值构建新的笛卡尔积。

 function getCartesian(object) { return Object.entries(object).reduce((r, [k, v]) => { var temp = []; r.forEach(s => (Array.isArray(v) ? v : [v]).forEach(w => (w && typeof w === 'object' ? getCartesian(w) : [w]).forEach(x => temp.push(Object.assign({}, s, { [k]: x })) ) ) ); return temp; }, [{}]); } var data = { source: ["red", "green", "blue", "white"], target: ["Truck", "Bus", "Car"] }; console.log(getCartesian(data)); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 3

我使用foreach和map来获得所需的结果

 var vehicleColor = "red,green,blue,white".split(","); var vehicleType = "Truck,Car,Bus".split(","); let res = []; vehicleColor.forEach((color) => { res = res.concat(vehicleType.map((type) => { return {'source': color, 'target': type} })) }) console.log(res) 

Answer 4

你可以运行两个运行两个循环。 例如，当将每种颜色作为常数运行时，运行车辆的完整循环，然后对另一种颜色重复相同

 var vehicleColor = "red,green,blue,white".split(","); var vehicleType = "Truck,Car,Bus".split(","); let links = []; vehicleColor.forEach(function(item) { vehicleType.forEach(function(ve) { links.push({ source: item, target: ve }) }) }) console.log(links)