javascript - 값을 기반으로 객체 배열에서 속성을 선택하십시오. 자바 스크립트




arrays object (8)

다음과 같은 구조의 객체 배열이 있습니다.

var arr = [
  {
    "value": "abc",
    "checked": true
  },
  {
    "value": "xyz",
    "checked": false
  },
  {
    "value": "lmn",
    "checked": true
  }
];

let result = arr.filter(item => item.checked);

console.log(result);

나는 출력을 원할 것이다 :

["abc", "lmn"] 

이 두 valuechecked: true 했기 때문에 checked: true .

확인 된 값을 기준으로 필터링을 시도했습니다.

let result = arr.filter(item => item.checked);

true 로 설정된 속성 값을 checked 한 객체가 나타납니다.

도움을 주시면 감사하겠습니다.


당신이 단지 키 값과 배열을 전달할 필요가있는 일반 함수를 만들고 매개 변수의 기본에 대한 arry를 걸러 낼 것입니다

 var arr = [
          {
            "value": "abc",
            "checked": true
          },
          {
            "value": "xyz",
            "checked": false
          },
          {
            "value": "lmn",
            "checked": true
          }
        ]


            function filterList(keyValue, list) {
                let filteredList = [];
                for(let i = 0; i < list.length; i++) {
                    if(list[i]["checked"] === keyValue) {
                        filteredList.push(list[i]["value"]);
                    }
                }
                return filteredList;
            }

    console.log(filterList(true, arr));

데이터 구조를 수정하고 필터 및 맵 사용

var obj = [  
            {
                "value" : "abc",
                "checked" : true
            },
            {
                "value" : "xyz",
                "checked" : false
            },
            {
                "value" : "lmn",
                "checked" : true
            }
           ]
console.log(obj.filter(function(e){return e.checked==true}).map(function(e){return e.value}))


새 배열에서 값을 푸시하지 않습니다. 이것을 올바르게 시도해보십시오.

const arr = [{ "value": "abc", "checked": true }, { "value": "xyz", "checked": false }, { "value": "lmn", "checked": true }]
let result = []
let check = arr.filter((val) => {
    if (val.checked) {
        result.push(val.value)
    }
})
console.log(result);

여기에 제시된 모든 솔루션이 유효하지만, ES6 + 구문을 사용하는 반복적 인 접근 방식을 선호하는 경우 독자에게 명확하게 의사를 전달할 수 있도록 항목을 명시 적으로 반복 할 수 있습니다 (또한 filtermap 연결하는 것보다 빠릅니다. 그 목록에 두 번 반복) :

const items = [
  {
    "value": "abc",
    "checked": true
  },
  {
    "value": "xyz",
    "checked": false
  },
  {
    "value": "lmn",
    "checked": true
  }
];

const formattedListOfFilteredItems = [];
for (item of items) {
  if (item.checked)
    formattedListOfFilteredItems.push(item.value);
}

console.log(formattedListOfFilteredItems);


첫째, 유효한 JS가 아닙니다. 대괄호와 중괄호를 바꿔야합니다. 배열은 [] 사용하고 객체는 {} 사용합니다. 다른 방법은 아닙니다.

둘째, 먼저 checked 속성을 기반으로 원하는 객체를 filter 한 다음 map 을 사용하여 원하는 속성을 추출해야합니다.

const arr =[{"value":"abc","checked":true},{"value":"xyz","checked":false},{"value":"lmn","checked":true}];

const res = arr.filter(({ checked }) => checked).map(({ value }) => value);

console.log(res);


필터 및지도 사용 :

const arr =[{"value":"abc","checked":true},{"value":"xyz","checked":false},{"value":"lmn","checked":true}];

 const result = arr.filter(res=>res.checked).map(ele=>ele.value);
 
 console.log(result);


Array.prototype.reduce() 가 도움이 될 수 있습니다. reduce() callback은 두 개의 인수를 취합니다. 첫 번째 인수는 이전 / 이전 반복 값이고 두 번째 인수는 현재 반복 값 / 요소입니다.

따라서이 함수를 사용하여 현재 반복 값을 이전 반복 값 (총 값)으로 유지할 수 있습니다.

reduce() 메서드는 배열의 각 요소에 대해 제공하는 축소 자 함수를 실행하여 단일 출력 값을 얻습니다.

var arr = [{"value": "abc","checked": true},{"value": "xyz","checked": false},{"value": "lmn","checked": true}]

const result = arr.reduce((acc, cur) => ((cur.checked && acc.push(cur.value)), acc), [])
console.log(result)


checked 가 참이면 checked 사용하여 reduce 를 사용할 reduce 있고 그 값을 누산기로 push 하면 2 개의 루프가 필요하지 않습니다.

const arr = [{"value": "abc","checked": true},{"value": "xyz","checked": false},{"value": "lmn","checked": true}],
  filtered = arr.reduce((a, o) => o.checked ? a.concat(o.value) : a, [])
  
console.log(filtered)

assoron 지적한 것처럼, pushconcat 보다 빠르기 assoron 함수를 다음과 같이 작성할 수 있습니다.

const arr = [{"value": "abc","checked": true},{"value": "xyz","checked": false},{"value": "lmn","checked": true}],
  filtered = arr.reduce((a, o) => {
    if (o.checked) a.push(o.value)
    return a
  }, [])
  
console.log(filtered)





ecmascript-6