从嵌套的对象数组优化数组构建

optimize array building from nested arrays of objects

本文关键字：数组 优化 构建 对象 嵌套      更新时间：2023-09-26

我想在Javascript中优化从对象数组中提取属性值，每个对象包含其他嵌套的对象数组。

我不太确定如何用语言来解释它，所以这里有一些代码来解释我正在尝试优化的内容:

// test case
var first = [
    { second: [ { id:  1}, { id:  2}, { id:  3} ] },
    { second: [ { id:  4}, { id:  5}, { id:  6} ] },
    { second: [ { id:  7}, { id:  8}, { id:  9} ] },
    { second: [ { id: 10}, { id: 11}, { id: 12} ] }
];
// where the id values will be stored
var arrIDs = [];
// extracting the id values
for (var i=0; i<first.length; i++){
    for (var j=0; j<first[j].second.length; j++){
        // I want to avoid all these push() calls
        arrIDs.push(first[j].second[j].id);
    }
}

这就是我想要达到的最终结果:

arrIDs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

我可能需要最多3或4个嵌套关卡，但如果无法优化更多，我可能会使用不同的结构将其减少到2个关卡。

我最想优化的实际上是for循环中的所有Array().push()调用。

有人知道这样做的好方法吗?

编辑

我忘了提到，我需要在IE8是我们拥有的最佳选择的环境中使用它。

对于您的数据结构，您可以使用reduce()和map()。

var first = [
  { second: [ { id:  1}, { id:  2}, { id:  3} ] },
  { second: [ { id:  4}, { id:  5}, { id:  6} ] },
  { second: [ { id:  7}, { id:  6}, { id:  9} ] },
  { second: [ { id: 10}, { id: 11}, { id: 12} ] }
];
var result = first.reduce(function(r, o) {
  r = r.concat(o.second.map(function(e) {
    return e.id;
  }))
  return r;
}, []);
console.log(result)

ES6版本

var first = [
  { second: [ { id:  1}, { id:  2}, { id:  3} ] },
  { second: [ { id:  4}, { id:  5}, { id:  6} ] },
  { second: [ { id:  7}, { id:  6}, { id:  9} ] },
  { second: [ { id: 10}, { id: 11}, { id: 12} ] }
];
var result = first.reduce((r, o) => r.concat(o.second.map(e => e.id)) , []);
console.log(result)

您可以使用这个递归ES6函数。它适用于任何级别，您可以向它传递一个数组，普通对象或其他任何东西(在后一种情况下，您将得到一个空数组作为结果):

function getAll(obj, key) {
    return obj !== Object(obj) ? [] 
        : Object.keys(obj).reduce ( (acc, k) => 
            acc.concat(k == key ? obj[k] : getAll(obj[k], key)), [] ); 
}
// sample data with different levels and mix of array / object alterations
var first = [
  { a: 2, id:  1}, { second: [ { id:  2}, { id:  3} ] },
  { second: [ { id:  4}, { id:  5}, { id:  6} ] },
  { second: [ { id:  7}, { third: {id:  6}}, { id:  9} ] },
  { second: [ { id: 10}, { id: 11}, { id: 12} ] }
];
var result = getAll(first, 'id');
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

IE8兼容性:

function getAll(obj, key) {
    if (typeof obj != 'object' || obj == null) return [];
    var acc = [];
    for (var k in obj) {
        acc = acc.concat( k == key ? obj[k] : getAll(obj[k], key) );
    }
    return acc; 
}
// sample data with different levels and mix of array / object alterations
var first = [
  { a: 2, id:  1}, { second: [ { id:  2}, { id:  3} ] },
  { second: [ { id:  4}, { id:  5}, { id:  6} ] },
  { second: [ { id:  7}, { third: {id:  6}}, { id:  9} ] },
  { second: [ { id: 10}, { id: 11}, { id: 12} ] }
];
var result = getAll(first, 'id');
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

您可以使用迭代和递归提案。此方法适用于任何级别。

function getValues(o, key) {
    return o !== null && typeof o === 'object' && Object.keys(o).reduce(function (r, k) {
        return r.concat(k === key ? o[k] : getValues(o[k], key));
    }, []) || [];
}
var first = [{ second: [{ id: 1 }, { id: 2 }, { id: 3 }] }, { second: [{ id: 4 }, { id: 5 }, { id: 6 }] }, { second: [{ id: 7 }, { id: 6 }, { id: 9 }] }, { second: [{ id: 10 }, { id: 11 }, { id: 12 }] }];
console.log(getValues(first, 'id'));
.as-console-wrapper { max-height: 100% !important; top: 0; }

相关文章：