.map ()에서 요소를 건너 뛰는 방법?


417

에서 배열 요소를 건너 뛰려면 어떻게 .map해야합니까?

내 코드 :

var sources = images.map(function (img) {
    if(img.src.split('.').pop() === "json"){ // if extension is .json
        return null; // skip
    }
    else{
        return img.src;
    }
});

이것은 다음을 반환합니다 :

["img.png", null, "img.png"]

18
할 수는 없지만 나중에 모든 null 값을 필터링 할 수 있습니다.
Felix Kling

1
왜 안돼? 나는 continue를 사용 하는 것이 효과가 없다는 것을 알고 있지만 왜 (더블 루핑을 피할 것입니까?)-편집-당신의 경우 if 조건을 반전 img.src시키고 split pop의 결과 만 반환 할 수 없었습니다 ! = = json?
GrayedFox

@GrayedFox 그런 다음 undefined대신 묵시적 을 배열에 넣습니다 null. 그렇게
나쁘지 않은가

답변:


637

그냥 .filter()먼저 :

var sources = images.filter(function(img) {
  if (img.src.split('.').pop() === "json") {
    return false; // skip
  }
  return true;
}).map(function(img) { return img.src; });

비용이 들기 때문에 불합리하지 않은 작업을 원치 않는 경우보다 일반적으로 사용할 수 있습니다 .reduce(). 당신은 일반적으로 표현할 수 .map()의 측면에서 .reduce:

someArray.map(function(element) {
  return transform(element);
});

로 쓸 수 있습니다

someArray.reduce(function(result, element) {
  result.push(transform(element));
  return result;
}, []);

따라서 요소를 건너 뛰어야하는 경우 다음을 사용하여 쉽게 수행 할 수 있습니다 .reduce().

var sources = images.reduce(function(result, img) {
  if (img.src.split('.').pop() !== "json") {
    result.push(img.src);
  }
  return result;
}, []);

이 버전 .filter()에서 첫 번째 샘플 의 코드 는 .reduce()콜백의 일부입니다 . 필터 동작으로 이미지 소스를 유지 한 경우에만 이미지 소스가 결과 배열로 푸시됩니다.


21
이것이 전체 배열을 두 번 반복해야합니까? 이를 피할 수있는 방법이 있습니까?
Alex McMillan

7
@AlexMcMillan 당신은 .reduce()한 번에 모든 작업을 수행하고 수행 할 수 있지만 성능면에서는 큰 차이가 없을 것입니다.
Pointy

9
이 모든 부정적으로 스타일 값 ( "비우기" null, undefined, NaN우리는 하나의 내부를 활용할 수 있다면 좋은 것 등) map()이 객체가 아무것도에 매핑하고 생략되어야 함을 지표로. 나는 종종 98 %의 매핑을 원하는 배열을 보게됩니다 (예 : String.split()신경 쓰지 않는 하나의 빈 문자열을 남기지 않습니다). 답변 주셔서 감사합니다 :)
Alex McMillan

6
@AlexMcMillan well .reduce()은 리턴 값을 완벽하게 제어 할 수 있기 때문에 "원하는대로 수행"기능의 일종입니다. 당신은 Clojure의 Rich Hickey가 트랜스 듀서 의 개념에 관한 훌륭한 작업에 관심이있을 것 입니다.
Pointy

3
@vsync을 사용하여 요소를 건너 뛸 수 없습니다 .map(). 그러나 .reduce()대신 사용할 수 있으므로 추가하겠습니다.
Pointy
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.