javascript - 数组过滤器返回奇怪的结果

Question

与这个问题有关，我想试试这个

var arr = [0,1,2,true,4,{"abc":123},6,7,{"def":456},9,[10]];
arr.filter(Object.hasOwnProperty,"abc");//outputs [0, 1, 2]
arr.filter(Object.hasOwnProperty,"2222222") //[0, 1, 2, 4, 6]

有谁知道为什么过滤器返回这些值？过滤器规范和MDN 文档也没有清楚地说明过滤器的第二个参数是如何使用的。

Answer 1

的第二个参数是将作为第一个参数传递的函数Array.prototype.filter设置的值。this

所以你的代码最终是这样的：

arr.filter(function(v, i, a) {
    return Object.hasOwnProperty.call("222", v, i, a);
});

所以它基本上检查"222"字符串是否具有您在数组中枚举的属性。

从中可以清楚为什么会找到属性0,1和2- 因为这些是"222"字符串中字符的索引，9或者{"abc":123}不是 - 因为"222"字符串没有这样的属性。

更长的字符串也是如此，它也包括属性4，6只是因为它更长。

一些例子：

Object.hasOwnProperty.call("222", 1); // true, because `"222"[1]` is there
Object.hasOwnProperty.call("222", 'foo'); // false, because `"222"['foo']` is not there

Answer 2

从规范中看得很清楚

Array.prototype.filter ( callbackfn [ , thisArg ] ),

如果thisArg提供了参数，它将用作this每次调用的值callbackfn。

所以：

var arr = [0,1,2,true,4,{"abc":123},6,7,{"def":456},9,[10]];
arr.filter(Object.hasOwnProperty,"2222222");

依次转换为这些调用

"2222222".hasOwnProperty(0);             // true     -> 0
"2222222".hasOwnProperty(1);             // true     -> 1
"2222222".hasOwnProperty(2);             // true     -> 2
"2222222".hasOwnProperty(true);          // false    -> 
"2222222".hasOwnProperty(4);             // true     -> 4
"2222222".hasOwnProperty({"abc":123});   // false    -> 
"2222222".hasOwnProperty(6);             // true     -> 6
"2222222".hasOwnProperty(7);             // false    -> 
"2222222".hasOwnProperty({"def":456});   // false    -> 
"2222222".hasOwnProperty(9);             // false    -> 
"2222222".hasOwnProperty([10]);          // false    -> 
                                         // filter() => [0,1,2,4,6]

它所说的行true是因为字符串可以被索引到类似的数组中，所以具有两个字符的字符串具有索引0和1作为自己的属性。