【问题标题】:Removing undefined values from Array从数组中删除未定义的值
【发布时间】:2015-04-20 20:40:08
【问题描述】:

在某些情况下,我们可能会在数组结构中有 undefined 或通常 falsy 值。例如,当从一些未知来​​源(如数据库或 HTML 结构)读取和填充数据时。喜欢

var data = [42, 21, undefined, 50, 40, undefined, 9]

由于在循环遍历此类数组和处理元素时可能会导致问题,因此删除 undefined(虚假值)的最佳做法是什么?

【问题讨论】:

标签: javascript arrays filter


【解决方案1】:

在这里使用Array.prototype.filter 可能很明显。因此,我们可以调用只删除未定义的值

var data = [42, 21, undefined, 50, 40, undefined, 9];

data = data.filter(function( element ) {
   return element !== undefined;
});

如果我们想过滤掉所有的假值(例如 0 或 null),我们可以使用 return !!element; 代替。

但我们可以做得更优雅一点,只需将 Boolean 构造函数和 Number 构造函数分别传递给 .filter

data = data.filter( Number );

在这种情况下就可以完成这项工作,通常要删除任何 falsy 值,我们会调用

data = data.filter( Boolean );

由于Boolean() 构造函数在truthy 值上返回true,在任何falsy 值上返回false,这是一个非常巧妙的选择。

【讨论】:

  • 请注意filter(Number) 也会删除0
  • 这也将删除像false这样可能存在于数组中的虚假值
  • @jAndy 谢谢。它也解决了我在 IE 11 中的问题。之前我使用箭头函数来删除未定义的。
  • 这个可以简写为.filter(n=>n!==undefined)
  • 如果你只是小声说“......该死......”那么你就是像我这样的书呆子! ?
【解决方案2】:
var a =  ["3","", "6"];
var b =  [23,54,56];
var result = [];

for (var i=0;i<a.length;++i) {
    if (a[i] != "") {
        result[i] = b[i];
    }
}

result = result.filter(function( element ) {
   return element !== undefined;
});

console.log(result);

【讨论】:

    【解决方案3】:

    Array.prototype.reduce() 可用于按条件从数组中删除元素,但如果需要在一次迭代中对元素进行额外转换。


    从数组中删除 undefined 值,支持子数组。

    function transform(arr) {
        return arr.reduce((memo, item) => {
            if (typeof item !== "undefined") {
                if (Array.isArray(item)) item = transform(item);
                // We can transform item here.
                memo.push(item);
            }
            return memo;
        }, []);
    }
    
    let test1 = [1, 2, "b", 0, {}, "", , " ", NaN, 3, undefined, null, 5, false, true, [1, true, 2, , undefined, 3, false, ''], 10];
    
    console.log(transform(test1));
    

    试试jsfiddle.net/bjoy4bcc/

    【讨论】:

      【解决方案4】:

      使用 lambda 内联

      result.filter(item => item);
      

      【讨论】:

      • 这个将删除所有虚假值。由于 OP 指定了不需要的虚假值,这绝对是 IMO 的最佳答案。但是,你还特别指出 undefined 你想要result.filter(item =&gt; item !== undefined)
      • [true,false,undefined,null,'a',1,0,'0'].filter(x=&gt;x) 返回[true, "a", 1, "0"]
      • 最佳答案在这里
      【解决方案5】:

      您可以使用 lodash compact 方法,它会删除 nullundefined''

      _.compact(data)
      

      【讨论】:

      • 如果没有其他库,则无法免费获得。太夸张了
      • 这可以工作并清理阵列。这是我更喜欢的解决方案
      【解决方案6】:
      var arr1 = [NaN, 0, 15, false, -22, '',undefined, 47, null];
      
      var array1 = arr1.filter(function(e){ return e;});
      
      document.write(array1);
      

      单行答案

      【讨论】:

        【解决方案7】:

        如果您有一个对象数组并且想要删除所有 nullundefined 项目:

        [].filter(item => !!item);
        

        【讨论】:

          【解决方案8】:

          正如 Diogo Capela 所说,但也没有过滤掉 0。

          [].filter(item => item !== undefined && item !== null)
          

          【讨论】:

            【解决方案9】:

            在 ES6 中,这可以通过简单地使用带有函数的过滤器来实现,返回值如下:

            const array = [NaN, 0, 15, false, -22, '',undefined, 47, null];
            const filteredArr = array.filter(elm => elm);
            console.log(filteredArr);
            

            【讨论】:

              【解决方案10】:
              var data = Object.keys(data)
              

              这将删除未定义的值,但数组索引会改变

              【讨论】:

              • 这里应该有更多代码吗?所有这一切都会返回一个数字 0-6 的数组。
              【解决方案11】:

              ES6 单行

              data.filter(e => e)
              

              【讨论】:

              • 小心,这也会删除任何“虚假”值,例如零。 [undefined, null, 0, false].filter(e =&gt; e) // []
              • JavaScript 有时很奇怪 :D
              【解决方案12】:

              Array.filter 的解决方案实际上将保持数组不变并创建一个没有不需要的项目的新数组。如果你想清理一个数组而不复制它,你可以使用这个:

              for (var i = data.length-1; i >= 0; i--) {
                  if (!data[i]) {
                      data.splice(i, 1);
                  }
              }
              

              【讨论】:

                【解决方案13】:
                data.filter(Boolean)
                

                是最简短易读的方式。

                【讨论】:

                • 为什么会这样?不要只是发布“魔法”,还要解释它是如何工作的以及为什么这是一个好的解决方案。
                【解决方案14】:
                [NaN, undefined, null, 0, 1, 2, 2000, Infinity].filter(Boolean)
                //[ 1, 2, 2000, Infinity ]
                

                【讨论】:

                  猜你喜欢
                  • 1970-01-01
                  • 2020-09-14
                  • 1970-01-01
                  • 2019-10-22
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 2012-03-24
                  相关资源
                  最近更新 更多