基于另一个数组的es6过滤器数组

Question

filtering arrays has been asked here a lot but none of the questions and answers i found took in consideration the 2 conditions i need:
1. not mutating the objects.
2. using es6 (ecmascript2015) and above.
3. get a new array that holds the overriten objects and values.

i actually have an answer to one part of my question and that is how to filter but it feels like a hack rather than a real solution, the second part is how to get the full original array with the changes from the second array but without mutating the objects.

This is my code, as you can see i'm assigning the {dirty:true} explicitly rather than pass the object from the array it self:

    const docPositions = [
    {
      active : false,
      dirty : false,
      key : "somekey2"
    },
    {
      active : false,
      dirty : false,
      key : "somekey1"
    },
    {
      active : false,
      dirty : false,
      key : "somekey4"
    },
    {
      active : false,
      dirty : false,
      key : "somekey3"
    }
  ]
const dirtyPositions = [
  {
      active : false,
      dirty : true,
      key : "somekey1"
  },
    {
      active : false,
      dirty : true,
      key : "somekey3"
  } 
]

let result = docPositions.filter(x=> dirtyPositions.some(y=>y.key == x.key))
                         .map(o=> Object.assign({},o,{dirty:true}));

console.log(result);

result:

Array [
  Object {
    "active": false,
    "dirty": true,
    "key": "somekey1"
  },
  Object {
    "active": false,
    "dirty": true,
    "key": "somekey3"
  }
]

desired result:

 Array   [
    {
      active : false,
      dirty : false,
      key : "somekey2"
    },
    {
      active : false,
      dirty : true,
      key : "somekey1"
    },
    {
      active : false,
      dirty : false,
      key : "somekey4"
    },
    {
      active : false,
      dirty : true,
      key : "somekey3"
    }
  ]

Answer 1

You could do it by using find on the dirty positions, which either returns undefined or the dirty object. If you put that as third argument to Object.assign together with the matching docPosition in second position, you will get the desired result:

const result = docPositions.map(
    x => Object.assign({}, x, dirtyPositions.find(y=>y.key == x.key)));

 const docPositions = [ { active : false, dirty : false, key : "somekey2" }, { active : false, dirty : false, key : "somekey1" }, { active : false, dirty : false, key : "somekey4" }, { active : false, dirty : false, key : "somekey3" } ] const dirtyPositions = [ { active : false, dirty : true, key : "somekey1" }, { active : false, dirty : true, key : "somekey3" } ] const result = docPositions.map( x => Object.assign({}, x, dirtyPositions.find(y=>y.key == x.key))); console.log(result); 

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

For large arrays...

The above has a time complexity of O(n²) , so when both arrays are large, then performing .find() on each .map() iteration may become too costly. In that case it is better to first turn the dirtyPositions array into a Map . To keep with the functional programming style, you could pass that Map as the context to .map() so it is available as this . For that you need to use the standard function notation though:

const result = docPositions.map(function (x) { 
    return Object.assign({}, x, this.get(x.key));
}, new Map(dirtyPositions.map(y=>[y.key, y])));

This will run in O(n) , as the get() operation is in most implementations near-constant in time.

 const docPositions = [ { active : false, dirty : false, key : "somekey2" }, { active : false, dirty : false, key : "somekey1" }, { active : false, dirty : false, key : "somekey4" }, { active : false, dirty : false, key : "somekey3" } ] const dirtyPositions = [ { active : false, dirty : true, key : "somekey1" }, { active : false, dirty : true, key : "somekey3" } ] const result = docPositions.map(function (x) { return Object.assign({}, x, this.get(x.key)); }, new Map(dirtyPositions.map(y=>[y.key, y]))); console.log(result); 

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

Note that the Map constructor can take an array of key/value pairs (also arrays). This new Map is passed as the optional thisArg to .map() so that it can be referenced to with this inside the callback.

Answer 2

This should match as an ES6 answer

 const docPositions = [ { active : false, dirty : false, key : "somekey2" }, { active : false, dirty : false, key : "somekey1" }, { active : false, dirty : false, key : "somekey4" }, { active : false, dirty : false, key : "somekey3" } ] const dirtyPositions = [ { active : false, dirty : true, key : "somekey1" }, { active : false, dirty : true, key : "somekey3" } ]; const dirtyKeys = dirtyPositions.map(x => x.key); var results = docPositions.map(x => { let index = dirtyKeys.indexOf(x.key); if (index === -1) return x; return dirtyPositions[index]; }) console.log(results);