如何使用 ES6 在 javascript 中删除或添加项目到锯齿状数组？

Question

Say I have the following jagged array

var data = [
            ['a','b','c'],
            ['d','e',['f','g']],
            ['h','i','j']
          ];

and I want to be able to remove 'f' so that result is going to look like

var data1 = [
            ['a','b','c'],
            ['d','e',['g']],
            ['h','i','j']
          ];

Similarly I want to add 'f' after 'h' in the array above to give me

var data2 = [
            ['a','b','c'],
            ['d','e',['g']],
            ['h','f','i','j']
          ];

how can I achieve this in javascript or ES6? please note my jagged arrays can be multiple level deep the above just serves as an example.

so I need functions like data.remove('f') to result in data1 data1.addafter('h','f') to result in data2

I tried a recursive function like below but unable to crack it...

function arrmap([head, ...tail], fn) {   
    return tail.length === 0 ? [fn(head)] : [fn(head), ...map(tail, fn)];  
}

Answer 1

You need a recursive combination of map and filter. In this case, I would just go with a recursive function with a for...of loop:

 const fn = arr => { const r = [] for(const item of arr) { if(Array.isArray(item)) r.push(fn(item)) else if(item === 'h') r.push('h', 'f') else if(item !== 'f') r.push(item) } return r; } const data = [['a','b','c'],['d','e',['f','g']],['h','i','j']] const result = fn(data) console.log(result)

If you need a more generic approach, you can extract fn :

 const nestedMap = (arr, fn) => arr.reduce((r, item) => { const val = Array.isArray(item) ? [nestedMap(item, fn)] : fn(item) return val !== undefined ? r.concat(val) : r }, []) const data = [['a','b','c'],['d','e',['f','g']],['h','i','j']] const result = nestedMap(data, item => { if (item === 'h') return ['h', 'f'] if (item !== 'f') return item }) console.log(result)

Answer 2

I am not adding much to Ori's original solution, but, you can also utilize closures with the same generic approach Ori mentioned:

 const nestedMap = (fn) => (arr) => { const r = [] for(const item of arr) { if(Array.isArray(item)) r.push(nestedMap(fn)(item)) else { const val = fn(item) if (val) r.push(...val) } } return r; } const data = [['a','b','c'],['d','e',['f','g']],['h','i','j']] const addAfter = nestedMap((item) => { if (item === 'h') return ['h', 'f'] if (item !== 'f') return [item] }); const remove = nestedMap((item) => { if (item === 'f') return [] return [item]; }); console.log(addAfter(data)); console.log(remove(data));

Answer 3

We use object-scan for data processing tasks like this. It's very powerful once you wrap your head around how to use it. Here is how you'd solve your questions

 // const objectScan = require('object-scan'); const rm = (v, input) => objectScan(['**[*]'], { abort: true, rtn: 'bool', filterFn: ({ value, parent, property }) => { if (value === v) { parent.splice(property, 1); return true; } return false; } })(input); const ins = (after, v, input) => objectScan(['**[*]'], { abort: true, rtn: 'bool', filterFn: ({ value, parent, property }) => { if (value === after) { parent.splice(property + 1, 0, v); return true; } return false; } })(input); const data = [ ['a', 'b', 'c'], ['d', 'e', ['f', 'g']], ['h', 'i', 'j'] ]; console.log(rm('f', data)); // => true console.log(rm('f', data)); // already removed // => false console.log(data); // => [ [ 'a', 'b', 'c' ], [ 'd', 'e', [ 'g' ] ], [ 'h', 'i', 'j' ] ] console.log(ins('x', 'f', data)); // can not find 'x' // => false console.log(ins('h', 'f', data)); // => true console.log(data); // => [ [ 'a', 'b', 'c' ], [ 'd', 'e', [ 'g' ] ], [ 'h', 'f', 'i', 'j' ] ]

 .as-console-wrapper {max-height: 100% !important; top: 0}

 <script src="https://bundle.run/object-scan@13.8.0"></script>

Disclaimer : I'm the author of object-scan

Answer 4

As this was brought back up, and the current solutions seem more complex than necessary, here's an approach using flatMap for each:

 const removeVal = (val, xs) => xs .flatMap ((x) => x == val ? [] : Array.isArray(x) ? [removeVal (val, x)] : [x]) const addAfter = (prev, val, xs) => xs .flatMap ((x) => x == prev ? [x, val] : Array.isArray(x) ? [addAfter (prev, val, x)] : [x]) const data = [['a','b','c'], ['d','e',['f','g']], ['h','i','j']] const data1 = removeVal ('f', data) const data2 = addAfter ('h', 'f', data1) console .log ('original', data) console .log ('after removal', data1) console .log ('after add', data2) console .log ('original', data) // unchanged

 .as-console-wrapper {max-height: 100% !important; top: 0}

As demonstrated, these do not change your input structure, but create parallel ones with the changes applied.

Note that these remove every 'f' and adds one after every 'h' . This shouldn't be a problem given the stated requirements, but it could be an issue in some circumstances.

OriDrori talked about a combination of map and filter . flatMap often makes that combination unnecessary. It can be a pretty powerful tool.