如何使用 Array.prototype.filter 过滤对象？

Question

给定

var arr = [1,2,true,4,{"abc":123},6,7,{"def":456},9,[10]]

我们可以使用Number构造函数过滤数组arr中的数字项

var res = arr.filter(Number); // [1, 2, true, 4, 6, 7, 9, Array[1]]

true 和 [10] 是否会出现在结果数组中？如果我们用false 替换true arr

var arr = [1,2,false,4,{"abc":123},6,7,{"def":456},9,[10]] 
var res = arr.filter(Number) // [1, 2, 4, 6, 7, 9, Array[1]]

使用Array.isArray

var res = arr.filter(Array.isArray) // [Array[1]]

String

var res = arr.filter(String) // [1, 2, true, 4, Object, 6, 7, Object, 9, Array[1]]

如果我们想过滤 arr 中的对象，在索引 4 ， 7 处，我们尝试

var res = arr.filter(Object) // [1, 2, true, 4, Object, 6, 7, Object, 9, Array[1]]

虽然我们更喜欢简单地调用arr.filter(Object)，但我们可以传递一个函数调用；尝试Object 的不同属性，以便我们最终找到可以用作函数或构造函数的属性或方法，以作为模式传递给arr.filter(/* method, constructor, other approach */) 以返回与对象匹配的过滤结果，甚至是属性名称或值输入数组中的对象。

我们开始，天真地，检查数组中的项目是否有一个constructor，而name等于"Object"

 var res = arr.filter(function(prop) {
  return prop.constructor.name === "Object"
 }) // [Object, Object]

虽然当我们向arr 添加一个对象时；例如;

 var c = Object.create(null); arr.push(c); 

 var res = arr.filter(function(prop) {
   return prop.constructor.name === "Object"
 }) // `Uncaught TypeError: Cannot read property 'name' of undefined`

cprototype 和 constructor 是 undefined。虽然我们确信这不会返回预期的结果

var n = arr.filter(Object.hasOwnProperty, "abc"); // [1, 2]

至少没有返回错误；让我们继续

var n = arr.filter(function(prop, val) {
          return prop.hasOwnProperty(this.valueOf())
        }, "abc"); // [Object abc: 123__proto__: Object]

返回预期的结果；虽然我们正在尝试使用

var n = arr.filter(/* function reference */, this /* optional parameters passed */)

到

1. 为Object 过滤数组：{} 对象；即使对象没有定义的原型或构造函数；可选地将JSON 字符串"{"abc":123}" 转换为对象；虽然我们还没有走到这一步；

2. 将属性名称传递给.filter(callback, this) 模式，其中this 用作属性名称或对象的值；或利用使用filter.bind、.call 或.apply 或其他方法的方法从输入数组中过滤对象 - 不使用完整

   .filter(function(prop, value) {})

   模式。我们如何将Object.hasOwnProperty() 调用强制转换为类似于

   的模式

   .filter(Object.hasOwnProperty, "abc")

?

在搜索类似问题并找到 JS Array.prototype.filter on prototype method 后提及 .call、.bind 和 .apply。虽然不确定如何实现过滤对象和具有上述特定属性的对象中描述的方法。

注意，问题也可以通过destructuring 或其他es-6、es-7 方法解决，与.filter() 相比，提供可比较甚至更严格的结果。也就是不使用.filter()

   function(prop, value) {

   }

模式。返回对象；即Object，{}；和按属性过滤的对象；按属性值过滤的对象。

---

问题：

1. 如何在不使用匿名函数callbackpattern 的情况下过滤传递给Array.prototype.filter() 的数组中带有或不带有Object 原型或构造函数的对象？

2. 如何在不使用匿名函数callback 模式的情况下通过传递属性名称或值以匹配对象来过滤传递给Array.prototype.filter() 的数组中的特定对象？

Answer 1

如何过滤带有或不带有 Object 原型或构造函数的对象 在传递给 Array.prototype.filter() 的数组中，而不使用 匿名函数回调模式？

根据spec

callbackfn 应该是一个接受三个参数的函数，并且 返回一个可强制为布尔值 true 或 false 的值

Number object（函数的构造函数）确实返回 NaN 以进行错误的数字转换，但 String 和 Object 构造函数不返回 false 值（是的，filter(Number) 也过滤掉 0）

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

你可以创建一个客户函数OBJ，

function OBJ(value,index,arr){ return typeof value === "object" && !Array.isArray(value) }

或者数组也欢迎出现在结果集中然后删除Array.isArray检查

function OBJ(value,index,arr){ return typeof value === "object" }

