JavaScript의 배열에서 빈 요소를 어떻게 제거합니까?

간단한 방법이 있습니까, 아니면 반복해서 수동으로 제거해야합니까?

편집 : 이 질문은 거의 9 년 전에 유용한 내장 방법이 많지 않은 때에 대답했습니다 Array.prototype.

확실히, 나는 당신이 filter방법 을 사용하는 것이 좋습니다 .

이 메소드는 제공하는 콜백 함수의 기준을 통과하는 요소가 포함 된 새 배열 을 반환 합니다.

예를 들어, null또는 undefined값 을 제거하려는 경우 :

var array = [0, 1, null, 2, "", 3, undefined, 3,,,,,, 4,, 4,, 5,, 6,,,,];

var filtered = array.filter(function (el) {
  return el != null;
});

console.log(filtered);

예를 들어 문자열을 처리하는 경우 "빈"것으로 간주되는 항목에 따라 위의 함수는 빈 문자열 인 요소를 제거하지 않습니다.

내가 자주 사용 참조하는 것이 하나 개의 전형적인 패턴이 요소를 제거하는 것입니다 falsy 빈 문자열을 포함, "", 0, NaN, null, undefined,와 false.

filter메소드, Boolean생성자 함수에 전달하거나 필터 기준 함수에서 동일한 요소를 리턴 할 수 있습니다 . 예를 들면 다음과 같습니다.

var filtered = array.filter(Boolean);

또는

var filtered = array.filter(function(el) { return el; });

두 가지 방법으로, filter첫 번째 경우 의 메소드는 Boolean생성자를 함수로 호출 하고 값을 변환하고 두 번째 경우에는 filter내부적으로 콜백의 리턴 값을 내재적으로 설정하기 때문에 작동 Boolean합니다.

스파 스 배열로 작업하고 "구멍"을 제거하려는 filter경우 true를 반환하는 콜백을 전달하는 메서드를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

var sparseArray = [0, , , 1, , , , , 2, , , , 3],
    cleanArray = sparseArray.filter(function () { return true });

console.log(cleanArray); // [ 0, 1, 2, 3 ]

옛 대답 : 이러지 마!

기본 Array 프로토 타입을 확장하여이 방법을 사용합니다.

Array.prototype.clean = function(deleteValue) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == deleteValue) {         
      this.splice(i, 1);
      i--;
    }
  }
  return this;
};

test = new Array("", "One", "Two", "", "Three", "", "Four").clean("");
test2 = [1, 2,, 3,, 3,,,,,, 4,, 4,, 5,, 6,,,,];
test2.clean(undefined);

또는 기존 요소를 다른 배열로 간단히 밀어 넣을 수 있습니다.

// Will remove all falsy values: undefined, null, 0, false, NaN and "" (empty string)
function cleanArray(actual) {
  var newArray = new Array();
  for (var i = 0; i < actual.length; i++) {
    if (actual[i]) {
      newArray.push(actual[i]);
    }
  }
  return newArray;
}

cleanArray([1, 2,, 3,, 3,,,,,, 4,, 4,, 5,, 6,,,,]);

간단한 방법 :

var arr = [1,2,,3,,-3,null,,0,,undefined,4,,4,,5,,6,,,,];


arr.filter(n => n)
// [1, 2, 3, -3, 4, 4, 5, 6]

arr.filter(Number) 
// [1, 2, 3, -3, 4, 4, 5, 6]

arr.filter(Boolean) 
// [1, 2, 3, -3, 4, 4, 5, 6]

또는-( "text"유형의 단일 배열 항목 에만 해당 )

['','1','2',3,,'4',,undefined,,,'5'].join('').split(''); 
// output:  ["1","2","3","4","5"]

또는-고전적인 방법 : 간단한 반복

var arr = [1,2,null, undefined,3,,3,,,0,,,[],,{},,5,,6,,,,],
    len = arr.length, i;

for(i = 0; i < len; i++ )
    arr[i] && arr.push(arr[i]);  // copy non-empty values to the end of the array

arr.splice(0 , len);  // cut the array and leave only the non-empty values

arr // [1,2,3,3,[],Object{},5,6]

jQuery를 통해 :

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

