자바스크립트 맵 함수가 정의되지 않은 상태로 반환되는 이유는 무엇입니까?

자바스크립트 맵 함수가 정의되지 않은 상태로 반환되는 이유는 무엇입니까?

마이코드

 var arr = ['a','b',1];
 var results = arr.map(function(item){
                if(typeof item ==='string'){return item;}  
               });

이를 통해 다음과 같은 결과를 얻을 수 있습니다.

["a","b",undefined]

나는 원하지 않아undefined결과 배열에서.어떻게 하면 되죠?

상품이 문자열이 아닌 경우에는 반품하지 않습니다.우,됩니다를 합니다.undefined것.

맵 함수는 한 값을 다른 값에 매핑하는 데 사용되지만 실제로 배열을 필터링하려는 것처럼 보이는데, 이 값은 맵 함수에 적합하지 않습니다.

당신이 실제로 원하는 것은 필터 기능입니다.결과 배열에 항목을 넣을 것인지 아닌지에 따라 true 또는 false를 반환하는 함수를 사용합니다.

var arr = ['a','b',1];
var results = arr.filter(function(item){
    return typeof item ==='string';  
});

필터는 항목이 수정되지 않은 이 특정한 경우에 대해 작동합니다.그러나 지도를 사용할 때 전달된 항목을 수정하는 경우가 많습니다.

그것이 당신의 의도라면, 당신은 다음을 사용할 수 있습니다:

var arr = ['a','b',1];
var results = arr.reduce((results, item) => {
    if (typeof item === 'string') results.push(modify(item)) // modify is a fictitious function that would apply some change to the items in the array
    return results
}, [])

ES6 filter는 표기법법(LINQ이)를 지원합니다.

따라서 원라이너를 따르는 것으로 요약할 수 있습니다.

['a','b',1].filter(item => typeof item ==='string');

아래 논리와 같이 구현할 수 있습니다.값 배열을 원하는 경우를 가정합니다.

let test = [ {name:'test',lastname:'kumar',age:30},
             {name:'test',lastname:'kumar',age:30},
             {name:'test3',lastname:'kumar',age:47},
             {name:'test',lastname:'kumar',age:28},
             {name:'test4',lastname:'kumar',age:30},
             {name:'test',lastname:'kumar',age:29}]

let result1 = test.map(element => 
              { 
                 if (element.age === 30) 
                 {
                    return element.lastname;
                 }
              }).filter(notUndefined => notUndefined !== undefined);

output : ['kumar','kumar','kumar']

제 해결책은 지도 뒤에 필터를 사용하는 것입니다.

이것은 모든 JS 데이터 유형을 지원해야 합니다.

예:

