Question

我正在开展一个反应项目，我需要在不改变原始数组的情况下过滤对象数组

const array = [{
	name: 'bar',
  children: [{
  	name: 'foo',
    children: [{
    	name: 'baz123',
    }, {
    	name: 'baz',
    }]
  }]
}, {
	name: 'shallowKey'
}, {
	name: 'abc'
}];

例如，我想只过滤相关对象及其子对象。

这是jsfiddle

function filterData(data) {
  var r = data.filter(function(o) {
    if (o.children) o.children = filterData(o.children);
    return o.name.length === 3;
  })
  return r;
}

我从stackoverflow问题尝试了这个函数，但有没有办法在不改变数据的情况下使用相同的功能。感谢

Answer 1

数组.filter()已经创建了一个新数组，您只需要修复o.children变异的部分。为此，您可以使用.map()，只需使用Object.assign()或object spread复制所有字段，只需指定children作为结果通过相同的过滤函数：

function filterData(data) {
  return data
    .filter(obj => obj.name.length === 3) // filter array first
    .map(obj => ({ // then re-map to new objects
      ...obj, // copy shallow fields
      children: obj.children && filterData(obj.children) // filter children
    }));
}

Answer 2

如果您没有在对象中包含任何原型或函数，则复制的一种简单方法是将原始字符串化并将其解析回对象

var r= JSON.parse(JSON.stringify(data)).filter(...

Answer 3

您可以使用扩展运算符或Object.assign()函数创建原始数组的副本。

const arrayCopy= [...array] //spread operator
const arrayCopy = Object.assign({}, array);

否则，正如Aaron建议的那样，使用filter()，map()，reduce()函数始终会返回一个新数组而不会改变原始数组。

过滤javascript树而不改变原始数组

3 个答案: