web-dev-qa-db-ja.com

Javascriptで配列から空の要素を削除する

JavaScriptで配列から空の要素を削除する方法

簡単な方法はありますか、それともループして手動で削除する必要がありますか。

883
Tamas Czinege

EDIT:この質問は、Array.prototypeに多くの便利な組み込みメソッドがなかったほぼ9年前に回答されました。

さて、確かに、filterメソッドを使用することをお勧めします。

このメソッドは、提供するコールバック関数の基準を渡す要素を持つa new arrayを返すことに注意してください。

たとえば、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);

たとえば、文字列を処理している場合、上記の関数は空の文字列である要素を削除しません。

私がよく使用する典型的なパターンの1つは、空の文字列""0NaNnullundefined、およびfalseを含むfalsyの要素を削除することです。

filterメソッド、Booleanコンストラクター関数に渡すか、フィルター条件関数で同じ要素を返すことができます。次に例を示します。

var filtered = array.filter(Boolean);

または

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

両方の方法で、これは機能します。これは、最初のケースのfilterメソッドが値としてBooleanコンストラクターを関数として呼び出し、値を変換し、2番目のケースでは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,,,,]);
788
CMS

簡単な方法:

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]

または - ( single タイプ "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]


UPDATE - (ES6を使用して)もう1つの速くてクールな方法:

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;
delete temp; // discard the variable

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

空の値を削除

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

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

空の値( ""、null、未定義、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, " "]

UPDATE(Alnitakのコメントに基づく)

状況によっては、配列内に "0"を保持し、それ以外のもの(null、未定義、 "")を削除することが必要な場合があります。

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

戻る:

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

ただ1つのライナー:

[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]
127
andlrc

Javascript 1.6以降をお持ちの場合は、Array.filterという簡単なコールバック関数を使用して return true を使用できます。

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

.filterは自動的に元の配列の足りない要素をスキップします。

上記リンクのMDNページには、公式バージョンをサポートしていないJavaScriptインタプリタで使用できるNiceエラーチェックバージョンのfilterも含まれています。

これはnullエントリも明示的なundefined値を持つエントリも削除しませんが、OPは特に "missing"エントリを要求しました。

117
Alnitak

穴を削除するためには、使用する必要があります

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

ホール、および偽の(null、未定義、0、-0、NaN、 ""、false、document.all)値を削除する場合

arr.filter(x => x)

Hole、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]
51
tsh

きれいにする方法です。

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"]
51
Tomás Senart

シンプルES6

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

アンダースコア/ Lodashを使用:

一般的なユースケース

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

空の場合

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

なしの場合はlodashのドキュメント を参照してください。

20
c4urself

ライブラリを使うことが私の知っているオプションであるなら、underscore.jsにはcompact() http://documentcloud.github.com/underscore/ という関数があります。これには配列やコレクションに関連した便利な関数もいくつかあります。

これが彼らのドキュメンテーションからの抜粋です。

_.compact(配列)

偽の値をすべて削除した配列のコピーを返します。 JavaScriptでは、false、null、0、 ""、undefined、NaNはすべて偽造です。

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

=> [1、2、3]

15
Luis Perez

ES6とそれ以降のバージョンのメソッドだけで、配列は以下のようになります。

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

簡単な方法:

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

@Alnitak

追加のコードを追加すると、実際には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;
  };
}
14
Erik Johansson

他の誰もそれを述べておらず、ほとんどの人が彼らのプロジェクトにアンダースコアが含まれているので_.without(array, *values);を使うこともできます。

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

ループの途中で配列の長さを変更するので、推奨されているようにループとスプライスを試みるよりも、配列をループして配列から残したい項目から新しい配列を構築する方が簡単な場合があります。問題が生じる可能性があります。

あなたはこのようなことをすることができます:

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]

あなたはアイデアを得ます - それから、あなたは他のタイプのフィルタ機能を持つことができます。おそらくあなたが必要とする以上のものですが、私は寛大に感じていました...;)

8
Jason Bunting

あなたは空の要素なしで配列を得るためにfilterを使うべきです。 ES6の例

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

これはどうなのか(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"]
6
VIJAY P
ES6: let newArr = arr.filter(e => e);
5
Kanan Farzali
var data = [null, 1,2,3];
var r = data.filter(function(i){ return i != null; })

console.log(r) 

[1,2,3]

3
KARTHIKEYAN.A

最初の例で、上記の最も高い投票の答えを使用するとき、私は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"]
3
John Miller

上記の「グローバルコンストラクタを使ってES5のArray..filter()を呼び出す」ゴルフハックに声を加えるだけですが、上記のようにObjectStringBooleanの代わりにNumberを使うことをお勧めします。

具体的には、ES5のfilter()はすでに配列内のundefined要素をトリガーしません。したがって、 all elements filter() hitsを返すtrueを普遍的に返す関数は、必ず非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コンストラクタの戻り値は、 どんな状況下でも 、ある種のオブジェクトになります。上で提案したprimitive-boxing-constructorsとは異なり、可能なobject-valueはfalseではありません。したがって、ブール値の設定では、Objectfunction(){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]
3
ELLIOTTCABLE

そのことについて何:

js> [1,2,,3,,3,,,0,,,4,,4,,5,,6,,,,].filter(String).join(',')
1,2,3,3,0,4,4,5,6
2
JessyNinja
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に取り組んでいます

空の要素を配列から削除し、他の要素を表示します。

1
Jitendra virani

これはうまくいきます、私は 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]
*/
1
Joe Pineda

