将未知长度的数组减少为嵌套对象

Question

我正在尝试获取一个数组并从中创建一个嵌套对象，其中数组中的每个项目都是前一个项目的属性。

我认为reduce 是做到这一点的方法，但我发现reduce 很难掌握，而且我尝试的每件事都卡在知道如何进入下一个级别。 JS: Reduce array to nested objects 是一个类似的问题，但我尝试了很多变体后仍然无法解决。

const myArray = ['one', 'two', 'three'];

// Intended Output (note, the staticCount is always 1)
{
    one: {
        staticCount: 1,

        two: {
            staticCount: 1,

            three: {
                staticCount: 1
            }
        }
    }
}

Answer 1

有些工作需要Array.prototype.reduceRight：

const myArray = ['one', 'two', 'three']

const nestNode = (acc, key) => {
  acc.staticCount = 1
  return { [key]: acc }
}
console.log(myArray.reduceRight(nestNode, {}))

让我们来看看reduceRight（以及，扩展为reduce）：

我将迭代器函数定义从对reduceRight 的调用中移出，以使该示例更易于讨论（请参阅nestNode）。

reduce 和reduceRight 相似：

1. 每个参数都有两个参数，一个迭代器函数和一个该函数累加器的初始值。第二个参数是可选的，但在这里我将忽略它。

2. Each 遍历数组中调用它们的所有项，为数组中的每个项调用迭代器函数，其中包含四个参数、累加器、数组中的当前项、当前迭代count 和您调用 reduce 的整个数组。最后两个参数在这里不相关（我很少使用它们）。

3. 第一次调用迭代器函数时，会将您提供的第二个参数传递给reduce 或reduceRight（初始累加器值）。之后，它将传递上一步中迭代器函数返回的任何内容。

因为我认为reduce（以及扩展名reduceRight）是值得理解的强大抽象，我将逐步介绍代码示例中的前两个步骤：

1. 在迭代的第一步，我们的迭代器函数是这样调用的：nestNode(acc = {}, key = 'three')。在nestNode 中，我们将staticCount 属性添加到acc 并将其设置为1，从而得到acc = { staticCount: 1 }。然后我们创建并返回一个新对象，其属性名为'three'，其值等于acc。第一步nestNode返回的值是{ three: { staticCount: 1 } }，第二步会用这个值调用nestNode。

2. 在迭代的第二步，我们的迭代器函数是这样调用的：nestNode(acc = { three: { staticCount: 1 } }, key = 'two')。同样，我们将staticCount 属性添加到acc 并将其设置为1，从而得到acc = { three: { staticCount: 1 }, staticCount: 1 }。然后我们创建并返回一个新对象，其属性名为'two'，其值等于acc。我们返回的值是{ two: { three: { staticCount: 1 }, staticCount: 1 } }。同样，此值将在下一步中使用。

我将跳过最后一步，因为我希望详细了解前两个步骤足以让事情变得更清楚。如果您还有其他问题或仍有不清楚或令人困惑的地方，请告诉我。

reduce（和reduceRight）是功能强大、灵活的工具，值得学习和熟悉。

作为结尾，我将在每一步之后为您提供迭代器函数的返回值：

1. { three: { staticCount: 1 } }

2. { two: { three: { staticCount: 1 } }, staticCount: 1 }

3. { one: { two: { three: { staticCount: 1 } }, staticCount: 1 }, staticCount: 1 }

Answer 2

感谢 Tex 让我将 reverse().reduce() 替换为 reduceRight：

['one', 'two', 'three'].reduceRight((a, c) => ({[c]: { staticCount: 1, ...a }}), {});

Answer 3

reduce 和map 一样，将遍历数组中的每个项目并返回结果。主要区别在于map 将返回一个大小与原始数组相同的数组，并进行任何修改。 reduce 接受所谓的 accumulator 并将其作为最终结果返回。

reduce() 有两个参数：

1. function()
2. accumulator 的起始值

您提供的function() 被赋予三个值：

1. accumulator 的值
2. 数组中当前项的值
3. 当前迭代的值（本例中未使用）
4. 原始数组的值（本例中未使用）

了解accumulator 最重要的一点是，它将成为您的function() 返回的任何值，并且您的函数ALWAYS 必须返回一些东西，否则accumulator 将在下一个循环中未定义。

按照您的问题的解决方案是使用reduce 的基本示例。

解决方案

const myArray = ['one','two','three'];
const result = {};

myArray.reduce((accumulator, num) => {
  accumulator[num] = { staticCount: 1}
  return accumulator[num];
}, result);

console.log(result);

性能

这里提供的reduce 解决方案每秒可以执行 760 万次操作，而reduceRight 每秒可以执行 220 万次操作。

https://jsperf.com/reduceright-vs-reduce/

基本示例

var numbers = [1, 2, 3, 4, 5];

// Reduce will assign sum whatever
// the value of result is on the last loop

var sum = numbers.reduce((result, number) => {
  return result + number;
}, 0); // start result at 0

console.log(sum);

另一个例子

var numbers = [1, 2, 3, 4, 5];

// Here we're using the iterator, and
// assinging "too much" to sum if there
// are more than 4 numbers.

var sum = numbers.reduce((result, number, i) => {
  if (i >= 4) return "too much";
  return result + number;
}, 0);

console.log(sum);

文档

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Answer 4

只需使用reduce。它之所以有效，是因为对象是通过引用传递的。

const myArray = ['one', 'two', 'three'];
const newObject = {};

myArray.reduce((acummulator, element) => {
  acummulator[element] = {
    staticCount: 1
  };
  return acummulator[element];
}, newObject);

// Intended Output (note, the staticCount is always 1)

console.log(newObject);

阅读有关减少 here.

Answer 5

诀窍不是从空对象开始，而是从某个声明的变量开始。然后只需将新的孩子作为下一次递归的聚合向下传递。

引用已更新，然后您可以再次打印根目录。

const myArray = ['one', 'two', 'three'];
const root = {};
myArray.reduce( (agg, c) => {
  agg[c] = { staticCount: 1 };
  return agg[c];
}, root );

console.log( root );

Answer 6

这也可以通过递归函数来实现：

const createObj = (keys) => keys.length > 0 && ({
  [keys[0]]: {
    staticCount: 1,
    ...createObj(keys.slice(1))
  }
});

console.log(createObj(['one', 'two', 'three']));