Javascript循环遍历对象数组并获取两个值并插入到新的对象数组中

Question

我有一个对象数组，如下所示：

rows [
{ id: 3,
 title: "sometitle", 
 catid: 55, 
 img: "file" },
{ id: 4,
 title: "sometitle", 
 catid: 55, 
 img: "file" },
{ id: 5,
 title: "sometitle", 
 catid: 55, 
 img: "file" },
]

我现在要做的是循环遍历对象数组并从每个对象中获取两个值（id和img）并将其插入到一个新的对象数组中，因此最终看起来像这样：

newArr [
{ id: 3,
 img: "file" },
{ id: 4,
 img: "file" },
{ id: 5,
 img: "file" },
]

Answer 1

您可以使用map轻松完成此操作。

var rows = [
{ id: 3,
 title: "sometitle", 
 catid: 55, 
 img: "file" },
{ id: 4,
 title: "sometitle", 
 catid: 55, 
 img: "file" },
{ id: 5,
 title: "sometitle", 
 catid: 55, 
 img: "file" },
];

var newArr = rows.map(function(elem) {
    return {
        id: elem.id,
        img: elem.img
    };
});

console.log('newArr', newArr);

Answer 2

通过传递map函数来使用callback方法。

let rows = [ { id: 3, title: "sometitle", catid: 55, img: "file" }, { id: 4, title: "sometitle", catid: 55, img: "file" }, { id: 5, title: "sometitle", catid: 55, img: "file" }]

console.log(rows.map(function({id, img}){
  return {id, img};
}));

或使用arrow函数。

let rows = [ { id: 3, title: "sometitle", catid: 55, img: "file" }, { id: 4, title: "sometitle", catid: 55, img: "file" }, { id: 5, title: "sometitle", catid: 55, img: "file" }]

console.log(rows.map(({ id, img }) => ({ id, img })));

Answer 3

Array.prototype.map的经典

const rows = [{
    id: 3,
    title: "sometitle",
    catid: 55,
    img: "file"
  },
  {
    id: 4,
    title: "sometitle",
    catid: 55,
    img: "file"
  },
  {
    id: 5,
    title: "sometitle",
    catid: 55,
    img: "file"
  },
];

const newArr = rows.map(({id,img}) => ({id,img}));

console.log(newArr);

Answer 4

使用map的ES6方法：

const rows = [
  { id: 3, title: "sometitle", catid: 55, img: "file" },
  { id: 4, title: "sometitle", catid: 55, img: "file" },
  { id: 5, title: "sometitle", catid: 55, img: "file" },
];

const out = rows.map(({ id, img }) => ({ id, img }));

console.log(out);

Answer 5

使用此代码： -

let rows = [
{ id: 3, title: "sometitle", catid: 55, img: "file" },
{ id: 4, title: "sometitle", catid: 55, img: "file" },
{ id: 5, title: "sometitle", catid: 55, img: "file" }]

let newRows = [];

rows.forEach(function(value,index){
      let obj = {};
      obj.id = value['id'],
      obj.img = value['img']
      newRows.push(obj);
});

Answer 6

这不是一个真正的答案，使用别人的答案：但是：为了好玩，我对所提出的解决方案进行了一些粗略的测试（我使用了一台带有Firefox的超级老电脑，你的结果可能会有所不同

只是为了好玩，利用我从其他问题中提取的StackOverflow :)添加了对东西的引用。

编辑在测试8中添加了已接受的答案

我的结果：运行您自己的测试，多个时间的结果有所不同

test0 forEach 78.75
test1 map arrow 82.6
test2 map function 78.85
test3 negative for compact 12.6
test4 for 13.3
test5 cached len for 61.55
test6 negative for long 10
test7 negative while 12.5
test8 map accepted 91.35 // the accepted answer, sometimes it is faster

Second execution: note how it changes **RUN YOUR OWN TESTS**

test0 forEach 155.95  // nearly always the looser
test1 map arrow 13.25
test2 map function 14.9
test3 negative for compact 7  // sometimes wins!
test4 for 18.7
test5 cached len for 7.8
test6 negative for long 61.65
test7 negative while 23.4
test8 map accepted 10.15  // odd it is fast sometimes, sometimes not

Before I added the last test: (so comments are relevant)

  test  name    avg milliseconds on 100,000
  test0 forEach 279.15
  test1 map arrow 21.25
  test2 map function 10.1
  test3 negative for compact 22.6
  test4 for 15.55
  test5 cached len for 18.75
  test6 negative for long 185.7
  test7 negative while 35.05

// two executions 100 times instead of 20