arr = $.grep(arr,function(n){ return n == 0 || n });

arr // [1, 2, 3, 3, 0, 4, 4, 5, 6]

업데이트-또 다른 빠르고 멋진 방법 (ES6 사용) :

var arr = [1,2,null, undefined,3,,3,,,0,,,4,,4,,5,,6,,,,], 
    temp = [];

for(let i of arr)
    i && temp.push(i); // copy each non-empty value to the 'temp' array

arr = temp;

arr // [1, 2, 3, 3, 4, 4, 5, 6]

빈 값 제거

['foo', '',,,'',,null, ' ', 3, true, [], [1], {}, undefined, ()=>{}].filter(String)

// ["foo", null, " ", 3, true, [1], Object {}, undefined, ()=>{}]

모든 빈 값 ( "", null, undefined 및 0)을 제거해야하는 경우 :

arr = arr.filter(function(e){return e}); 

빈 값과 줄 바꿈을 제거하려면

arr = arr.filter(function(e){ return e.replace(/(\r\n|\n|\r)/gm,"")});

예:

arr = ["hello",0,"",null,undefined,1,100," "]  
arr.filter(function(e){return e});

반환:

["hello", 1, 100, " "]

업데이트 (Alnitak의 의견에 근거)

경우에 따라 배열에 "0"을 유지하고 다른 항목 (null, undefined 및 "")을 제거 할 수 있습니다.

arr.filter(function(e){ return e === 0 || e });

반환:

["hello", 0, 1, 100, " "]

하나의 라이너 :

[1, false, "", undefined, 2].filter(Boolean); // [1, 2]

또는 underscorejs.org 사용 :

_.filter([1, false, "", undefined, 2], Boolean); // [1, 2]
// or even:
_.compact([1, false, "", undefined, 2]); // [1, 2]

Javascript 1.6 이상을 가지고 있다면 Array.filter간단한 return true콜백 함수를 사용할 수 있습니다 .

arr = arr.filter(function() { return true; });

이후 .filter자동으로 원래의 배열 요소가 없기 때문에 생략합니다.

위에 링크 된 MDN 페이지에는 filter공식 버전을 지원하지 않는 JavaScript 인터프리터에서 사용할 수있는 오류 검사 버전도 포함되어 있습니다 .

이렇게하면 null항목이나 명시적인 undefined값을 가진 항목 은 제거되지 않지만 OP는 "누락 된"항목을 구체적으로 요청했습니다.

구멍을 제거하려면

arr.filter(() => true)
arr.flat(0) // Currently stage 3, check compatibility before using this

구멍 및 거짓 (널, 정의되지 않음, 0, -0, NaN, "", false, document.all) 값을 제거하는 경우 :

arr.filter(x => x)

구멍, null 및 undefined를 제거하는 경우 :

arr.filter(x => x != null)

arr = [, null, (void 0), 0, -0, NaN, false, '', 42];
console.log(arr.filter(() => true)); // [null, (void 0), 0, -0, NaN, false, '', 42]
console.log(arr.filter(x => x)); // [42]
console.log(arr.filter(x => x != null)); // [0, -0, NaN, false, "", 42]

깨끗한 방법입니다.

var arr = [0,1,2,"Thomas","false",false,true,null,3,4,undefined,5,"end"];
arr = arr.filter(Boolean);
// [1, 2, "Thomas", "false", true, 3, 4, 5, "end"]

간단한 ES6

['a','b','',,,'w','b'].filter(v => v);

밑줄 / Lodash 사용시 :

일반적인 사용 사례 :

_.without(array, emptyVal, otherEmptyVal);
_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);

빈 상태 :

_.without(['foo', 'bar', '', 'baz', '', '', 'foobar'], '');
--> ["foo", "bar", "baz", "foobar"]

without에 대한 lodash 설명서를 참조하십시오 .

방금 ES6최신 버전의 방법으로 배열이 아래에 있다고 가정합니다.

 const arr = [1,2,3,undefined,4,5,6,undefined,7,8,undefined,undefined,0,9];

간단한 방법 :

 const clearArray = arr.filter( i => i );

