Question

我正在尝试使用像这样的对象数组

[
   { url: 'some url here', clickHandler: 'click handler function'},
   { url: 'some other url here', clickHandler: 'other clickHandler function'}
]

我想拉开对象的url并通过一个返回修改后的url的函数运行每个url并返回一个这样的数组

[
   { url: 'some modified url here', clickHandler: 'click handler function'},
   { url: 'some other modified url here', clickHandler: 'other clickHandler function'}
]

我知道我想使用.map，因为我可以遍历对象数组，但我不确定如何创建新数组以具有相同的结构，但只需根据需要修改URL。该函数只是返回修改后的url。

更新：我不想使用forEach，因为原始数组需要保持不变。

Answer 1

简单的伎俩是：

var newArray = oldArray.map(function(el) {
    el.url = 'new url';   // change url

    return el;          // return whole modified element
});

Answer 2

只需返回映射数组对象，只需调用要更改网址的函数即可：

var output = input.map(obj => {
  return {
    url: changeUrl(obj.url),
    clickHandler: obj.clickHandler
  }
});

<强> DEMO

Answer 3

使用.map()动态构建一个新对象并将其返回 -

let arr = [

  {
    url: "http://www.foo.com",
    func: () => console.log("Hi")
  },
  {
    url: "http://www.bar.com",
    func: () => console.log("Hi")
  }
];


let modifiedArr = arr.map(e => ({
  url: e['url'] + '/baz',
  func: e['func']
}));

console.log(modifiedArr);

Answer 4

我会将.map()与Object.assign()一起使用，这样您就不需要对所有属性进行硬编码。

＆＃13;

var data = [
   { url: 'some url here', clickHandler: 'click handler function'},
   { url: 'some other url here', clickHandler: 'other clickHandler function'}
];

var result = data.map(obj =>
  Object.assign({}, obj, {url: obj.url + " MODIFIED"})
);

console.log(result);

＆＃13;

现在，如果对象结构发生变化，您就不需要更新代码了。

如何使用Javascript

4 个答案: