將陣列（多個深度物件鍵）轉換為一個物件

任務： 將鍵陣列轉換為一個物件，并為每個鍵分配一個空字串，例如（“”）。

問題： 鍵也代表結果物件中不同的深度級別（例如 defaultToolConf.graph.graphApiConf.url 代表物件中的 4 個深度級別）。每個深度級別由鍵字串中的點 (.) 分隔。

輸入（陣列）：

[
'ADMIN_URL_REGEXP', 
'BASE_PATH', 
'appName', 
'defaultToolConf',
'defaultToolConf.graph', 
'defaultToolConf.graph.graphApiConf', 
'defaultToolConf.graph.graphApiConf.markerCampaignsUrl',
'defaultToolConf.graph.graphApiConf.markerUrl', 
'defaultToolConf.graph.graphApiConf.ndviUrl', 
'defaultToolConf.graph.graphLineColors', 
'defaultToolConf.query', 
'defaultToolConf.query.canExportKml', 
'defaultToolConf.query.isExportEnabled', 
'defaultToolConf.query.isResizable', 
'defaultToolConf.test', 
'defaultToolConf.toolsPermissionsPath', 
'token', 
'token.format', 
'token.key', 
'token.paths'
]

輸出（結果物件）：

{
    "ADMIN_URL_REGEXP": "",
    "BASE_PATH": "",
    "appName": "",
    "defaultToolConf": {
        "graph": {
            "graphApiConf": {
                "markerCampaignsUrl": "",
                "markerUrl": "",
                "ndviUrl": ""
            },
            "graphLineColors": ""
        },
        "query": {
            "canExportKml": "",
            "isExportEnabled": "",
            "isResizable": ""
        },
        "test": "",
        "toolsPermissionsPath": ""
    },
    "tokenInterceptor": {
        "format": "",
        "key": "",
        "paths": ""
    }
}

到目前為止我做了什么：https : //jsfiddle.net/rt279mfz/

我設法創建了一個具有多個深度物件的結果物件。

問題： 我必須將鍵值分配為空物件 {}。這意味著我必須遍歷所有物件鍵（在多個深度）并將值重新分配為空字串而不是空物件。我不知道這是否可能。

我在結果物件中有重復鍵。

uj5u.com熱心網友回復：

您可以“穿行”物件，隨時創建子級別。下面是一個例子：

const array = [
    'ADMIN_URL_REGEXP', 
    'BASE_PATH', 
    'appName', 
    'defaultToolConf',
    'defaultToolConf.graph', 
    'defaultToolConf.graph.graphApiConf', 
    'defaultToolConf.graph.graphApiConf.markerCampaignsUrl',
    'defaultToolConf.graph.graphApiConf.markerUrl', 
    'defaultToolConf.graph.graphApiConf.ndviUrl', 
    'defaultToolConf.graph.graphLineColors', 
    'defaultToolConf.query', 
    'defaultToolConf.query.canExportKml', 
    'defaultToolConf.query.isExportEnabled', 
    'defaultToolConf.query.isResizable', 
    'defaultToolConf.test', 
    'defaultToolConf.toolsPermissionsPath', 
    'token', 
    'token.format', 
    'token.key', 
    'token.paths'];
    
const arrayToObject = (arr) => {
  return arr.reduce((acc, el) => {
    let currentNode = acc;
    const pathParts = el.split(".");
    for (let i = 0; i < pathParts.length - 1; i  ) { // skip the final element (- 1)
      let pp = pathParts[i];
      if (!currentNode[pp])
        currentNode[pp] = {}; // create the nested object if needed
      currentNode = currentNode[pp]; // move to the next level of the object
    }
    // currentNode is now the parent object of the last property from the array that we need to add, from here we just assign it to ""
    currentNode[pathParts[pathParts.length - 1]] = "";
    return acc;
  }, {});
}

let newObject = arrayToObject(array);
console.log(newObject);

uj5u.com熱心網友回復：

迭代：

// Reduce 
const result = array.reduce((acc, item) => {

  // Split string to array
  const split = item.split('.');

  let currentStep = acc;

  split.forEach((item, index) => {
    // Set current object property (if already exists do nothing, if not then create an empty object, if its last index assign empty string)
    currentStep = currentStep[item]
                = (currentStep[item] || (index === split.length - 1 ? '' : {}))

  });

  return acc;

}, {})

遞回：

const result = array.reduce((acc, item) => {

  const createDeepNestedObj = (obj, array, index = 0, current = array[index]) => {

    obj[current] = obj[current] || (index < array.length - 1 ? {} : '');

    if (index < array.length) createDeepNestedObj(obj[current], array,   index);
  }

  createDeepNestedObj(acc, item.split('.'));

  return acc;

}, {})

標籤：javascript 数组 目的 钥匙

上一篇：如何分配型別為(x:number)=>{y:number,z:number}的變數？

下一篇：mysql查詢在等待時回傳null時如何處理？