【问题标题】:What's the best way (ES6 allowed) to extract values from an array and convert them to a string?从数组中提取值并将它们转换为字符串的最佳方法是什么(允许 ES6)?
【发布时间】:2025-12-10 15:55:01
【问题描述】:

我正在尝试这样的数组:

location: [
  {Id: "000-000", Name: "Foo"}, 
  {Id: "000-001", Name: "Bar"}, 
  ..etc
]

提取 Id 并将它们组合成单个字符串同时还在每个值前面附加一个静态字符串 ("&myId=") 的最有效/最干净的方法是什么?

更简洁地说,将上述数组转换为以下最终结果的最有效方法是什么:

&myId=000-000&myId=000-001

如标题所述,如果 ES6 提供了实现此目的的最佳方法,则可以使用 ES6。

【问题讨论】:

    标签: javascript arrays string ecmascript-6


    【解决方案1】:

    使用reduce,提取每个Id

    const location2 = [{Id: "000-000", Name: "Foo"}, {Id: "000-001", Name: "Bar"}];
    console.log(
      location2.reduce((a, { Id }) => `${a}&myId=${Id}`, '')
    );

    虽然这很干净并且只需要对每个项目进行一次迭代,但就效率而言,如果数组中有大量项目,for 循环仍然会更高效:

    const location2 = [{Id: "000-000", Name: "Foo"}, {Id: "000-001", Name: "Bar"}];
    let output = '';
    for (let i = 0, { length } = location2; i < length; i++) {
      output += '&myId=' + location2[i].Id;
    }
    console.log(output);

    【讨论】:

    • @star-coder 我更喜欢reduce 而不是map / join 因为reduce 不需要创建中间数组,我更喜欢reduce 而不是for因为数组方法有更好的抽象,不需要手动迭代。
    • 另一方面,重复连接是 O(n^2),而 join 是 O(n)。
    • @star-coder 我和你在一起。我已经编程了 40 年,但我仍然发现 reduce 的许多巧妙用法令人困惑,并且很少在针对新手的解决方案中推荐它们。但对每个人来说都是他自己的。
    • 单个连接是 O(n),因为它必须将两个输入字符串复制到结果中。每次循环执行它都会使其 O(n^2)。
    • @Barmar 仅当您假设字符串的唯一可用表示是字符的平面列表时,重复连接才是一个问题,但事实并非如此。所有常见的 JS 引擎都使用绳索,并且仅在使用基于索引的操作时才将字符串展平。鉴于此,现代引擎上的此代码为O(n)
    【解决方案2】:

    使用mapjoin 似乎足够高效。

    const staticString = "&myId=",
      locationArray = [
        {
          Id: "000-000",
          Name: "Foo"
        },
        {
          Id: "000-001",
          Name: "Bar"
        }
      ],
      result = locationArray.map(({Id}) => staticString + Id).join("");
    
    // or
    // result = staticString + locationArray.map(({Id}) => Id).join(staticString);
    
    console.log(result);

    另外,第一个staticString 也可以更改为"?myId=",因为这看起来像查询参数。

    【讨论】: