it-swarm.com.de

gibt es eine Funktion in lodash, um übereinstimmende Elemente zu ersetzen

Ich frage mich, ob es in lodash eine einfachere Methode gibt, um einen Artikel in einer JavaScript-Sammlung zu ersetzen. (Mögliches Duplizieren aber ich habe die Antwort dort nicht verstanden :)

Ich sah mir ihre Unterlagen an, konnte aber nichts finden

Mein Code lautet:

var arr = [{id: 1, name: "Person 1"}, {id:2, name:"Person 2"}];
// Can following code be reduced to something like _.XX(arr, {id:1}, {id:1, name: "New Name"});
_.each(arr, function(a, idx){
  if(a.id === 1){
    arr[idx] = {id:1, name: "Person New Name"};
    return false;
  }
});

_.each(arr, function(a){
  document.write(a.name);
});

Update: Das Objekt, das ich ersetzen möchte, hat viele Eigenschaften wie

{id: 1, Prop1: ..., Prop2: ... und so weiter}

Lösung:

Dank an dfsq aber ich habe eine passende Lösung in lodash gefunden, die gut zu funktionieren scheint und ziemlich ordentlich ist, und ich habe es auch in ein Mixing gegeben, da ich diese Anforderung an vielen Stellen habe. JSBin

var update = function(arr, key, newval) {
  var match = _.find(arr, key);
  if(match)
    _.merge(match, newval);
  else
    arr.Push(newval);    
};

_.mixin({ '$update': update });

var arr = [{id: 1, name: "Person 1"}, {id:2, name:"Person 2"}];

_.$update(arr, {id:1}, {id:1, name: "New Val"});


document.write(JSON.stringify(arr));

Faster Solution Wie von @dfsq ausgeführt, ist das Folgen viel schneller

var upsert = function (arr, key, newval) {
    var match = _.find(arr, key);
    if(match){
        var index = _.indexOf(arr, _.find(arr, key));
        arr.splice(index, 1, newval);
    } else {
        arr.Push(newval);
    }
};
90
Vishal Seth

In Ihrem Fall müssen Sie nur das Objekt im Array finden und die Array.prototype.splice-Methode verwenden:

var arr = [{id: 1, name: "Person 1"}, {id:2, name:"Person 2"}];

// Find item index using _.findIndex (thanks @AJ Richardson for comment)
var index = _.findIndex(arr, {id: 1});

// Replace item at index using native splice
arr.splice(index, 1, {id: 100, name: 'New object.'});

// "console.log" result
document.write(JSON.stringify( arr ));
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

130
dfsq
function findAndReplace(arr, find, replace) {
  let i;
  for(i=0; i < arr.length && arr[i].id != find.id; i++) {}
  i < arr.length ? arr[i] = replace : arr.Push(replace);
}

Lassen Sie uns nun die Leistung für alle Methoden testen:

// TC's first approach
function first(arr, a, b) {
  _.each(arr, function (x, idx) {
    if (x.id === a.id) {
      arr[idx] = b;
      return false;
    }
  });
}

// solution with merge
function second(arr, a, b) {
  const match = _.find(arr, a);
  if (match) {
    _.merge(match, b);
  } else {
    arr.Push(b);
  }
}

// most voted solution
function third(arr, a, b) {
  const match = _.find(arr, a);
  if (match) {
    var index = _.indexOf(arr, _.find(arr, a));
    arr.splice(index, 1, b);
  } else {
    arr.Push(b);
  }
}

// my approach
function fourth(arr, a, b){
  let l;
  for(l=0; l < arr.length && arr[l].id != a.id; l++) {}
  l < arr.length ? arr[l] = b : arr.Push(b);
}

function test(fn, times, el) {
  const arr = [], size = 250;
  for (let i = 0; i < size; i++) {
    arr[i] = {id: i, name: `name_${i}`, test: "test"};
  }

  let start = Date.now();
  _.times(times, () => {
    const id = Math.round(Math.random() * size);
    const a = {id};
    const b = {id, name: `${id}_name`};
    fn(arr, a, b);
  });
  el.innerHTML = Date.now() - start;
}