与

一起使用时

arr.filter(OBJ); //outputs [{"abc":123},{"def":456}]

Answer 2

如果不创建自己的函数，就没有真正安全的方法。另外因为Object的定义太宽泛，所以非常复杂。

让我们从以下开始：

var types = ['1', 2, true, null, undefined, [], {}, new Date()];

并运行以下命令：

types.map((e) => typeof e);
// ["string", "number", "boolean", "object", "undefined", "object", "object", "object"]

你认为null 是Object 吗？我不这么认为。您是否认为Array 是Object，因为Array 是 Object 的一个实例？我也不确定。

您可以尝试以下方法：

types.map(Object.isExtensible);
// [false, false, false, false, false, true, true, true]

这从结果中排除了null，但数组仍然存在于此处。 Date Object 以及任何其他 Object 和任何 prototype 都在这里，例如new Boolean() 也将是 Object。此外，该对象可能会被冻结，并且这里也不会以 Object 的形式返回。

所以这里的两个例子都成功地证明了Object的定义过于宽泛，不能真正用有用的方式来处理。

Answer 3

您似乎想要过滤数组中具有特定类型的元素。将适当的函数传递给filter：

array.filter(istype("String"))

你现在只需要写istype：

function istype(type) {
  return function(x) {
    return Object.prototype.toString.call(x) === '[object ' + type + ']';
  }
}

您似乎认为可以通过说filter(Number) 等来过滤数字。但这行不通。 Number 只是另一个函数，它试图将某些东西变成一个数字（not 检查它是否是一个数字）。然后，filter 根据结果是真还是假过滤数组。 Number 显然会为任何非零数产生一个真值，true。对于字符串、对象或几乎任何其他内容，它将返回 NaN，这是虚假的，但有一些奇怪的例外情况，例如为 [] 或全空字符串返回 0。

与字符串相同。 String 只是另一个函数，它试图将某些东西变成一个字符串。然后，filter 根据结果是真还是假过滤数组。 String 将为非空字符串以外的几乎所有内容生成真值。

这与解构无关；为什么你会认为它会呢？您可能想删除帖子中不幸的部分。也不清楚您所说的“在没有回调的情况下调用过滤器”是什么意思——使用回调来确定要过滤哪些元素是filter 的整个 DNA。当您说function(prop, value) { } 模式时，也不清楚您指的是什么模式。

在问题的最后，您提出了两个具体问题：

如何在不使用匿名函数回调模式的情况下过滤传递给Array.prototype.filter()的数组中带有或不带有Object原型或构造函数的对象？

您可以通过提供一个确定特定元素是否为对象的函数从输入数组中过滤对象。那不是对象原型或构造函数Object 是什么，所以这对你没有帮助。您必须编写一个小函数来传递给filter，这就是它的工作原理。它可以是匿名的，也可以在别处定义并传入

如何在不使用匿名函数回调模式的情况下，通过传递属性名称或值来匹配对象，从而过滤传递给 Array.prototype.filter() 的数组中的特定对象？

“传递属性名称或值以匹配对象”是什么意思？您的意思是，过滤掉缺少特定属性名称或值的元素吗？然后编写一个函数来做到这一点。没有用于此目的的内置函数，如果这是正在寻找的。​​p>

Answer 4

在不传递回调函数的情况下，您可以通过使用RegExp.prototype.test 方法并绑定正则表达式来传递正则表达式

var arr = [1,2,true,4,{"abc":123},6,7,{"def":456},9,[10]]

var res = arr.filter(RegExp.prototype.test.bind(/\[object Object\]/));

console.log(res)

这也将匹配任何包含 [object Object] 的字符串，但字符串似乎不太可能包含这些确切的单词，除非您犯了一个错误并在数组中包含了字符串化的对象。

Answer 5

在 ES6 中，您列出的示例值将执行以下操作：

arr.filter(Object.isExtensible)

显然，这将排除通过调用Object.freeze、Object.seal 或Object.preventExtensions 标记为不可扩展的对象。除非您打算使用这些，否则我相信这可以完成工作。

var arr = [
    /* primitives: */
    2, true, "str", null, undefined, NaN, 
    /* objects */
    new Number(2), {a:1}, Object.create(null), [10], x=>x, new Date(), new Set()
];

var objects = arr.filter(Object.isExtensible);

console.log(objects);

Answer 6

到目前为止最接近的已经能够达到要求，也匹配Object.create(null)

var res = []; for (let p of arr) /^\{?.+\}$/.test(JSON.stringify(p)) && res.push(p)