const notUndefined = anyValue => typeof anyValue !== 'undefined'    
const noUndefinedList = someList
          .map(// mapping condition)
          .filter(notUndefined); // by doing this, 
                      //you can ensure what's returned is not undefined

맵을 사용하여 사용자 지정 출력을 반환해야 하는 경우에도 필터와 결합할 수 있습니다.

const arr = ['a','b',1]

const result = arr.map(element => {

  if(typeof element === 'string')
    return element + ' something'

}).filter(Boolean) // this will filter out null and undefined

console.log(result) // output: ['a something', 'b something']

가 가 합니다.string 빈 하는 것으로 할 것입니다 다른 방법으로는 빈 문자열을 할당하는 것으로 충분합니다.

var arr = ['a','b',1];
var results = arr.map(function(item){
    return (typeof item ==='string') ? item : '';  
});

이 아닌 안 map(). 오히려 그 기능을 사용하는 방법을 알아봐야 합니다.

var arr = ['a','b',1];
var results = arr.filter(function(item){
                if (typeof item ==='string') {return item;}  
               });

문제는. 문제는.arr.map()입니다의 한 반복 입니다.arr배열 길이(즉, 배열 길이).map()입니다의 .arr그을 가졌는지에 이 그 조건을 를 들어즉,했다면,에, if(typeof item ==='string'){return item;}map()입니다 전체의 를 끝낼 를 할 수 밖에 .arr그래서 당신에게 줄 것입니다.undefined조건이 충족되지 않을 경우 나머지 요소에 대해 적용합니다.

해결책:

해결책 1: 조건이 충족될 때 배열의 전체 항목을 반환하려면 다음을 사용할 수 있습니다.arr.filter()를 들어합니다 합니다.

const arr = [{name: "Name1", age: 25}, {name: "Name2", age: 30}, {name: "Name3", age: 25}]

아래의 예와 같이 조건이 충족되면 전체 객체를 반환하려고 합니다.

const filteredItems = arr.filter((item)=>{if(item.age === 25){return true}})

console.log(filteredItems) //results: [{name: "Name1", age: 25}, {name: "Name3", age: 25}]

결론: method는 조건이 충족되면 그 안에 있는 전체 항목의 배열을 반환합니다.

두 번째 해결책: 개체의 특정 데이터(또는 전체 개체 또는 임의 형태의 데이터)만 배열로 반환하려는 경우, 즉 연령 없이 이름만 배열로 반환하려는 경우 이렇게 할 수 있습니다.

const namesOnly = arr.map((item)=>{if(item.age === 25){return item.name}})

console.log(namesOnly) //results: ["Name1, udefined, "Name3"]

이제 제거하기 위해undefined당신은 그냥 사용합니다.filter()아래와 같은 결과에 대한 방법

const namesOnly = arr.map((item)=>{if(item.age === 25){return item.name}}).filter((item)=> !!item)

console.log(namesOnly) //results: ["Name1, "Name3"]

결론: method는 반환에서 특정하게 정의된 데이터의 배열을 반환하고 조건이 충족되지 않으면 반환합니다. 그러면 method를 사용하여 를 제거할 수 있습니다.

이렇게 사용하면 문제가 해결됩니다.또한 당신은 깨끗하고 짧은 코드를 갖게 될 것입니다.

var _ = require('lodash'); //but first, npm i lodash --save
var arr = ['a','b',1];
var results = _.compact(
    _.map(arr, function(item){
        if(_.isString(item)){return item;}
    }
); //false, null, undefined ... etc will not be included

ES6와 함께...

const _ = require('lodash'); //but first, npm i lodash --save
const arr = ['a','b',1];
const results = _.compact(
    _.map(arr, item => {
        if(_.isString(item)){return item;}
    }
);

필터링 후의 유형이 여전히 존재하는 이 문제와 자주 마주칩니다.string | number. 따라서 이러한 솔루션을 확장하고 유형 안전성을 포함하기 위해 사용자 정의 유형 보호를 사용할 수 있습니다.https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates

const result = ['a','b',1].filter((item) => typeof item ==='string');
// result is typed as (string | number)[]

사용자 정의 타입 가드를 사용하여 타입 안전성 향상

const result = ['a','b',1].filter((item): item is string => typeof item ==='string');
// result is now typed as string[]

다음을 사용하여 레코드를 필터링할 수 있습니다..map아래의 예시 코드를 쉽게 사용하기

const datapoints = [
    {
        PL_STATUS: 'Packetloss',
        inner_outerx: 'INNER',
        KPI_PL: '97.9619'
    },
    {
        PL_STATUS: 'Packetloss',
        inner_outerx: 'OUTER',
        KPI_PL: '98.4621',
    },
    {
        PL_STATUS: 'Packetloss',
        inner_outerx: 'INNER',
        KPI_PL: '97.8770',
    },
    {
        PL_STATUS: 'Packetloss',
        inner_outerx: 'OUTER',
        KPI_PL: '97.5674',

    },
    {
        PL_STATUS: 'Packetloss',
        inner_outerx: 'INNER',
        KPI_PL: '98.7150',
    },
    {
        PL_STATUS: 'Packetloss',
        inner_outerx: 'OUTER',
        KPI_PL: '98.8969'
    }
];
const kpi_packetloss_inner: string[] = [];
datapoints.map((item: { PL_STATUS: string; inner_outerx: string; KPI_PL: string }) => {
    if (item.PL_STATUS === 'Packetloss' && item.inner_outerx === 'INNER') {
        kpi_packetloss_inner.push(item.KPI_PL);
    }
})
console.log(kpi_packetloss_inner);

맵은 원래 배열에서 수정된 새 배열을 생성할 때 사용됩니다.간단한 답은 누군가를 위한 것일지도 모릅니다.

      var arr = ['a','b',1];
      var results = arr.filter(function(item){
      // Modify your original array here
     return typeof item ==='string';  
     }).filter(a => a);

언급URL : https://stackoverflow.com/questions/16037049/why-does-javascript-map-function-return-undefined