test(first, 1e5, document.getElementById("first"));
test(second, 1e5, document.getElementById("second"));
test(third, 1e5, document.getElementById("third"));
test(fourth, 1e5, document.getElementById("fourth"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div>
  <ol>
    <li><b id="first"></b> ms [TC's first approach]</li>
    <li><b id="second"></b> ms [solution with merge]</li>
    <li><b id="third"></b> ms [most voted solution]</li>
    <li><b id="fourth"></b> ms [my approach]</li>
  </ol>
<div>

18
evilive

Anscheinend würde die einfachste Lösung den .map von ES6 oder den _.map von lodash verwenden:

var arr = [{id: 1, name: "Person 1"}, {id: 2, name: "Person 2"}];

// lodash
var newArr = _.map(arr, function(a) {
  return a.id === 1 ? {id: 1, name: "Person New Name"} : a;
});

// ES6
var newArr = arr.map(function(a) {
  return a.id === 1 ? {id: 1, name: "Person New Name"} : a;
});

Dies hat den schönen Effekt, dass das ursprüngliche Array nicht mutiert wird.

16
Spencer

[ES6] Dieser Code funktioniert für mich. 

let result = array.map(item => item.id === updatedItem.id ? updatedItem : item)
13
shebik

Sie können auch findIndex und pick verwenden, um dasselbe Ergebnis zu erzielen:

  var arr  = [{id: 1, name: "Person 1"}, {id:2, name:"Person 2"}];
  var data = {id: 2, name: 'Person 2 (updated)'};
  var index = _.findIndex(arr, _.pick(data, 'id'));
  if( index !== -1) {
    arr.splice(index, 1, data);
  } else {
    arr.Push(data);
  }
9
JVitela

Im Laufe der Zeit sollten Sie einen funktionaleren Ansatz verfolgen, bei dem Sie Datenmutationen vermeiden und kleine Einzelverantwortungsfunktionen schreiben sollten. Mit dem ECMAScript 6-Standard können Sie mit den bereitgestellten Methoden map, filter und reduce ein funktionales Programmierungsparadigma in JavaScript nutzen. Sie brauchen keine weitere Lodash, Unterstrich oder was sonst noch grundlegende Dinge zu tun. 

Nachfolgend habe ich einige Lösungsvorschläge zu diesem Problem gegeben, um zu zeigen, wie dieses Problem mit verschiedenen Sprachfunktionen gelöst werden kann: 

Verwenden der ES6-Karte:

const replace = predicate => replacement => element =>
  predicate(element) ? replacement : element
 
const arr = [ { id: 1, name: "Person 1" }, { id:2, name:"Person 2" } ];
const predicate = element => element.id === 1
const replacement = { id: 100, name: 'New object.' }

const result = arr.map(replace (predicate) (replacement))
console.log(result)


Rekursive Version - Entsprechung des Mappings:

Benötigt destructuring und array spread.

const replace = predicate => replacement =>
{
  const traverse = ([head, ...tail]) =>
    head
    ? [predicate(head) ? replacement : head, ...tail]
    : []
  return traverse
}
 
const arr = [ { id: 1, name: "Person 1" }, { id:2, name:"Person 2" } ];
const predicate = element => element.id === 1
const replacement = { id: 100, name: 'New object.' }

const result = replace (predicate) (replacement) (arr)
console.log(result)


Wenn die Reihenfolge des endgültigen Arrays nicht wichtig ist, können Sie eine object als HashMap - Datenstruktur verwenden. Sehr praktisch, wenn Sie die Sammlung bereits als object gesammelt haben - ansonsten müssen Sie zuerst Ihre Darstellung ändern.

Requires object rest spread , berechnete Eigenschaftsnamen und Object.entries.

const replace = key => ({id, ...values}) => hashMap =>
({
  ...hashMap,       //original HashMap
  [key]: undefined, //delete the replaced value
  [id]: values      //assign replacement
})

// HashMap <-> array conversion
const toHashMapById = array =>
  array.reduce(
    (acc, { id, ...values }) => 
    ({ ...acc, [id]: values })
  , {})
  
const toArrayById = hashMap =>
  Object.entries(hashMap)
  .filter( // filter out undefined values
    ([_, value]) => value 
  ) 
  .map(
    ([id, values]) => ({ id, ...values })
  )

const arr = [ { id: 1, name: "Person 1" }, { id:2, name:"Person 2" } ];
const replaceKey = 1
const replacement = { id: 100, name: 'New object.' }

// Create a HashMap from the array, treating id properties as keys
const hashMap = toHashMapById(arr)
console.log(hashMap)

// Result of replacement - notice an undefined value for replaced key
const resultHashMap = replace (replaceKey) (replacement) (hashMap)
console.log(resultHashMap)

// Final result of conversion from the HashMap to an array
const result = toArrayById (resultHashMap)
console.log(result)

Sie können dies auch ohne lodash tun.

let arr = [{id: 1, name: "Person 1"}, {id: 2, name: "Person 2"}];
let newObj = {id: 1, name: "new Person"}

/*Add new prototype function on Array class*/
Array.prototype._replaceObj = function(newObj, key) {
  return this.map(obj => (obj[key] === newObj[key] ? newObj : obj));
};

/*return [{id: 1, name: "new Person"}, {id: 2, name: "Person 2"}]*/
arr._replaceObj(newObj, "id") 
1
Sunny

Wenn der Einfügepunkt des neuen Objekts nicht mit dem Index des vorherigen Objekts übereinstimmen muss, können Sie dies mit lodash am einfachsten tun, indem Sie _.reject verwenden und dann neue Werte in das Array verschieben:

var arr = [
  { id: 1, name: "Person 1" }, 
  { id: 2, name: "Person 2" }
];

arr = _.reject(arr, { id: 1 });
arr.Push({ id: 1, name: "New Val" });

// result will be: [{ id: 2, name: "Person 2" }, { id: 1, name: "New Val" }]

Wenn Sie mehrere Werte in einem Durchgang ersetzen möchten, können Sie Folgendes tun (im Nicht-ES6-Format geschrieben):

var arr = [
  { id: 1, name: "Person 1" }, 
  { id: 2, name: "Person 2" }, 
  { id: 3, name: "Person 3" }
];

idsToReplace = [2, 3];
arr = _.reject(arr, function(o) { return idsToReplace.indexOf(o.id) > -1; });
arr.Push({ id: 3, name: "New Person 3" });
arr.Push({ id: 2, name: "New Person 2" });


// result will be: [{ id: 1, name: "Person 1" }, { id: 3, name: "New Person 3" }, { id: 2, name: "New Person 2" }]
1
richt

Mit der lodash unionWith-Funktion können Sie ein einfaches Aufstocken auf ein Objekt durchführen. In der Dokumentation wird angegeben, dass bei einer Übereinstimmung das erste Array verwendet wird. Wickeln Sie Ihr aktualisiertes Objekt in [] (Array) ein und fügen Sie es als erstes Array der Union-Funktion ein. Geben Sie einfach Ihre Übereinstimmungslogik an und wenn sie gefunden wird, ersetzt sie sie, und wenn nicht, wird sie hinzugefügt 

Beispiel:

let contacts = [
     {type: 'email', desc: 'work', primary: true, value: 'email prim'}, 
     {type: 'phone', desc: 'cell', primary: true, value:'phone prim'},
     {type: 'phone', desc: 'cell', primary: false,value:'phone secondary'},
     {type: 'email', desc: 'cell', primary: false,value:'email secondary'}
]

// Update contacts because found a match
_.unionWith([{type: 'email', desc: 'work', primary: true, value: 'email updated'}], contacts, (l, r) => l.type == r.type && l.primary == r.primary)

// Add to contacts - no match found
_.unionWith([{type: 'fax', desc: 'work', primary: true, value: 'fax added'}], contacts, (l, r) => l.type == r.type && l.primary == r.primary)
0
Jeffrey

Wenn Sie nur versuchen, eine Eigenschaft zu ersetzen, sollten lodash _.find und _.set ausreichen:

var arr = [{id: 1, name: "Person 1"}, {id: 2, name: "Person 2"}];

_.set(_.find(arr, {id: 1}), 'name', 'New Person');
0
Andrei Gavrilov

Auch keine schlechte Variante)

var arr = [{id: 1, name: "Person 1"}, {id: 2, name: "Person 2"}];

var id = 1; //id to find

arr[_.find(arr, {id: id})].name = 'New Person';
0
Ivan Pirus

Wenn Sie nach einer Möglichkeit suchen, die Sammlung unwiderruflich zu ändern (wie ich es vorhatte, als ich Ihre Frage fand), können Sie einen Blick auf Immutability-Helper werfen, eine Bibliothek, die von der ursprünglichen React-Funktion abgezweigt wurde. In Ihrem Fall würden Sie das, was Sie erwähnt haben, folgendermaßen erreichen:

var update = require('immutability-helper')
var arr = [{id: 1, name: "Person 1"}, {id:2, name:"Person 2"}]
var newArray = update(arr, { 0: { name: { $set: 'New Name' } } })
//=> [{id: 1, name: "New Name"}, {id:2, name:"Person 2"}]
0
Aaron_H