在 JavaScript 中將一個數組中的所有記錄新增到另一個數組的每個記錄中

---

問題陳述要求使用者在 JavaScript 中將一個數組中的所有記錄新增到另一個數組的每個記錄中，僅閱讀該語句似乎很難理解並在其上實現程式碼。最簡單的含義是給定兩個包含不同值集合的陣列，我們需要生成一個組合的新陣列物件，以便新生成的陣列是兩個陣列中所有可能值的集合，例如陣列 1 和陣列 2。

問題陳述也可以用另一種方式實現，即查詢使用者給定的兩個陣列的笛卡爾積。

什麼是 JavaScript 中的笛卡爾積？

笛卡爾積實際上是數學集合論中的一個概念，給定兩個集合 A 和 B，A * B 是集合的所有可能組合，其中它的值存在於 A 或 B 中，這裡問題陳述用使用者給定的輸入陣列替換了狀態。

在 JavaScript 中，程式碼邏輯將笛卡爾積視為一個問題陳述，其解決方案的基本支柱是遍歷兩個陣列的每個元素，然後將第一個陣列的每個元素與第二個陣列的每個元素配對。

關於問題陳述的解決方案的視覺效果如下所示

給定兩個陣列

const array1 = [ 1, 2 , 3 ];
const array2 = [ 'x' ,'y' , 'z' ] ;

const caretsianProductofArrays = [ [1,'x'] , [1,'y''] , [1,'z'] , [2,'x'] , 
[2,'y'] , [2,'z'] , [3,'x'] , [3,'y'] , [3,'z'] ];

演算法 - 使用迴圈

該演算法遵循從給定的兩個陣列輸入中形成每個有序對的核心邏輯。

步驟 1：宣告一個名為 combineTwoArrayRecords 的函式，該函式將 array1 和 array2 作為輸入。

步驟 2：宣告並初始化名為 resultArr 的結果陣列為空陣列。

步驟 3：我們使用 foreach 迴圈遍歷陣列中的元素，該陣列使用 foreach 迴圈作為回撥函式來生成每次外部 foreach 迴圈迭代的所有可能的對，從而生成陣列元素的所有可能組合。

步驟 4：為了將陣列的陣列轉換為物件的陣列，我們在每次迭代的 push 方法中傳遞了鍵和值引數，以使其將兩個陣列的每個元素的所有可能組合塑造成鍵值對和陣列物件的格式。

步驟 5：一旦所有陣列的長度都耗盡到 javascript 的 length 屬性，我們就返回包含兩個陣列中所有可能元素組合的結果物件，以鍵值對的形式。

示例

function combineTwoArrayRecords(arr1 , arr2)
{
   let resultArr =[];
   arr1.forEach(itemArr1 => {
     arr2.forEach(itemArr2 =>{
       resultArr.push({
         'User' : itemArr1 ,
         'City' : itemArr2
       })
     })
   })
   return resultArr;
}

const nameArray = [ "Michael" , "James" ,"Steve"];
const cityArray = [ "NewYork" , "Japan" , "USA" ,"China"]

const finalCombinations = combineTwoArrayRecords( nameArray , cityArray);

console.log(finalCombinations);

輸出

[
  { User: 'Michael', City: 'NewYork' },
  { User: 'Michael', City: 'Japan' },
  { User: 'Michael', City: 'USA' },
  { User: 'Michael', City: 'China' },
  { User: 'James', City: 'NewYork' },
  { User: 'James', City: 'Japan' },
  { User: 'James', City: 'USA' },
  { User: 'James', City: 'China' },
  { User: 'Steve', City: 'NewYork' },
  { User: 'Steve', City: 'Japan' },
  { User: 'Steve', City: 'USA' },
  { User: 'Steve', City: 'China' }
]

這是在 javascript 中使用巢狀迴圈將一個數組中的所有記錄新增到另一個數組中每個記錄的最簡單方法之一，但此類演算法的時間複雜度會受到很大影響。

時間和空間複雜度

由於演算法中存在兩個迴圈，因此我們遇到了 O(n^2) 的二次最壞時間複雜度，但請記住，兩個陣列的長度並不相同，例如 array1 的長度為 m，array2 的長度為 n，並且可能 m>n 或 m

演算法 - 使用 Map 和 Reduce 方法

步驟 1：宣告一個名為 combineArrayOfRecords 的函式，該函式將 array1 和 array2 作為使用者給定的輸入源。

步驟 2：返回應用於 array1 的 reducer 函式，以便 reducer 函式使用累加器和當前值作為引數，reducer 函式實際上在呼叫陣列的每個成員上執行，從而產生單個輸出值，即我們解決問題陳述所需的單個可能組合。

步驟 3：如果未提供初始值，則引數中的累加器將獲取 array1 的第一個值，而當前值將獲取第二個值，以便在其中應用於 array2 的 map 函式用於將 array2 的每個元素對映到 array1 的每個成員上，該成員呼叫了 reducer 函式，並以 Users 和 City 的鍵值對形式進行塑形。

步驟 4：這就是累加器如何使用展開運算子儲存使用 reduce 和 map 函式生成的每個元素的所有可能組合，並生成每個陣列的不同記錄，從而解決了問題陳述。

主程式碼 - 使用 Map 和 Reduce 方法

示例

function combineArrayOfRecords(arr1,arr2)
{
   return arr1.reduce((accumulator , currentValue)=>
     
     [...accumulator , ...arr2.map(currentItem=>(
       
         {
            'User' : currentValue ,
            'City' : currentItem
         }
     ))]
   
     
   , [])
}

const nameArray = [ "Michael" , "James" ,"Steve"]
const cityArray = [ "NewYork" , "Japan" , "USA" ,"China"]
const finalArray = combineArrayOfRecords(nameArray , cityArray);
console.log(finalArray);

輸出

[
  { User: 'Michael', City: 'NewYork' },
  { User: 'Michael', City: 'Japan' },
  { User: 'Michael', City: 'USA' },
  { User: 'Michael', City: 'China' },
  { User: 'James', City: 'NewYork' },
  { User: 'James', City: 'Japan' },
  { User: 'James', City: 'USA' },
  { User: 'James', City: 'China' },
  { User: 'Steve', City: 'NewYork' },
  { User: 'Steve', City: 'Japan' },
  { User: 'Steve', City: 'USA' },
  { User: 'Steve', City: 'China' }
]

時間和空間複雜度

reduce 函式的最小時間複雜度為 O(n)，因為 array1 在最壞情況下正在迭代陣列的長度進行呼叫。即使在對 array1 的每個元素成員的每次呼叫中，map 也在陣列上呼叫，遍歷陣列並花費 O(n) 時間複雜度，總計為 O(n) + O(n) = O(n) 時間複雜度。空間複雜度為 O(1)，因為沒有額外的記憶體分配。

結論

這就是我們如何透過邏輯思考和編碼上下文來解決上述問題陳述，從巢狀 foreach 迴圈到 javascript 中 reduce 和 map 方法的最有效用例。