어레이를 동시에 매핑 및 필터링

새로운 필터링 된 배열을 생성하기 위해 반복하려는 객체 배열이 있습니다. 또한 매개 변수에 따라 새 배열에서 일부 객체를 필터링해야합니다. 나는 이것을 시도하고있다 :

function renderOptions(options) {
    return options.map(function (option) {
        if (!option.assigned) {
            return (someNewObject);
        }
    });   
}

좋은 접근입니까? 더 좋은 방법이 있습니까? lodash와 같은 라이브러리를 사용할 수 있습니다.

Array.reduce이것을 위해 사용해야 합니다.

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

var reduced = options.reduce(function(filtered, option) {
  if (option.assigned) {
     var someNewValue = { name: option.name, newProperty: 'Foo' }
     filtered.push(someNewValue);
  }
  return filtered;
}, []);

document.getElementById('output').innerHTML = JSON.stringify(reduced);

<h1>Only assigned options</h1>
<pre id="output"> </pre>

또는 감속기는 다음과 같은 순수한 기능 일 수 있습니다.

var reduced = options.reduce(function(result, option) {
  if (option.assigned) {
    return result.concat({
      name: option.name,
      newProperty: 'Foo'
    });
  }
  return result;
}, []);

줄이지, 루크!

function renderOptions(options) {
    return options.reduce(function (res, option) {
        if (!option.assigned) {
            res.push(someNewObject);
        }
        return res;
    }, []);   
}

2019 년부터 Array.prototype.flatMap 이 좋은 옵션입니다.

options.flatMap(o => o.assigned ? [o.name] : []);

위에 링크 된 MDN 페이지에서 :

flatMap지도 중에 항목을 추가 및 제거 (항목 수 수정)하는 방법으로 사용할 수 있습니다. 즉, 항상 일대일이 아닌 여러 항목을 여러 항목에 매핑 할 수 있습니다 (각 입력 항목을 개별적으로 처리하여). 이런 의미에서 필터의 반대처럼 작동합니다. 항목을 유지하려면 1 요소 배열을, 항목을 추가하려면 여러 요소 배열을, 항목을 제거하려면 0 요소 배열을 리턴하십시오.

ES6을 사용하면 매우 짧을 수 있습니다.

options.filter(opt => !opt.assigned).map(opt => someNewObject)

reduceES6 멋진 확산 구문을 갖춘 한 줄 이 여기 있습니다!

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

const filtered = options
  .reduce((result, {name, assigned}) => [...result, ...assigned ? [name] : []], []);

console.log(filtered);

의견을 말하지만 필요한 평판이 없습니다. Maxim Kuzmin의 효율성을 높이기 위해 아주 좋은 답변을 약간 개선했습니다.

const options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

const filtered = options
  .reduce((result, { name, assigned }) => assigned ? result.concat(name) : result, []);

console.log(filtered);

설명

반복 할 때마다 전체 결과를 반복해서 퍼 뜨리지 않고 실제로 삽입 할 값이있을 때만 배열에 추가합니다.

Array.prototy.filter 자체 사용

function renderOptions(options) {
    return options.filter(function(option){
        return !option.assigned;
    }).map(function (option) {
        return (someNewObject);
    });   
}

어떤 시점에서, 사용하기가 쉽지 않은가 forEach

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

var reduced = []
options.forEach(function(option) {
  if (option.assigned) {
     var someNewValue = { name: option.name, newProperty: 'Foo' }
     reduced.push(someNewValue);
  }
});

document.getElementById('output').innerHTML = JSON.stringify(reduced);

<h1>Only assigned options</h1>
<pre id="output"> </pre>

이 있다면 그러나 그것은 좋은 것 malter()또는 fap()기능 즉, 결합 map및 filter기능. true 또는 false를 반환하는 대신 객체 또는 null / undefined를 반환하는 것을 제외하고는 필터처럼 작동합니다.

다음 포인트로 답변을 최적화했습니다.

1. 다시 쓰기 if (cond) { stmt; }로cond && stmt;
2. ES6 화살표 기능 사용

하나는 forEach 를 사용하고 다른 하나 는 reduce를 사용하는 두 가지 솔루션을 제시합니다 .

해결 방법 1 : forEach 사용

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];
var reduced = []
options.forEach(o => {
  o.assigned && reduced.push( { name: o.name, newProperty: 'Foo' } );
} );
console.log(reduced);

해결 방법 2 : Reduce 사용

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];
var reduced = options.reduce((a, o) => {
  o.assigned && a.push( { name: o.name, newProperty: 'Foo' } );
  return a;
}, [ ] );
console.log(reduced);

어떤 솔루션을 선택해야 할지를 결정합니다.

reduce를 사용하면 하나의 Array.prototype 함수에서이 작업을 수행 할 수 있습니다. 배열에서 모든 짝수를 가져옵니다.

var arr = [1,2,3,4,5,6,7,8];

var brr = arr.reduce((c, n) => {
  if (n % 2 !== 0) {
    return c;
  }
  c.push(n);
  return c;
}, []);

document.getElementById('mypre').innerHTML = brr.toString();

<h1>Get all even numbers</h1>
<pre id="mypre"> </pre>

이와 같은 방법을 사용하여 객체에 대해 일반화 할 수 있습니다.

var arr = options.reduce(function(c,n){
  if(somecondition) {return c;}
  c.push(n);
  return c;
}, []);

arr 이제 필터링 된 개체가 포함됩니다.

직접 사용하기는 .reduce어려울 수 있으므로 감속기를 생성하는 함수를 만드는 것이 좋습니다.

function mapfilter(mapper) {
  return (acc, val) => {
    const mapped = mapper(val);
    if (mapped !== false)
      acc.push(mapped);
    return acc;
  };
}

다음과 같이 사용하십시오.

const words = "Map and filter an array #javascript #arrays";
const tags = words.split(' ')
  .reduce(mapfilter(word => word.startsWith('#') && word.slice(1)), []);
console.log(tags);  // ['javascript', 'arrays'];