/* test 100 times
test0 forEach 205.56
test1 map arrow 20.35
test2 map function 20.72
test3 negative for compact 27.07
test4 for 40.75
test5 cached len for 18.39
test6 negative for long 10.37
test7 negative while 12.93
test8 map accepted 9.53

100 times again
    
test0 forEach 151.19
test1 map arrow 18.22
test2 map function 40.27
test3 negative for compact 87.53
test4 for 48.18
test5 cached len for 17.14
test6 negative for long 14.06
test7 negative while 16.53
test8 map accepted 13.41

Excerpt of code :test2

`var newRows2 = rows.map(function({id,img}) {return {id,img};});`

我的杂乱测试：

// create an array we can append to
const rows = [{
    id: 3,
    title: "sometitle",
    catid: 55,
    img: "file"
  },
  {
    id: 4,
    title: "sometitle",
    catid: 55,
    img: "file"
  },
  {
    id: 5,
    title: "sometitle",
    catid: 55,
    img: "file"
  }
];
// hold some results
var testresult = [];

// add some objects to our array, bulk it up
for (var a = 0; a < 100000; a++) {
  rows.push({
    id: a,
    title: "sometitle",
    catid: a,
    img: "file"
  });
}
// go grab a group by from here: https://stackoverflow.com/a/38327540/125981
function groupBy6(list, keyGetter) {
  const map = new Map();
  list.forEach((item) => {
    const key = keyGetter(item);
    const collection = map.get(key);
    if (!collection) {
      map.set(key, [item]);
    } else {
      collection.push(item);
    }
  });
  return map;
}
// just to make it simple, push in a result
function testResult(test, name, value1, value2) {
  testresult.push({
    test: test,
    value: value2 - value1,
    name: name
  });
}
// go grab a sum function from here: https://stackoverflow.com/a/23249575/125981 (in the comments)
var sum = function(items, prop) {
  if (items == null) {
    return 0;
  }
  return items.reduce(function(a, b) {
    return b[prop] == null ? a : a + b[prop];
  }, 0);
};
// some super ugly tests :)
function test() {
  // test
  var t0 = performance.now();
  newRows0 = [];
  rows.forEach(function(value, index) {
    let obj = {};
    obj.id = value['id'];
    obj.img = value['img'];
    newRows0.push(obj);
  });
  var t1 = performance.now();
  testResult("test0", "forEach", t0, t1);

  var t2 = performance.now();
  const newRows1 = rows.map(({
    id,
    img
  }) => ({
    id,
    img
  }));
  var t3 = performance.now();
  testResult("test1", "map arrow", t2, t3);

  var t4 = performance.now();
  var newRows2 = rows.map(function({
    id,
    img
  }) {
    return {
      id,
      img
    };
  });
  var t5 = performance.now();
  testResult("test2", "map function", t4, t5);

  var t6 = performance.now();
  newRows3 = [];
  for (var i = rows.length; i--;) {
    newRows3.push({
      "id": rows[i]['id'],
      "img": rows[i]['img']
    });
  }
  var t7 = performance.now();
  testResult("test3", "negative for compact", t6, t7);

  var t8 = performance.now();
  newRows4 = [];
  for (var i = 0; i < rows.length; i++) {
    newRows4.push({
      "id": rows[i]['id'],
      "img": rows[i]['img']
    });
  }
  var t9 = performance.now();
  testResult("test4", "for", t8, t9);

  var t10 = performance.now();
  newRows5 = [];
  var len = rows.length;
  for (var i = 0; i < len; i++) {
    newRows5.push({
      "id": rows[i]['id'],
      "img": rows[i]['img']
    });
  }
  var t11 = performance.now();
  testResult("test5", "cached len for", t10, t11);

  var t12 = performance.now();
  newRows6 = [];
  for (var i = rows.length - 1; i >= 0; i--) {
    newRows6.push({
      "id": rows[i]['id'],
      "img": rows[i]['img']
    });
  }
  var t13 = performance.now();
  testResult("test6", "negative for long", t12, t13);

  var t14 = performance.now();
  newRows7 = [];
  var i = rows.length;
  while (i--) {
    newRows7.push({
      "id": rows[i]['id'],
      "img": rows[i]['img']
    });
  }
  var t15 = performance.now();
  testResult("test7", "negative while", t14, t15);

  var t16 = performance.now();
  var test8 = rows.map(function(elem) {
    return {
      id: elem.id,
      img: elem.img
    };
  });
  var t17 = performance.now();
  testResult("test8", "map accepted", t16, t17);
}
// run the test 20 times, not super great statistically speaking
for (var t = 0; t < 20; t++) {
  test();
}
// get each group and sum them up in an ugly way
const groupeds = groupBy6(testresult, tst => tst.test);
var groupy = Array.from(groupeds);
groupy.forEach(function(entry) {
  var s = sum(entry[1], "value");
  var sn = +(s / entry[1].length).toFixed(2);
  console.log(entry[0], entry[1][0].name, sn);
});

Answer 7

这不是Java，但行在哪里。你不是在制作一条线，你制作一个数组，所以如果你在制作一条线，你也可以做变量。

试试这个

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