라이브러리를 사용하는 것이 옵션이라면 underscore.js에 compact () http://documentcloud.github.com/underscore/ 라는 함수 가 있으며 배열 및 컬렉션과 관련된 몇 가지 유용한 함수가 있습니다.

다음은 해당 문서에서 발췌 한 것입니다.

_.compact (배열)

모든 잘못된 값이 제거 된 배열의 복사본을 반환합니다. JavaScript에서 false, null, 0, "", undefined 및 NaN은 모두 거짓입니다.

_.compact ([0, 1, false, 2, '', 3]);

=> [1, 2, 3]

Al

실제로 Array.filter는 코드를 추가하면 모든 브라우저에서 작동합니다. 아래를 참조하십시오.

var array = ["","one",0,"",null,0,1,2,4,"two"];

function isempty(x){
if(x!=="")
    return true;
}
var res = array.filter(isempty);
document.writeln(res.toJSONString());
// gives: ["one",0,null,0,1,2,4,"two"]  

이것은 IE에 추가해야 할 코드이지만 필터 및 기능적 프로그래밍은 가치가 있습니다.

//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license

if (!Array.prototype.filter)
{
  Array.prototype.filter = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var res = new Array();
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
      {
        var val = this[i]; // in case fun mutates this
        if (fun.call(thisp, val, i, this))
          res.push(val);
      }
    }

    return res;
  };
}

다른 사람이 언급하지 않았으므로 대부분의 사람들이 프로젝트에 밑줄을 포함하여 사용할 수도 있습니다 _.without(array, *values);.

_.without(["text", "string", null, null, null, "text"], null)
// => ["text", "string", "text"]

ES6 :

let newArr = arr.filter(e => e);

배열이 반복되는 동안 배열의 길이를 수정하기 때문에 제안 된대로 루프 및 스플 라이스를 시도하는 것보다 배열을 반복하고 배열에서 유지하려는 항목으로 새 배열을 만드는 것이 더 쉽다는 것을 알 수 있습니다 이상이 문제를 일으킬 수 있습니다.

다음과 같이 할 수 있습니다.

function removeFalsyElementsFromArray(someArray) {
    var newArray = [];
    for(var index = 0; index < someArray.length; index++) {
        if(someArray[index]) {
            newArray.push(someArray[index]);
        }
    }
    return newArray;
}

실제로 여기에 더 일반적인 해결책이 있습니다.

function removeElementsFromArray(someArray, filter) {
    var newArray = [];
    for(var index = 0; index < someArray.length; index++) {
        if(filter(someArray[index]) == false) {
            newArray.push(someArray[index]);
        }
    }
    return newArray;
}

// then provide one or more filter functions that will 
// filter out the elements based on some condition:
function isNullOrUndefined(item) {
    return (item == null || typeof(item) == "undefined");
}

// then call the function like this:
var myArray = [1,2,,3,,3,,,,,,4,,4,,5,,6,,,,];
var results = removeElementsFromArray(myArray, isNullOrUndefined);

// results == [1,2,3,3,4,4,5,6]

당신은 아이디어를 얻습니다-그런 다음 다른 유형의 필터 기능을 가질 수 있습니다. 아마도 당신이 필요로하는 것보다 많지만 관대하다고 느꼈습니다 ...;)

이것에 대해 (ES6) : 배열에서 Falsy 값을 제거합니다.

var arr = [0,1,2,"test","false",false,true,null,3,4,undefined,5,"end"];

arr.filter((v) => (!!(v)==true));

//output:

//[1, 2, "test", "false", true, 3, 4, 5, "end"]

빈 요소가없는 배열을 얻으려면 filter를 사용해야합니다. ES6의 예

const array = [1, 32, 2, undefined, 3];
const newArray = array.filter(arr => arr);

위의 " Array..filter()글로벌 생성자를 사용하여 ES5 호출 "골프 해킹에 내 목소리를 추가하고 있지만 , Object대신 또는 위에서 제안한대로 사용 하는 것이 좋습니다 .StringBooleanNumber

특히 ES5는 filter()이미 undefined배열 내의 요소를 트리거하지 않습니다 . 따라서 모든 요소 적중 true을 반환 하는 보편적으로를 반환하는 함수 는 반드시 요소 가 아닌 요소 만 반환 합니다.filter()undefined

