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.