객체의 자바 스크립트 필터 배열


84

개체 배열이 있고 검색하는 가장 좋은 방법이 궁금합니다. 내가 검색하는 방법을 아래의 예를 감안할 때 name = "Joe"age < 30? jQuery가 도움이 될 수있는 것이 있거나이 검색을 직접 강제로 강제해야합니까?

var names = new Array();

var object = { name : "Joe", age:20, email: "joe@hotmail.com"};
names.push(object);

object = { name : "Mike", age:50, email: "mike@hotmail.com"};
names.push(object);

object = { name : "Joe", age:45, email: "mike@hotmail.com"};
names.push(object);

검색이란 필터를 의미합니까?
joragupra 2013

검색! = 필터. 당신은 무엇을 원합니까?
TJ Crowder

답변:



77

[].filter방법을 사용하면 매우 쉽게 할 수 있습니다 .

var filterednames = names.filter(function(obj) {
    return (obj.name === "Joe") && (obj.age < 30);
});

[].filter 방법을 지원하지 않는 브라우저의 경우 shim을 추가해야합니다 . 이 MDN 페이지 는 이러한 코드를 제공합니다.


링크 된 MDN 페이지의 polyfill을 살펴보고 코드를 재미있게 읽고 새로운 것을 배우는 것이 좋습니다.
Aurelio

10

jQuery.filter () 함수를 사용하여 일치하는 요소의 하위 집합에서 요소를 반환 할 수 있습니다.

var names = [
    { name : "Joe", age:20, email: "joe@hotmail.com"},
    { name : "Mike", age:50, email: "mike@hotmail.com"},
    { name : "Joe", age:45, email: "mike@hotmail.com"}
   ];
   
   
var filteredNames = $(names).filter(function( idx ) {
    return names[idx].name === "Joe" && names[idx].age < 30;
}); 

$(filteredNames).each(function(){
     $('#output').append(this.name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="output"/>


9

var nameList = [
{name:'x', age:20, email:'x@email.com'},
{name:'y', age:60, email:'y@email.com'},
{name:'Joe', age:22, email:'joe@email.com'},
{name:'Abc', age:40, email:'abc@email.com'}
];

var filteredValue = nameList.filter(function (item) {
      return item.name == "Joe" && item.age < 30;
});

//To See Output Result as Array
console.log(JSON.stringify(filteredValue));

간단히 자바 스크립트를 사용할 수 있습니다. :)


3

임의의 키를 사용하여 객체 배열에서 필터링하려는 경우 :

function filterItems(items, searchVal) {
  return items.filter((item) => Object.values(item).includes(searchVal));
}
let data = [
  { "name": "apple", "type": "fruit", "id": 123234 },
  { "name": "cat", "type": "animal", "id": 98989 },
  { "name": "something", "type": "other", "id": 656565 }]


console.log("Filtered by name: ", filterItems(data, "apple"));
console.log("Filtered by type: ", filterItems(data, "animal"));
console.log("Filtered by id: ", filterItems(data, 656565));

JSON 객체 배열에서 필터링 : **


2

var names = [{
        name: "Joe",
        age: 20,
        email: "joe@hotmail.com"
    },
    {
        name: "Mike",
        age: 50,
        email: "mike@hotmail.com"
    },
    {
        name: "Joe",
        age: 45,
        email: "mike@hotmail.com"
    }
];
const res = _.filter(names, (name) => {
    return name.name == "Joe" && name.age < 30;

});
console.log(res);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>


1

빠른 질문입니다. 두 개의 객체 배열이 있고 이러한 객체 배열을 '정렬'하여 각 배열의 객체가 다른 배열의 순서대로 있는지 확인할 수 있다면 어떨까요? 배열 내부의 객체에 어떤 키와 값이 포함되어 있는지 모르는 경우에는 어떻게됩니까? 순서가 짝수보다 훨씬 적습니까?

당신이 당신의 '와일드 카드 식'이 필요 그래서 [].filter, [].map등 어떻게 와일드 카드 식을 얻을 수 있습니까?

var jux = (function(){
    'use strict';

    function wildExp(obj){
        var keysCrude = Object.keys(obj),
            keysA = ('a["' + keysCrude.join('"], a["') + '"]').split(', '),
            keysB = ('b["' + keysCrude.join('"], b["') + '"]').split(', '),
            keys = [].concat(keysA, keysB)
                .sort(function(a, b){  return a.substring(1, a.length) > b.substring(1, b.length); });
        var exp = keys.join('').split(']b').join('] > b').split(']a').join('] || a');
        return exp;
    }

    return {
        sort: wildExp
    };

})();

var sortKeys = {
    k: 'v',
    key: 'val',
    n: 'p',
    name: 'param'
};
var objArray = [
    {
        k: 'z',
        key: 'g',
        n: 'a',
        name: 'b'
    },
    {
        k: 'y',
        key: 'h',
        n: 'b',
        name: 't'
    },
    {
        k: 'x',
        key: 'o',
        n: 'a',
        name: 'c'
    }
];
var exp = jux.sort(sortKeys);

console.log('@juxSort Expression:', exp);
console.log('@juxSort:', objArray.sort(function(a, b){
    return eval(exp);
}));

또한 각 객체의 반복에 대해이 함수를 사용하여 각 객체의 모든 키에 대해 더 나은 집합 식을 만든 다음 그런 방식으로 배열을 필터링 할 수 있습니다.

이것은 거의 완성 된 API Juxtapose의 작은 스 니펫입니다.이 작업을 수행하면 예외가있는 객체 평등, 객체 통합 및 배열 압축이 수행됩니다. 이것이 프로젝트에 필요하거나 원하는 것이라면 의견을 말하고 나중에 lib에 액세스 할 수 있도록 만들겠습니다.

도움이 되었기를 바랍니다! 해피 코딩 :)


0

가장 간단하고 읽기 쉬운 접근 방식은 네이티브 자바 스크립트 필터 방법을 사용하는 것입니다.

네이티브 자바 스크립트 필터는 배열 요소를 필터링 할 때 선언적 접근 방식을 사용합니다. Array.prototype에 정의 된 메서드이므로 제공된 배열에서 반복하고 콜백을 호출합니다. 필터링 기능으로 작동하는이 콜백은 세 가지 매개 변수를 사용합니다.

element — 반복되는 배열의 현재 항목

index — 반복되는 배열에서 현재 요소의 인덱스 또는 위치

array— 필터 방법이 적용된 원래 배열 예제에서이 필터 방법을 사용하겠습니다. 필터는 모든 종류의 배열에 적용될 수 있습니다. 이 예에서는 객체 속성을 기반으로 객체 배열을 필터링합니다.

객체 속성을 기반으로 객체 배열을 필터링하는 예는 다음과 같습니다.

// Please do not hate me for bashing on pizza and burgers.
// and FYI, I totally made up the healthMetric param :)
let foods = [
  { type: "pizza", healthMetric: 25 },
  { type: "burger", healthMetric: 10 },
  { type: "salad", healthMetric: 60 },
  { type: "apple", healthMetric: 82 }
];
let isHealthy = food => food.healthMetric >= 50;

const result = foods.filter(isHealthy);

console.log(result.map(food => food.type));
// Result: ['salad', 'apple']

함수에서 배열 필터링에 대해 자세히 알아보고 고유 한 필터링을 구축하려면 https://medium.com/better-programming/build-your-own-filter-e88ba0dcbfae 문서를 확인하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.