> [1,,5,6,772,5,24,5,'abc',function(){},1,5,,3].filter(function(){return true})
[1, 5, 6, 772, 5, 24, 5, 'abc', function (){}, 1, 5, 3]

그러나 쓰기 ...(function(){return true;})는 쓰기보다 길다 ...(Object). Object생성자 의 반환 값은 어떤 상황에서도 일종의 객체가 될 것입니다. 위에서 제안한 프리미티브 복싱 생성자와 달리, 가능한 객체 값은 거짓이 아니며, 따라서 부울 설정에서는 Object짧은 축약 형입니다 function(){return true}.

> [1,,5,6,772,5,24,5,'abc',function(){},1,5,,3].filter(Object)
[1, 5, 6, 772, 5, 24, 5, 'abc', function (){}, 1, 5, 3]

위의 가장 높은 투표 응답을 사용할 때 첫 번째 예는 문자열 길이가 1보다 큰 개별 문자를 얻었습니다. 아래는 그 문제에 대한 해결책입니다.

var stringObject = ["", "some string yay", "", "", "Other string yay"];
stringObject = stringObject.filter(function(n){ return n.length > 0});

정의되지 않은 경우 반환하지 않고 길이가 0보다 큰 경우 반환합니다. 누군가가 도움이되기를 바랍니다.

보고

["some string yay", "Other string yay"]

var data = [null, 1,2,3];
var r = data.filter(function(i){ return i != null; })

console.log(r) 

[1,2,3]

어때요?

js> [1,2,,3,,3,,,0,,,4,,4,,5,,6,,,,].filter(String).join(',')
1,2,3,3,0,4,4,5,6

이것은 작동합니다. AppJet 에서 테스트했습니다 (IDE에 코드를 복사하여 붙여 넣은 다음 "재로드"를 눌러 작동하는지 확인하십시오. 계정을 만들 필요가 없습니다)

/* appjet:version 0.1 */
function Joes_remove(someArray) {
    var newArray = [];
    var element;
    for( element in someArray){
        if(someArray[element]!=undefined ) {
            newArray.push(someArray[element]);
        }
    }
    return newArray;
}

var myArray2 = [1,2,,3,,3,,,0,,,4,,4,,5,,6,,,,];

print("Original array:", myArray2);
print("Clenased array:", Joes_remove(myArray2) );
/*
Returns: [1,2,3,3,0,4,4,5,6]
*/

다른 방법은 배열의 length 속성을 활용하는 것입니다. null이 아닌 항목을 배열의 '왼쪽'에 포장 한 다음 길이를 줄이십시오. 이 알고리즘은 가비지 수집기에 너무 나쁜 메모리를 할당하지 않는 적절한 알고리즘이며 최상의 / 평균 / 최악의 사례 동작을 제공합니다.

이 솔루션은 여기에있는 다른 솔루션과 비교하여 Chrome에서 2 ~ 50 배 빠르며 Firefox에서는 5 ~ 50 배 빠릅니다 .http : //jsperf.com/remove-null-items-from-array

아래 코드는 열거 할 수없는 'removeNull'메서드를 Array에 추가합니다. 데이지 체인에 대해서는 'this'를 반환합니다.

var removeNull = function() {
    var nullCount = 0           ;
    var length    = this.length ;
    for (var i=0, len=this.length; i<len; i++) { if (!this[i]) {nullCount++} }
    // no item is null
    if (!nullCount) { return this}
    // all items are null
    if (nullCount == length) { this.length = 0; return this }
    // mix of null // non-null
    var idest=0, isrc=length-1;
    length -= nullCount ;                
    while (true) {
         // find a non null (source) slot on the right
         while (!this[isrc])  { isrc--; nullCount--; } 
         if    (!nullCount) { break }       // break if found all null
         // find one null slot on the left (destination)
         while ( this[idest]) { idest++  }  
         // perform copy
         this[idest]=this[isrc];
         if (!(--nullCount)) {break}
         idest++;  isrc --; 
    }
    this.length=length; 
    return this;
};  

Object.defineProperty(Array.prototype, 'removeNull', 
                { value : removeNull, writable : true, configurable : true } ) ;

foo = [0, 1, 2, "", , false, 3, "four", null]

