Question

在下面的小提琴JS Fiddle中，过滤器返回所有通过测试(age >= 18)的元素。在这方面，我有一些疑问：

即使我已经显式定义了回调返回的返回值，array.filter为什么仍返回数组元素，这里是对象的属性user.name
在这种情况下，innerHTML实际上是如何工作的，因为result_arr实际上是一个数组对象（typeof result_arr）和AFAIK，因此需要首先从{{ 1}}，然后写为目标元素的内容。看起来result_arr对我们有用吗？

JS

JavaScript implicitly

HTML

    function myFunction() {
       var result_arr = ages.filter(checkAdult);
      document.getElementById('demo').innerHTML = result_arr
    }


    var user = {
      name: 'Nick',
      age: 50
      }

    var ages = [32, 33, 16, 40];

    function checkAdult(age) {
        if(age >= 18){
                return user.name
         }
    }

    function myFunction() {
       var result_arr = ages.filter(checkAdult);
      document.getElementById('demo').innerHTML = result_arr
    }

Answer 1

即使我已经显式定义了回调返回的返回值，但array.filter为什么仍返回数组元素，这里是对象的属性user.name

因为过滤器需要布尔返回类型。如果为true，则元素保留；如果为false，则元素不保留。

See mdn： filter（）方法创建一个新数组，其中包含所有通过提供的功能实现的测试的元素。

在这种情况下，innerHTML实际上是如何工作的，因为result_arr实际上是数组对象（typeof result_arr）和AFAIK，因此需要首先从result_arr中提取值，然后将其写为目标元素的内容。看起来，JavaScript为我们暗中这么做了？

Array.prototype.toString()将为您隐式调用，创建一个逗号分隔的字符串。此行为是defined here in the spec

Answer 2

即使我已经明确定义了回调返回的返回值，array.filter为什么仍返回数组元素，这里是对象的属性user.name

因为filter就是这样工作的。它关心的只是回调的返回值是 falsy ¹还是 truthy 。如果要在结果数组中使用其他值，则需要map。见.filter(...).map(...)很常见（众所周知，我已经创建了一个.filterMap实用程序函数）。

在这种情况下，innerHTML实际上是如何工作的，因为result_arr实际上是一个数组对象

与result_arr一样，

String(result_arr)被强制为字符串。对于数组，强制转换为字符串与.join()相同，也与.join(",")相同。

¹“虚假”和“真实”：在条件（例如，作为布尔值）中使用时强制为false的值是虚假值。伪造的值是0，""，NaN，null，undefined，当然还有false。所有其他值都是 truthy 。

Answer 3

除了其他答案外，如果您想一次过滤和变换数组（无需对数组进行两次迭代），则可以使用reduce：

var ages = [32, 33, 16, 40];
var result_arr = ages.reduce((a, item) => {
  if (item >= 18) a.push(item  + 0.5);
  return a;
}, []);
console.log(result_arr);

设置为结果数组（array.filter的结果）时，innerHTML实际如何工作？

3 个答案: