[javascript] 객체 배열에서 속성 값을 배열로 추출

JAVASCRIPT / 글쓴이

다음 구조의 JavaScript 객체 배열이 있습니다.

objArray = [ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ];

각 객체에서 필드를 추출하고 값을 포함하는 배열을 가져 오려고합니다 (예 : field foo는 array) [ 1, 3, 5 ].

이 사소한 접근 방식 으로이 작업을 수행 할 수 있습니다.

function getFields(input, field) {
    var output = [];
    for (var i=0; i < input.length ; ++i)
        output.push(input[i][field]);
    return output;
}

var result = getFields(objArray, "foo"); // returns [ 1, 3, 5 ]

사용자 정의 유틸리티 기능이 필요하지 않도록 더 우아하거나 관용적 인 방법이 있습니까?

제안 된 duplicate 에 대한 참고 는 단일 객체 를 배열 로 변환하는 방법을 다룹니다 .

답변

이를 달성하는 더 짧은 방법은 다음과 같습니다.

let result = objArray.map(a => a.foo);

또는

let result = objArray.map(({ foo }) => foo)

당신은 또한 확인할 수 있습니다 Array.prototype.map().

답변

예, 그러나 JavaScript의 ES5 기능에 의존합니다. 이것은 IE8 이전 버전에서는 작동하지 않음을 의미합니다.

var result = objArray.map(function(a) {return a.foo;});

ES6 호환 JS 인터프리터 에서 간결성을 위해 화살표 기능 을 사용할 수 있습니다 .

var result = objArray.map(a => a.foo);

Array.prototype.map 설명서

답변

Lodash의_.pluck() 기능 또는 밑줄의_.pluck() 기능을 확인하십시오 . 둘 다 단일 함수 호출에서 원하는 것을 정확하게 수행합니다!

var result = _.pluck(objArray, 'foo');

업데이트 : _.pluck()Lodash v4.0.0_.map() 부터 Niet ‘s answer 와 유사한 것을 사용 하여 제거되었습니다 . _.pluck()Underscore에서 계속 사용할 수 있습니다 .

업데이트 2 : Mark 가 Lodash v4와 4.3 사이 의 주석 에서 지적했듯이이 기능을 다시 제공하는 새로운 기능이 추가되었습니다. _.property()객체의 속성 값을 가져 오는 함수를 반환하는 속기 함수입니다.

또한 _.map()이제 문자열을에 전달되는 두 번째 매개 변수로 전달할 수 _.property()있습니다. 결과적으로 다음 두 줄은 LoLos 4 이전의 코드 샘플과 동일합니다.

var result = _.map(objArray, 'foo');
var result = _.map(objArray, _.property('foo'));

_.property()따라서 _.map()하위 속성에 액세스하기 위해 도트로 구분 된 문자열 또는 배열을 제공 할 수도 있습니다.

var objArray = [
    {
        someProperty: { aNumber: 5 }
    },
    {
        someProperty: { aNumber: 2 }
    },
    {
        someProperty: { aNumber: 9 }
    }
];
var result = _.map(objArray, _.property('someProperty.aNumber'));
var result = _.map(objArray, _.property(['someProperty', 'aNumber']));

_.map()위 예제에서 두 호출은 모두 를 반환 [5, 2, 9]합니다.

함수형 프로그래밍에 좀 더 익숙 하다면 Ramda의R.pluck() 기능을 살펴보십시오. 이 기능은 다음과 같습니다.

var result = R.pluck('foo')(objArray);  // or just R.pluck('foo', objArray)

답변

JS 전용 솔루션에 관해서는, 단순한 색인 for루프가 대안보다 성능이 뛰어나다 는 것을 알았 습니다.

100000 요소 배열에서 단일 속성 추출 (jsPerf를 통해)

전통적인 for 루프 368 Ops / sec

var vals=[];
for(var i=0;i<testArray.length;i++){
   vals.push(testArray[i].val);
}

ES6 for..of 루프 303 Ops / sec

var vals=[];
for(var item of testArray){
   vals.push(item.val);
}

Array.prototype.map 19 Ops / sec

var vals = testArray.map(function(a) {return a.val;});

TL; DR-.map ()은 느리지 만 가독성이 성능 이상의 가치가 있다고 생각되면 자유롭게 사용하십시오.

편집 # 2 : 6/2019-jsPerf 링크가 끊어졌습니다.

답변

사용 Array.prototype.map:

function getFields(input, field) {
    return input.map(function(o) {
        return o[field];
    });
}

ES5 이전 브라우저의 심에 대해서는 위의 링크를 참조하십시오.

답변

크로스 브라우저 보증을 위해 lodash 또는 밑줄과 같은 일종의 라이브러리를 사용하는 것이 좋습니다.

Lodash에서는 다음 방법으로 배열의 속성 값을 얻을 수 있습니다.

_.map(objArray,"foo")

밑줄로 

_.pluck(objArray,"foo")

둘 다 돌아올 것이다 

[1, 2, 3]

답변

ES6에서는 다음을 수행 할 수 있습니다.

const objArray = [{foo: 1, bar: 2}, {foo: 3, bar: 4}, {foo: 5, bar: 6}]
objArray.map(({ foo }) => foo)