基于提供的键遍历对象层次结构？

Question

我有一个接受以下参数的函数：

set(section, field, pair, component, element, value)

部分、字段、对 > 和 component 只是 Object 中的键。它们是路点，因此我们可以沿着层次结构向下移动。显然 section 是头部，我们的切入点。

element 是目标键，value 是要设置的值。

由于存在不同深度的元素，我想做以下事情：

set('utility', null, null, null, 'exportId', 'banana')

这是一个浅层访问，在内部它会这样做：

dataObj[section][element] = value;

**/ As in
 * data: {
      utility: {
         exportId: 'banana'
      }
 *  }
 */

在其他情况下，当元素在 Object 内部更深时，可能需要执行以下操作：

dataObj[section][field][pair][component][element] = value;

动态定义元素路径的最佳方法是什么，因此我们跳过作为“null”传入的键？

例如：

set('history', 'current', null, null, 'fruit', 'apple')

**/ As in
 * data: {
      history: {
         current: {
           fruit: 'apple'
        }
      }
 *  }
 */

将在内部构造为：

dataObj[section][field][element] = value;

您可能已经注意到，我们跳过了 [pair][component]，因为这些插槽是作为 null(s) 传入的。

Answer 1

与其拥有一长串特定参数，只需将一个对象传递给函数即可。这样你只传递你需要的东西，并且在调用时不会有任何“空”引用要处理。

使用这个实现，这个调用可以缩短成这样：

您当前的实现：

 set('utility', 'current', null, null, 'exportId', 'banana')

使用对象作为参数：

set({
   section:'utility', 
   field:'current', 
   element: 'exportId', 
   value:'banana'
});

Answer 2

您可以使用rest parameters 来获取传递给数组的参数。然后使用reduceRight创建一个对象

function set(...paths) { 
  return paths.reduceRight((r, key, i) => key !== null ? { [key] : r } : r)  
}

console.log(set('history', 'current', null, null, 'fruit', 'apple'))
console.log(set('utility', null, null, null, 'exportId', 'banana'))

---

上述函数将根据路径构造一个嵌套对象。如果您只想更新现有对象，则可以遍历该对象并像这样设置值：

function set(dataObj, ...paths) {
  let value = paths.pop(),
      nested = dataObj;

  for (let i = 0; i < paths.length; i++) {
    const path = paths[i];

    if (i === paths.length - 1 && nested)
      nested[path] = value; // set the value if it's the final item

    if (path !== null && nested)
      nested = nested[path]; // get another level of nesting
  }

  return dataObj;
}

let obj = { utility: { exportId: 'banana' } }

console.log(set(obj, 'utility', null, null, null, 'exportId', 'orange'))

obj = {
  history: {
    current: {
      fruit: 'apple'
    }
  }
}

console.log(set(obj, 'history', 'current', null, null, 'fruit', 'orange'))