陣列物件到簡單物件映射問題

我正在嘗試從陣列中生成下面提到的物件。我已經嘗試過使用 Javascript 進行映射和推送，但我無法實作。請提供一些膠水來執行此操作。

fn();

function fn() {
  var env = 'uat';
  var userInput = 'appA';
  var listOfApplications = [
   {
      "appName":"common",
      "data":{
         "uat":{
            "baseUrl":"http://commonurl.com",
            "parameterX":"x",
            "parameterY":"y"
         }
      }
   },
   {
      "appName":"appA",
      "data":{
         "uat":{
            "baseUrl":"http://uat.appA.com",
            "parameterA":"a",
            "parameterB":"b"
         }
      }
   },
   {
      "appName":"appB",
      "data":{
         "uat":{
            "baseUrl":"http://uat.appB.com",
            "parameterC":"d",
            "parameterD":"c"
         }
      }
   }
];
  var config = {};
  switch (env) {
    case "uat":
        for (const s of listOfApplications) {
            if (userInput == s.appName || 'common' == s.appName) {
                config[s.appName] = s.appName
                config = s.data['uat']
            }
        }
     break;
  }
console.log(config);
return config;
}

我正在嘗試產生下面提到的輸出。

 {
  "baseUrl": "http://commonurl.com",
  "parameterX": "x",
  "parameterY": "y",
  "appA": {
    "baseUrl": "http://uat.appA.com",
    "parameterA": "a",
    "parameterB": "b"
   }
 }

請幫助我

uj5u.com熱心網友回復：

問題：

首先，我想解釋一下您的代碼中的問題：

線

config[s.appName] = s.appName

config在下一行設定一個屬性

config = s.data['uat']

重新分配一個新物件并覆寫所有以前的更改。在回圈中執行此操作會導致config包含s.data['uat']最后一個回圈迭代，其中

userInput == s.appName || 'common' == s.appName

回傳true。這意味著config要么包含通用配置，要么包含應用程式配置。它還會無意中修改您的原始資料。在第一次回圈迭代之后，config = s.data['uat']設定對原始物件中的物件的參考。然后，config = s.data['uat']向該物件添加一個屬性。您可以通過以下方式看到問題console.log：

fn();

function fn() {
  var env = 'uat';
  var userInput = 'appA';
  var listOfApplications = [{"appName": "common","data": {"uat": {"baseUrl": "http://commonurl.com","parameterX": "x","parameterY": "y"}}},{"appName": "appA","data": {"uat": {"baseUrl": "http://uat.appA.com","parameterA": "a","parameterB": "b"}}},{"appName": "appB","data": {"uat": {"baseUrl": "http://uat.appB.com","parameterC": "d","parameterD": "c"}}}];
  var config = {};
  switch (env) {
    case "uat":
      for (const s of listOfApplications) {
        if (userInput == s.appName || 'common' == s.appName) {
          config[s.appName] = s.appName
          config = s.data['uat']
        }
      }
      break;
  }
  console.log(listOfApplications);
  return config;
}

listOfApplications無意中的第一個陣列元素獲得了一個新屬性。

解決方案：

看起來預期的結果是一個包含公共配置的所有屬性的物件和一個具有應用程式配置的屬性。您可以使用以下命令找到這兩種配置Array#find：

fn();

function fn() {
  const env = 'uat';
  const userInput = 'appA';
  const listOfApplications = [{"appName": "common","data": {"uat": {"baseUrl": "http://commonurl.com","parameterX": "x","parameterY": "y"}}},{"appName": "appA","data": {"uat": {"baseUrl": "http://uat.appA.com","parameterA": "a","parameterB": "b"}}},{"appName": "appB","data": {"uat": {"baseUrl": "http://uat.appB.com","parameterC": "d","parameterD": "c"}}}];
  const config = {
    ...listOfApplications.find(({ appName }) => appName === 'common')?.data[env],
    [userInput]: { ...listOfApplications.find(({ appName }) => appName === userInput)?.data[env] }
  };
  console.log(config);
  return config;
}

我創建了應用程式配置的淺表副本，以避免對原始物件進行意外修改。對我來說，嵌套物件的復雜配置，你應該考慮一個深拷貝。

標籤：javascript

上一篇：錯誤：[未定義]不是<Route>組件。<Routes>的所有子組件必須是<Route>或<React.Fragment>

下一篇：關閉應用程式的JestJS測驗不起作用