如何在数组（JS）中过滤（）出NaN，null，0，false

Question

我被要求在 array 中过滤掉 NaN, null, 0, false。

幸运的是我已经回答了这个问题。

function bouncer(arr) {
  function filterer(arr) {
     return arr > 0|| isNaN(arr) === true;
  }
  arr = arr.filter(filterer);
  return arr;
}

//example input
bouncer([0, 1, 2, 3, 'ate', '', false]); //output [1, 2, 3, 'ate']

但问题是我真的不知道我是如何得出答案的，或者更确切地说我不知道​​它是如何工作的。特别是在 arr > 0 上，过滤器是如何知道 arr 已经在 arr[1]、arr[2] 等上读取的。而不使用循环遍历所有数组。

或者可以简单地解释一下代码是如何工作的。 [我已经尽力解释清楚了---]

Answer 1

如果您被要求在一个数组中过滤掉NaN、null、0、false，那么您的解决方案实际上并不起作用。

您的输入：

bouncer([0, 1, 2, 3, 'ate', '', false, NaN]);

将得到以下输出：

[1, 2, 3, 'ate', NaN]

要过滤掉所有“虚假”值，您只需使用Boolean：

function bouncer(arr) {
  return arr.filter(Boolean);
}

bouncer([0, 1, 2, 3, 'ate', '', false, NaN]);

输出：

[1, 2, 3, 'ate']

---

由于Boolean 构造函数也是一个函数，它返回true 用于“真实”参数或false 用于“虚假”参数。如果该值为0、-0、null、false、NaN、undefined 或空字符串 ("")，则该对象的值为 false。所有其他值，包括任何对象或字符串"false"，都会创建一个初始值为true 的对象。

Answer 2

您也可以使用身份函数代替Boolean。

function bouncer(arr) {
  return arr.filter(x => x);
}

Answer 3

我也在研究 Free Code Camp Falsy Bouncer 算法。我发现最简单的方法是：

function bouncer(arr) {
   return arr.filter(Boolean);
}

Answer 4

查看docs 中的Array.filter。特别注意回调的参数：

测试数组中每个元素的函数。使用参数（元素、索引、数组）调用。返回 true 保留元素，否则返回 false。

因此，在您的情况下，arr 是元素（并且名称不佳，因此您感到困惑）。过滤器循环遍历您的数组，并且对于它调用的每个项目，您都将当前位置的元素作为arr 传入回调。

正如其他人在 cmets 中指出的那样，您的过滤器回调的逻辑实际上对于负值是有缺陷的，但如果您知道您的数组永远不会包含负值（但这可能是危险的），这可能不是问题假设）。

当然，在内部，这是在您的数组中循环。如果不触摸数组中的每个元素，就无法过滤（未排序的）数组。查看链接中的 polyfil 以了解它可能是如何工作的（可能是因为这是一个实现细节，可能因不同的 javascript 引擎而异，但无疑会在某处涉及循环），它循环遍历您的数组，调用回调（注意参数），如果回调返回 true，则将其推送到结果数组中。

Answer 5

filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

由于false、null、0、""、undefined 和 NaN 在 JavaScript 中都是 Falsy 值，因此它们将返回 false 测试时。

function bouncer(arr) {
  var array = arr.filter(function(val){
    return val;
  });
  return array;
}

只有不返回false的值才会被添加到数组中。

Answer 6

假设所有不需要的元素在预期布尔值时都被强制转换为 false，这不会更优雅，所以：

function clear (arr){
   var stripped = [];
   for (i = 0, len = arr.length; i < len; i++){
      if (arr[i])
         stripped.push(arr[i]);
   }
   return stripped;
}

Answer 7

测试数组中每个元素的函数。用参数调用 （元素，索引，数组）。返回true保留元素，false 否则

如果你只是想要解释。数组filter() 顾名思义。如果条件错误 (false)，则删除不需要的元素。

(arr > 0|| isNaN(arr) === true)

0,  false || false  //removed
1,  true || false  
2,  true || false
3,  true || false
'ate', false || true
'',   false|| false  // removed
false  false || false //removed

输出：

[1, 2, 3, "ate"]

