代码之家 › 专栏 › 技术社区 › Razvan Zamfir

如何将一个JavaScript对象数组转换为只有一个循环的URL字符串?

foreach object javascript

Razvan Zamfir · 技术社区 · 3 年前

我正试图将一组JavaScript对象转换为带有params的URL字符串,如下所示:

const objects = [{
    firstName: "John",
    lastName: "Doe",
    age: 46
  },
  {
    country: "France",
    lastName: "Paris"
  }
]

let entry_arr = [];

objects.forEach(obj => {
  Object.entries(obj).forEach(entry => {
    entry_arr.push(entry.join('='));
  });
});

let entry_str = entry_arr.join('&');

console.log(entry_str);

从表面上看,上面的代码是有效的。有一个问题虽然

这个问题

正如你所看到的,我有两个嵌套 forEach 循环。为了获得更好的性能,我希望我知道如何避免这种嵌套,而只使用一个 对于每个 环

我怎样才能在一个循环中获得相同的结果?

2 回复 | 直到 3 年前

Juljo Shahini 3 年前

将数组中的每个对象合并到一个主对象中是我能想到的唯一解决方案。(我以为姓:paris是个拼写错误)

const objects = [{
    firstName: "John",
    lastName: "Doe",
    age: 46
  },
  {
    country: "France",
    city: "Paris"
  }
]

const obj = objects.reduce((acc, obj) => Object.assign(acc, obj), {});

const entry_str = Object.entries(obj).map(entry => 
    entry.join('=')
  ).join('&');

console.log(entry_str);

Fiodar Shurankou 3 年前

Nina stil提供的答案使用嵌套循环,而不是使用forEach,而是使用map。

对于特殊字符处理,我强烈建议使用 URLSearchParams 班

我建议使用reduce将对象数组连接到一个对象中,并导入 URLSearchParams

const objects = [
    { firstName: "John", lastName: "Doe", age: 46 }, { country: "France", lastName: "Paris" }];
let reduced = objects.reduce((acc, object) => Object.assign(acc, object))
let params = new URLSearchParams(reduced);

console.log(reduced);
console.log(params.toString());

Nina Scholz 3 年前

至少,您需要使用连接键和值映射条目,并连接嵌套的条目和外部数组。

const
    objects = [{ firstName: "John", lastName: "Doe", age: 46 }, { country: "France", lastName: "Paris" }],
    result = objects
        .map(object => Object
            .entries(object)
            .map(entry => entry.join('='))
            .join('&')
        )
        .join('&');

console.log(result);

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前