为什么 length 属性出现在 Javascript 中的结束标签之后

Question

我在理解“长度”属性的位置时遇到了一些困难，在我作为 JavaScript 课程的一部分制作的待办事项列表应用程序中。任务列表：const todos = [{    text: 'First task',    completed: true}, {    text: 'Second task',    completed: false}, {    text: 'Third task',    completed: true}]我的问题： 下面的代码为我提供了仍需要完成的任务总数。我不明白的是：为什么 .length 属性出现在结束“})”之后？我会假设代码是!todo.completed.length，而不是!todo.completed}).length. 我可以看到只有后者有效 - 但我试图理解为什么。谢谢你！！let remaining = todos.filter(function(todo){    return !todo.completed}).length

Answer 1

这是因为Array.prototype.filter返回一个数组。

例如，这两个语句是等效的：

[1, 2, 3].filter(function(){

  return false

}).length

和

[].length

这是因为：

[1, 2, 3].filter(function(){

  return false

})

返回[]。

var one = [1, 2, 3].filter(function() {

  return false

}) // Removes all elements from array

var two = []

console.log(one, one.length)

console.log(two, two.length)

Answer 2

首先：过滤器函数迭代每个待办事项对象并返回一个新的待办事项对象列表。

每个 todo 对象都会传递给您作为参数提供的函数（在本例中为匿名函数），仅当该函数返回 true 时，todo 对象才会添加到新列表中。

由于您想知道仍需要完成的待办事项数量，因此您返回 !todo.completed，因为当 todo.completed 为 false 时，这将返回 true。

当过滤器函数迭代每个对象时，它会返回新列表，此时您可以访问它的长度。

返回 !todo.completed.lenght 并没有任何意义，因为您试图获取布尔值的长度，而过滤函数需要 true 或 false。