ฉันจะลบองค์ประกอบว่างออกจากอาร์เรย์ใน JavaScript ได้อย่างไร

มีวิธีที่ตรงไปตรงมาหรือฉันจำเป็นต้องวนซ้ำมันและลบออกด้วยตนเอง?

แก้ไข: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, และundefinedfalse

คุณสามารถส่งผ่านไปยังfilterเมธอดBooleanฟังก์ชันตัวสร้างหรือส่งคืนองค์ประกอบเดียวกันในฟังก์ชันตัวกรองเกณฑ์ตัวอย่างเช่น:

var filtered = array.filter(Boolean);

หรือ

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

ในรูปแบบที่ทั้งสองงานนี้เพราะfilterวิธีการในกรณีแรกเรียกBooleanตัวสร้างเป็นฟังก์ชั่นการแปลงค่าและในกรณีที่สองวิธีการเปลี่ยนภายในค่าตอบแทนของการเรียกกลับไปโดยปริยายfilterBoolean

หากคุณกำลังทำงานกับกระจัดกระจายอาร์เรย์และคุณพยายามที่จะกำจัด "หลุม" คุณสามารถใช้filterวิธีการผ่านการเรียกกลับที่ส่งกลับจริงตัวอย่างเช่น:

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, ()=>{}]

หากคุณต้องการลบค่าว่างเปล่าทั้งหมด ("", โมฆะ, ไม่ได้กำหนดและ 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" อยู่ในอาร์เรย์และลบสิ่งอื่นใด (โมฆะไม่ได้กำหนดและ "") นี่เป็นวิธีหนึ่ง:

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

สำหรับการลบรูและค่าเท็จ (ค่า null ไม่ได้กำหนด 0, -0, NaN, "", false, document.all):

arr.filter(x => x)

สำหรับการลบหลุม null และไม่ได้กำหนด:

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"]

ดูเอกสาร 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, "", ไม่ได้กำหนดและ NaN ล้วนเป็นเท็จ

_.compact ([0, 1, เท็จ, 2, '', 3]);

=> [1, 2, 3]

@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 แต่ตัวกรองและการเขียนโปรแกรมฟังก์ชั่นที่คุ้มค่าคือ imo

//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): การลบค่าเท็จจากอาร์เรย์

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"]

คุณควรใช้ตัวกรองเพื่อรับอาร์เรย์โดยไม่มีองค์ประกอบว่างเปล่า ตัวอย่างบน ES6

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

ฉันเพียงแค่การเพิ่มเสียงของฉันข้างต้น“การเรียกร้อง ES5 ของArray..filter()ด้วยตัวสร้างโลก” กอล์ฟสับ แต่ฉันขอแนะนำให้ใช้ObjectแทนString, BooleanหรือNumberตามที่แนะนำข้างต้น

โดยเฉพาะ 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คอนสตรัคจะเป็นภายใต้สถานการณ์ใด ๆเรียงลำดับของวัตถุบางอย่าง ซึ่งแตกต่างจากแบบดั้งเดิมมวย-ก่อสร้างแนะนำข้างต้นไม่เป็นไปได้วัตถุค่า falsey และทำให้ในการตั้งค่าบูลีนเป็นระยะสั้นมือสำหรับ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]

เมื่อใช้คำตอบที่โหวตสูงสุดข้างบนตัวอย่างแรกฉันได้รับอักขระแต่ละตัวสำหรับความยาวของสายอักขระที่มากกว่า 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]
*/

อีกวิธีในการทำคือใช้ประโยชน์จากคุณสมบัติความยาวของอาเรย์: แพ็คไอเท็มที่ไม่เป็นโมฆะใน 'ซ้าย' ของอาเรย์แล้วลดความยาว มันเป็นอัลกอริธึมในสถานที่ - ไม่ได้จัดสรรหน่วยความจำแย่เกินไปสำหรับตัวรวบรวมขยะ - และมีลักษณะการทำงานของเคสที่ดีที่สุด / โดยเฉลี่ย / แย่ที่สุด

โซลูชันนี้เปรียบเทียบกับคนอื่น ๆ ที่นี่ได้เร็วกว่า 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)

ด้วย Javascript ธรรมดา ->

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;
  };
}