foo.filter(function(e) {
    return e === 0 ? '0' : e
})

보고

[0, 1, 2, 3, "four"]

for ... in (객체 멤버) 루프를 '오용'합니다. => 루프 본문에는 정확한 값만 나타납니다.

// --- Example ----------
var field = [];

field[0] = 'One';
field[1] = 1;
field[3] = true;
field[5] = 43.68;
field[7] = 'theLastElement';
// --- Example ----------

var originalLength;

// Store the length of the array.
originalLength = field.length;

for (var i in field) {
  // Attach the truthy values upon the end of the array. 
  field.push(field[i]);
}

// Delete the original range within the array so that
// only the new elements are preserved.
field.splice(0, originalLength);

이것은 당신을 도울 수 있습니다 : https://lodash.com/docs/4.17.4#remove

var details = [
            {
                reference: 'ref-1',
                description: 'desc-1',
                price: 1
            }, {
                reference: '',
                description: '',
                price: ''
            }, {
                reference: 'ref-2',
                description: 'desc-2',
                price: 200
            }, {
                reference: 'ref-3',
                description: 'desc-3',
                price: 3
            }, {
                reference: '',
                description: '',
                price: ''
            }
        ];

        scope.removeEmptyDetails(details);
        expect(details.length).toEqual(3);

scope.removeEmptyDetails = function(details){
            _.remove(details, function(detail){
                return (_.isEmpty(detail.reference) && _.isEmpty(detail.description) && _.isEmpty(detail.price));
            });
        };

var data= { 
    myAction: function(array){
        return array.filter(function(el){
           return (el !== (undefined || null || ''));
        }).join(" ");
    }
}; 
var string = data.myAction(["I", "am","", "working", "", "on","", "nodejs", "" ]);
console.log(string);

산출:

nodejs에서 일하고 있습니다.

배열에서 빈 요소를 제거하고 다른 요소를 표시합니다.

모든 빈 요소 제거

배열에 다른 빈 요소와 함께 빈 개체, 배열 및 문자열이 포함되어 있으면 다음과 같이 제거 할 수 있습니다.

const arr = [ [], ['not', 'empty'], {}, { key: 'value' }, 0, 1, null, 2, "", "here", " ", 3, undefined, 3, , , , , , 4, , 4, , 5, , 6, , , ]

let filtered = JSON.stringify(
  arr.filter((obj) => {
    return ![null, undefined, ''].includes(obj)
  }).filter((el) => {
    return typeof el != "object" || Object.keys(el).length > 0
  })
)

console.log(JSON.parse(filtered))

간단한 압축 (어레이에서 빈 요소 제거)

ES6 사용시 :

const arr = [0, 1, null, 2, "", 3, undefined, 3, , , , , , 4, , 4, , 5, , 6, , , ,]

let filtered = arr.filter((obj) => { return ![null, undefined].includes(obj) })

console.log(filtered)

일반 자바 스크립트로->

var arr = [0, 1, null, 2, "", 3, undefined, 3, , , , , , 4, , 4, , 5, , 6, , , ,]

var filtered = arr.filter(function (obj) { return ![null, undefined].includes(obj) })

console.log(filtered)

정규식으로 유효하지 않은 항목 필터링

array = array.filter(/\w/);
filter + regexp

빈 요소를 제거하는 가장 좋은 방법 Array.prototype.filter()은 이미 다른 답변에서 언급했듯이을 사용하는 것입니다.

불행히도 Array.prototype.filter()IE <9에서는 지원되지 않습니다. 여전히 IE8 또는 이전 버전의 IE를 지원해야하는 경우 다음 polyfill 을 사용하여 Array.prototype.filter()이러한 브라우저에서 지원을 추가 할 수 있습니다 .

if (!Array.prototype.filter) {
  Array.prototype.filter = function(fun/*, thisArg*/) {
    'use strict';
    if (this === void 0 || this === null) {
      throw new TypeError();
    }
    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== 'function') {
      throw new TypeError();
    }
    var res = [];
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++) {
      if (i in t) {
        var val = t[i];
        if (fun.call(thisArg, val, i, t)) {
          res.push(val);
        }
      }
    }
    return res;
  };
}