javascript - 当设置为结果(array.filter 的结果)数组时，innerHTML 实际上如何工作？

Question

在下面的 fiddle 中，JS Fiddle ，过滤器返回所有通过测试(age >= 18)的元素。我对此有两个疑问:

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

2. 在这种情况下，innerHTML 实际上是如何工作的，因为 result_arr 实际上是一个数组对象 (typeof result_arr) 并且 AFAIK ，需要首先从 result_arr 中提取值，然后写入目标元素内容。看起来，JavaScript 隐式 为我们做到了这一点？

JS

    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
    }

HTML

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

Answer 1

Why does array.filter return array elements even though I've explicitly defined a return value the callback return, here, an object's property user.name

因为就是这样filter作品。它只关心回调的返回值是falsy1还是truthy。如果要在结果数组中使用不同的值，则需要 map 。 .filter(...).map(...) 很常见(我已经知道创建一个 .filterMap 实用函数)。

How does innerHTML actually works in this case, since the result_arr is actually an array object

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

---

¹ “falsy”和“truthy”:在条件中使用时强制为 false 的值(例如，作为 bool 值)是 falsy 值。虚假值为 0、""、NaN、null、undefined、当然，假。所有其他值都是真实。