lodash를 사용하여 목록에서 요소를 제거하는 방법은 무엇입니까?


166

다음과 같은 객체가 있습니다.

var obj = {
    "objectiveDetailId": 285,
    "objectiveId": 29,
    "number": 1,
    "text": "x",
    "subTopics": [{
        "subTopicId": 1,
        "number": 1
    }, {
        "subTopicId": 2,
        "number": 32
    }, {
        "subTopicId": 3,
        "number": 22
    }]
}
var stToDelete = 2;

나는 한 lodash다른 것들에 대한 내 응용 프로그램에 설치되어 있어야합니다. 사용할 수있는 효율적인 방법이 있나요 lodash: 항목 삭제 {"subTopicId":2, "number":32}로부터 obj객체는?

아니면 이것을 수행하는 자바 스크립트 방법이 있습니까?


1
splice( developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… )를 사용 하여 목록에서 항목을 제거 할 수 있습니다.
z33m

1
이 방법으로 배열 [1,4,5]에서 4를 제거 할 수 없으므로 제목이 변경되었습니다. 예, 배열을 해시 / 객체에서 구현할 수 있으며 아마도 그럴 수 있음을 이해하지만이 둘에는 미묘한 차이가 있습니다. 배열에서 제거하려면 다음을 사용 result = _.pull(arr, value) 하십시오. 목록에서 일치하는 모든 값을 제거합니다.
boatcoder

답변:


248

의견에서 lyyons가 지적 했듯이이 작업을 수행하는 관용적이고 독창적 인 방법은 다음 _.remove과 같이 사용하는 것입니다.

_.remove(obj.subTopics, {
    subTopicId: stToDelete
});

그 외에도 현재 요소를 제거해야하는지 여부를 결정하는 데 사용되는 술어 함수를 전달할 수 있습니다.

_.remove(obj.subTopics, function(currentObject) {
    return currentObject.subTopicId === stToDelete;
});

또는 이전 배열을 필터링하여 새 배열을 만들고 _.filter동일한 객체에 다음과 같이 할당 할 수 있습니다

obj.subTopics = _.filter(obj.subTopics, function(currentObject) {
    return currentObject.subTopicId !== stToDelete;
});

또는

obj.subTopics = _.filter(obj.subTopics, {subTopicId: stToKeep});

3
이 대답이 흔들리는 이유는 내가 원하는 바로 술어 함수를 사용할 수 있기 때문 입니다. 당신이 경우에 대한 인덱스,하지만 알고있는 경우 요소를 제거하면 사소한 하지 않는 인덱스를 알고 있습니까?
random_user_name

3
원래 배열을 변경하지 않으려면 _.filter에 대해 언급 할 가치가 있습니다 ....
random_user_name

@cale_b 감사합니다 :-) _.filter버전으로 답변을 업데이트했습니다 .
thefourtheye 2016 년

7
_.filter 술어가 true이면 @thefourtheye 는 요소를 리턴합니다. 구현은 유지하려는 요소 대신 원하지 않는 모든 요소를 ​​반환합니다.
Xeltor

5
@thefourtheye 는 동일한 술어를 사용하는 _.reject대신 _.filter사용해야합니다. 자세한 내용은 답변 을 확인 하십시오!
Xeltor

29

바닐라 JS 만 사용하십시오. splice요소를 제거하는 데 사용할 수 있습니다 .

obj.subTopics.splice(1, 1);

데모


3
사용자 요청Is there an efficient way to use _lodash to delete
semirturgay

7
@ 앤디 당신이 맞아요, 그러나 색인이 아직 알려지지 않았다면?
thefourtheye

3
배열을 변경하려면 splice ()가 가장 좋습니다. remove를 사용하면 새 배열이 반환되며이 배열을 다시 할당해야합니다.
omarjebari

배열의 인덱스로 배열에서 항목을 제거하려면 (이 방법으로 제거 작업을 수행하려는 경우이 인덱스가 있음) 스플 라이스 방법을 사용하는 것이 가장 효율적이고 쉬운 방법입니다 그것을하기 위해. 버그를 비교하고 코드를 더 복잡하고 취약하게 만들 필요가 없습니다.
TheCuBeMan

26

당신은 그것을 할 수 있습니다 _pull.

_.pull(obj["subTopics"] , {"subTopicId":2, "number":32});

참조를 확인하십시오


7
문서마다 비교에 엄격한 평등을_.pull 사용합니다 ( 예 : ===) . 두 개의 다른 평범한 물체는 결코 동등하게 ===(또는 ==그 문제에 의해) 비교되지 않습니다 . 따라서 위의 코드는 배열에서 요소를 제거하지 않습니다.
Mark Amery

1
그러나 배열에서 문자열로 작동하는 유일한 방법입니다. _.remove배열을 플러시합니다.
Yauheni Prakopchyk

3
나는 이것이 이것이 정답이라고 생각합니다. JS .filter는 일치하는 모든 요소를 ​​제거합니다. JS .splice에서는 인덱스를 알아야합니다. _.remove는 배열의 모든 요소를 ​​반복하므로 효율성이 떨어집니다. _.pull은 내가 원하는 것입니다 : _.pull (array, itemToRemove).
유다 가브리엘 히 망고

21

이제 _.reject 를 사용하면 보관해야 할 내용 대신 제거해야 할 대상을 기준으로 필터링 할 수 있습니다.

달리 _.pull거나 _.remove, 배열에 만 작업이 ._reject어떤 작업을한다 Collection

obj.subTopics = _.reject(obj.subTopics, (o) => {
  return o.number >= 32;
});

2

내가 아는 것처럼 네 가지 방법이 있습니다

const array = [{id:1,name:'Jim'},{id:2,name:'Parker'}];
const toDelete = 1;

첫번째:

_.reject(array, {id:toDelete})

두 번째는 :

_.remove(array, {id:toDelete})

이런 식으로 배열이 변경됩니다.

세번째는 :

_.differenceBy(array,[{id:toDelete}],'id')
// If you can get remove item 
// _.differenceWith(array,[removeItem])

마지막은 :

_.filter(array,({id})=>id!==toDelete)

나는 배우고있다 lodash

나중에 찾을 수 있도록 기록해 두십시오.


나는 찾고 있었다reject
Sampgun

2

@thefourtheye 답변 외에도 전통적인 익명 함수 대신 술어 를 사용하십시오 .

  _.remove(obj.subTopics, (currentObject) => {
        return currentObject.subTopicId === stToDelete;
    });

또는

obj.subTopics = _.filter(obj.subTopics, (currentObject) => {
    return currentObject.subTopicId !== stToDelete;
});

1

lodash와 typescript

const clearSubTopics = _.filter(obj.subTopics, topic => (!_.isEqual(topic.subTopicId, 2)));
console.log(clearSubTopics);

0

다음은 배열이있는 간단한 lodash 함수이며 색인 번호로 삭제하는 것입니다.

index_tobe_delete = 1

fruit = [{a: "apple"}, {b: "banana"}, {c: "choco"}]
_.filter(fruit, (value, key)=> {
return (key !== index_tobe_delete)
})
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.