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

Question

I'm working on a react project where I need to filter an array of objects without mutating the original array

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

For example, I want to only filter the concerned object and its children.

This is the 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;
}

I tried that function from a stackoverflow question, but is there a way to use that same functionality without mutating the data. Thanks

Answer 1

Array .filter() already creates a new array, you just need to fix the part where the o.children is mutated. To do that you could use .map() and simply copy all fields using Object.assign() or object spread and just assign children as the result passed through the same filter function:

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

You can create a copy of your original array using a spread operator or Object.assign() function.

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

Otherwise as Aaron suggested, using filter() , map() , reduce() function always returns a new array without mutating your original array.