Lodash'ta eşleşen öğeyi değiştirmek için bir işlev var mı

Bir JavaScript koleksiyonundaki bir öğeyi değiştirmek için Lodash'ta daha basit bir yöntem olup olmadığını merak ediyorum. (Olası kopya ama oradaki cevabı anlamadım :)

Belgelerine baktım ama hiçbir şey bulamadım

Benim kodum:

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);
});

Güncelleme: Değiştirmeye çalıştığım nesnenin birçok özelliği var.

{id: 1, Özellik1: ..., Özellik2: ... ve benzeri}

Çözüm:

Dfsq sayesinde, ancak lodash içinde gayet iyi çalışan ve oldukça düzgün görünen uygun bir çözüm buldum ve birçok yerde bu gereksinime sahip olduğum için onu da bir mixin'e koydum. 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));

Daha Hızlı Çözüm @dfsq tarafından belirtildiği gibi, takip etmek çok daha hızlı

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);
    }
};

Sizin durumunuzda yapmanız gereken tek şey, dizideki nesneyi bulmak ve Array.prototype.splice()yöntemi kullanmaktır , buradan daha fazla ayrıntı okuyun :

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>

Görünüşe göre en basit çözüm ES6'ları .mapveya lodash'ları kullanmak olacaktır _.map:

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;
});

Bu, orijinal diziyi değiştirmekten kaçınmak gibi güzel bir etkiye sahiptir.

[ES6] Bu kod benim için çalışıyor.

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

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);
}

Şimdi tüm yöntemler için performansı test edelim:

// 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>

Aynı sonucu elde etmek için findIndex ve pick'i de kullanabilirsiniz:

  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);
  }

Zaman geçtikçe, veri mutasyonlarından kaçınmanız ve küçük, tek sorumluluk fonksiyonları yazmanız gereken daha işlevsel bir yaklaşımı benimsemelisiniz. ECMAScript 6 standardı ile, sağlanan ile JavaScript fonksiyonel programlama paradigmasını keyfini map, filterve reduceyöntemlerle. Başka bir lodash, alt çizgi ya da en temel şeyleri başka ne yapmak zorunda değilsiniz.

Aşağıda, bu sorunun farklı dil özellikleri kullanılarak nasıl çözülebileceğini göstermek için bu soruna önerilen bazı çözümleri ekledim:

ES6 haritasını kullanma:

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)

Yinelemeli sürüm - eşlemeye eşdeğer:

Yıkım ve dizi yayma gerektirir .

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)

Son dizinin sırası önemli olmadığında object, bir HashMap veri yapısı olarak kullanabilirsiniz . Zaten anahtarlı koleksiyonunuz varsa çok kullanışlıdır object- aksi takdirde önce temsilinizi değiştirmeniz gerekir.

Gerektirir nesne dinlenme yayılmasını , bilgisayarlı özellik adlarını ve 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)

Sadece bir mülkü değiştirmeye çalışıyorsanız, lodash _.findve _.setyeterli olmalıdır:

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

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

Yeni nesnenin ekleme noktasının önceki nesnenin diziniyle eşleşmesi gerekmiyorsa, bunu lodash ile yapmanın en basit yolu kullanarak _.rejectve sonra diziye yeni değerler göndermektir:

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" }]

Tek geçişte değiştirmek istediğiniz birden fazla değeriniz varsa, aşağıdakileri yapabilirsiniz (ES6 olmayan formatta yazılmıştır):

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" }]

Lodash birleştirme işlevini kullanarak, bir nesneye basit bir yükseltme gerçekleştirebilirsiniz. Dokümantasyon, bir eşleşme varsa, ilk diziyi kullanacağını belirtir. Güncellenen nesnenizi [] (dizi) içine sarın ve onu birleşim işlevinin ilk dizisi olarak koyun. Sadece eşleşen mantığınızı belirtin ve bulunursa onun yerini alacak ve değilse ekleyecektir.

Misal:

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)

Kötü bir varyant da değil)

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';

var arr= [{id: 1, name: "Person 1"}, {id:2, name:"Person 2"}];
var index = _.findIndex(arr, {id: 1});
arr[index] = {id: 100, name: 'xyz'}

Koleksiyonu değişmez bir şekilde değiştirmenin bir yolunu arıyorsanız (sorunuzu bulduğumda olduğu gibi), orijinal React kullanımından çatallanmış bir kütüphane olan değişmezlik yardımcısına bir göz atabilirsiniz . Sizin durumunuzda, bahsettiğiniz şeyi aşağıdakiler yoluyla başarırsınız:

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"}]

Lodash kullanmadan yapabilirsiniz.

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") 

Değişmez , aşağıdakiler için uygundur ReactJS:

varsayalım:

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

Güncellenen öğe ikinci öğedir ve adı şu şekilde değiştirilir Special Person:

const updatedItem = {id:2, name:"Special Person"};

İpucu : lodash'ın kullanışlı araçları var ama şimdi bunlardan bazıları Ecmascript6 + 'da var, bu yüzden sadecemapher ikisinde de var olan fonksiyonukullanıyorumlodashveecmascript6+:

const newArr = arr.map(item => item.id === 2 ? updatedItem : item);

Buna da rastladı ve basitçe bu şekilde yaptı.

const persons = [{id: 1, name: "Person 1"}, {id:2, name:"Person 2"}];
const updatedPerson = {id: 1, name: "new Person Name"}
const updatedPersons = persons.map(person => (
  person.id === updated.id
    ? updatedPerson
    : person
))

İsterseniz genelleştirebiliriz

const replaceWhere = (list, predicate, replacement) => {
  return list.map(item => predicate(item) ? replacement : item)
}

replaceWhere(persons, person => person.id === updatedPerson.id, updatedPerson)