일치 항목을 대체하는 기능이 lodash에 있습니까?

lodash에 JavaScript 컬렉션의 항목을 대체하는 더 간단한 방법이 있는지 궁금합니다. (가능한 중복 이지만 거기에 대한 답변을 이해하지 못했습니다 :)

나는 그들의 문서를 보았지만 아무것도 찾을 수 없었다

내 코드는 다음과 같습니다

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

업데이트 : 교체하려는 객체에는 다음과 같은 많은 속성이 있습니다.

{id : 1, Prop1 : ..., Prop2 : ... 등}

해결책:

dfsq 덕분에 lodash 내에서 제대로 작동하는 것처럼 보이고 꽤 깔끔한 적절한 솔루션을 찾았 으며이 요구 사항을 여러 곳에서 보냈으므로 믹스 인에 넣었습니다. 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));

더 빠른 솔루션 @dfsq에서 지적했듯이 다음은 더 빠릅니다.

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

귀하의 경우 배열에서 객체를 찾고 Array.prototype.splice()메소드를 사용 하기 만하면 됩니다 . 자세한 내용은 여기를 참조 하십시오 .

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>

가장 간단한 솔루션은 ES6 .map또는 lodash 를 사용하는 것처럼 보입니다 _.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;
});

이것은 원래 배열을 변경하지 않는 좋은 효과가 있습니다.

[ES6] 이 코드는 저에게 효과적입니다.

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

이제 모든 방법에 대한 성능을 테스트 해 보겠습니다.

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

findIndex 및 pick을 사용하여 동일한 결과를 얻을 수도 있습니다.

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

시간이 지남에 따라 데이터 변이를 피하고 작은 단일 책임 기능을 작성하는보다 기능적인 접근 방식을 수용해야합니다. ECMA 스크립트 (6) 표준을 사용하면 제공과 자바 스크립트에서 함수형 프로그래밍 패러다임을 즐길 수있는 map, filter및 reduce방법. 다른 기본, 밑줄 또는 가장 기본적인 작업을 수행 할 다른 작업이 필요하지 않습니다.

아래에는 다른 언어 기능을 사용하여이 문제를 해결하는 방법을 보여주기 위해이 문제에 대한 제안 된 솔루션이 포함되어 있습니다.

ES6 맵 사용 :

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)

재귀 버전-매핑과 동일합니다.

파괴 및 배열 확산이 필요합니다 .

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)

최종 배열의 순서가 중요하지 않은 object경우 HashMap 데이터 구조 로 사용할 수 있습니다 . 이미 키 컬렉션을 키로 사용하는 경우 매우 편리합니다. object그렇지 않으면 먼저 표현을 변경해야합니다.

객체 레스트 스프레드 , 계산 된 속성 이름 및 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)

당신은 단지 하나의 속성, lodash를 교체하려는 경우 _.find와 _.set충분해야한다 :

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

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

새 객체의 삽입 점이 이전 객체의 색인과 일치하지 않아도되는 경우 lodash를 사용하여이를 수행하는 가장 간단한 방법은 _.reject새 값을 사용하여 배열에 넣는 것입니다.

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

한 번에 여러 값을 바꾸려는 경우 다음을 수행 할 수 있습니다 (ES6 이외의 형식으로 작성).

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 union 사용 함수를 사용하면 객체에 대한 간단한 upsert를 수행 할 수 있습니다. 설명서에는 일치하는 항목이 있으면 첫 번째 배열이 사용된다고 명시되어 있습니다. 업데이트 된 객체를 [] (배열)로 감싸서 공용 함수의 첫 번째 배열로 둡니다. 일치하는 논리를 지정하고 발견되면이를 대체하고 추가하지 않는 경우 논리를 추가하십시오.

예:

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)

나쁜 변형도 아닙니다)

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

컬렉션을 불변으로 변경하는 방법을 찾고 있다면 (질문을 찾은 것처럼) 원래 React 유틸리티에서 가져온 라이브러리 인 불변성 도우미를 살펴볼 수 있습니다 . 귀하의 경우 다음을 통해 언급 한 것을 달성 할 수 있습니다.

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를 사용하지 않고 할 수 있습니다.

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

불변 , 적합 ReactJS:

취하다:

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

업데이트 된 항목이 두 번째이고 이름이 다음으로 변경됩니다 Special Person.

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

힌트 : lodash 에는 유용한 도구가 있지만 이제는 Ecmascript6 +에 일부 도구가 있으므로및map에 존재하는함수를사용합니다.lodashecmascript6+

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

이뿐 만 아니라 그것을 가로 질러 간단하게 그렇게했습니다.

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

원한다면 일반화 할 수 있습니다

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

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