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)