もう1つの方法は、配列のlengthプロパティを利用することです。配列の「左側」にnull以外の項目を詰めてから、長さを短くします。それはインプレースアルゴリズムであり、メモリを割り当てない、ガベージコレクタには悪すぎる、そして非常に良いベスト/アベレージ/ワーストケースの振る舞いをします。

こちらのソリューションは、ここで見られるように、Chromeでは2〜50倍、Firefoxでは5〜50倍高速です。 http://jsperf.com/remove-null-items-from - アレイ

以下のコードは、列挙不可能な 'removeNull'メソッドを配列に追加します。デイジーチェーンの場合は '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 } ) ;
1
GameAlchemist
foo = [0, 1, 2, "", , false, 3, "four", null]

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

戻り値

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

for ...(object-member)ループを「誤用」しました。 =>ループ本体には真の値だけが表示されます。

// --- 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);
1
michael.zech

これは役に立つかもしれません: 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));
            });
        };
1
Sandeep M

無効なエントリを正規表現でフィルタリングする

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

空の要素を削除する最善の方法は、他の回答で既に述べたように、 Array.prototype.filter() を使用することです。

残念ながら、Array.prototype.filter()はIE <9ではサポートされていません。それでもIE 8またはさらに古いバージョンの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;
  };
}
0
John Slegers

これはきれいな空のフィールドのための私のソリューションです。

手数料オブジェクトから開始:空のフィールドのみを使用して(マップを使用して)avail属性のみを取得します(フィルターを使用して)整数に結果を解析します(マップを使用して)

fees.map( ( e ) => e.avail ).filter( v => v!== '').map( i => parseInt( i ) );
0

もし誰かが配列やオブジェクト全体の掃除を探しているなら、これは役に立つかもしれません

var qwerty = {
    test1: null,
    test2: 'somestring',
    test3: 3,
    test4: {},
    test5: {
        foo: "bar"
    },
    test6: "",
    test7: undefined,
    test8: " ",
    test9: true,
    test10: [],
    test11: ["77","88"],
    test12: {
        foo: "foo",
        bar: {
            foo: "q",
            bar: {
                foo:4,
                bar:{}
            }
        },
        bob: {}
    }
}

var asdfg = [,,"", " ", "yyyy", 78, null, undefined,true, {}, {x:6}, [], [2,3,5]];

function clean_data(obj) {
    for (var key in obj) {
        // Delete null, undefined, "", " "
        if (obj[key] === null || obj[key] === undefined || obj[key] === "" || obj[key] === " ") {
            delete obj[key];
        }
        // Delete empty object
        // Note : typeof Array is also object
        if (typeof obj[key] === 'object' && Object.keys(obj[key]).length <= 0) {
            delete obj[key];
        }
        // If non empty object call function again
        if(typeof obj[key] === 'object'){
            clean_data(obj[key]);
        }
    }
    return obj;
}

var objData = clean_data(qwerty);
console.log(objData);
var arrayData = clean_data(asdfg);
console.log(arrayData);

出力:

nullundefined""" "empty object、またはempty arrayであるものはすべて削除します

jsfiddle ここ

0
Puni

もう一つの方法:

function filter_array(test_array) {
    var index = -1,
        arr_length = test_array ? test_array.length : 0,
        resIndex = -1,
        result = [];

    while (++index < arr_length) {
        var value = test_array[index];

        if (value) {
            result[++resIndex] = value;
        }
    }

    return result;
}
console.log(filter_array([NaN, 0, 15, false, -22, '',undefined, 47, null]));
0
stalinrajindian

配列の空の文字列を削除するには、filterを使用してください。

var s = [ '1,201,karthikeyan,K201,HELPER,[email protected],8248606269,7/14/2017,45680,TN-KAR24,8,800,1000,200,300,Karthikeyan,11/24/2017,Karthikeyan,11/24/2017,AVAILABLE\r',
  '' ]
var newArr = s.filter(function(entry) { return entry.trim() != ''; })

console.log(newArr); 
0
KARTHIKEYAN.A

これは空の値を削除するだけで、誤ったものは削除しません。

Null値も削除するオプションがあります。

この方法は、spliceを使うよりはるかに速いはずです。

    function cleanArray(a, removeNull) {
        var i, l, temp = [];
        l = a.length;
        if (removeNull) {
            for (i = 0; i < l; i++) {
                if (a[i] !== undefined && a[i] !== null) {
                    temp.Push(a[i]);
                }
            }
        } else {
            for (i = 0; i < l; i++) {
                if (a[i] !== undefined) {
                    temp.Push(a[i]);
                }
            }
        }
        a.length = 0;
        l = temp.length;
        for (i = 0; i < l; i++) {
            a[i] = temp[i];
        }
        temp.length = 0;
        return a;
    }
    var myArray = [1, 2, , 3, , 3, , , 0, , null, false, , NaN, '', 4, , 4, , 5, , 6, , , , ];
    cleanArray(myArray);
    myArray;
0
Trevor