Answer 8

由于我是编码初学者，我的逻辑是使用原始布尔值来比较项目的 过滤，但这是在我阅读布尔对象参考之前，你看到的是 就像它写在那里一样， "如果需要，作为第一个参数传递的值将转换为布尔值。如果值被省略或为 0、-0、null、false、NaN、未定义或空字符串 ("")，则对象具有初始值值为 false。所有其他值，包括任何对象或字符串“false”，都会创建一个初始值为 true 的对象。 所以过滤器的逻辑如果它是真或假则返回值，如果是，你应该返回值 他们是真的。 另外，我并没有了解有关过滤方法的所有内容，对于我所研究的内容，我得到了 更多信息，我将在此处尝试解释。'

重新定义方法（已经存在，仅供理解） filter 方法接受一个名为 谓词，即接收的函数 一个值并返回真或假。

var results 是一个空数组，结果将通过 push 方法推送。 我们使用了一个 forEach 方法，（this，在这个上下文中应用于数组原型，这意味着您将在您定义的每个数组上都有可用的过滤器方法， 在这种情况下，array.method(args) 的 sintax 是 array.filter(args)) 一些资源 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

现在我们将对数组上的每个项目运行一个操作，使用 forEach 方法，现在我们将谓词函数应用于数组的 itch 项目，如果它返回 true，则将其添加到结果中。

Array.prototype.filter = function(predicate){   
    var results = [];

    this.forEach(function(item) {   
        if (predicate(item)) {
            results.push(item);
        }

    });
};

//-------------------正确的解决方案------------ ---------------

function bouncer (arrToFilter){

    return arrToFilter.filter(Boolean);
}

//----------没有过滤方法的代码---------

function bouncerNoFilterMethod(arrToFilter){
    var results = [];

    arrToFilter.forEach(function(arrToFilter){
        if(arrToFilter){
            results.push(arrToFilter);
        }
    });

    return  results;    
}

console.log(bouncerNoFilterMethod([7, "ate", "", false, 9]));
console.log(bouncerNoFilterMethod(["a", "b", "c"]));
console.log(bouncerNoFilterMethod([false, null, 0, NaN, undefined, ""]));
console.log(bouncerNoFilterMethod([1, null, NaN, 2, undefined]));
console.log(bouncer([7, "ate", "", false, 9]));
console.log(bouncer(["a", "b", "c"]));
console.log(bouncer([false, null, 0, NaN, undefined, ""]));
console.log(bouncer([1, null, NaN, 2, undefined]));

希望这有助于理解方法，首先不理解的是传递函数的部分，方法的谓词，如果我在这里有错误，请提出更正。

Answer 9

看起来布尔值是“FreeCodeCamp”挑战的最简单的解决方案/答案，但是尝试一些事情可能会有助于掌握“为什么”和“如何”的窍门。

function bouncer(arr) {
      return arr.filter(function(val){
        return val;
     });
    }

这使用传入的函数（回调）评估通过过滤器的所有内容，该函数返回值。如果它不返回一个值，null 等不会，它不会包含在返回中。至少这种方法帮助我理解了原因，而不是仅仅通过测试。

Answer 10

我稍微修改了https://stackoverflow.com/a/35327425/3932895，将所有没有数值的东西都设置为零

function zerofy(x){return (Boolean(x) && !isNaN(x.toString())) ? x : 0 ;}

经过测试

function clear (arr){
   var stripped = [];
   for (i = 0; i < arr.length; i++){
      stripped.push(zerofy(arr[i]));
   }
   return stripped;
}

在

clear(["written",13,0,-4,"5",true,false,undefined,null,NaN,Math.PI]);

结果

[0,13,0,-4,5,0,0,0,0,0,3.141592653589793]

Answer 11

function bouncer(arr) {
  // Don't show a false ID to this bouncer.

  function isFalsyBouncer(value){
    if(Boolean(false)||Boolean(null)||Boolean(0)||Boolean("")||Boolean(undefined)||Boolean(NaN)){

    }else{
      return value;
    }
  }
  var filtered=arr.filter(isFalsyBouncer);
  return filtered;
}