Question

我试图返回列表项的数组，如果它们中包含文本“Flexbox”的话。

我收到此错误：Uncaught TypeError: items.filter is not a function

    <ul>
        <li data-time="5:10">Flexbox 1</li>
        <li data-time="5:10">Something else</li>
        <li data-time="5:40">Flexbox 2</li>
        <li data-time="5:10">Something also else</li>
        <li data-time="5:40">More Flexbox for you</li>
    </ul>


'use strict';

var items = document.querySelectorAll('li');

var itemsFlex = items.filter(function(item) {
    return item.includes('Flexbox')
});

console.log(itemsFlex);

Answer 1

querySelectorAll会返回NodeList而不是Array。如果您想使用Array方法，可以将其转换为数组。

var items = document.querySelectorAll('li');
var itemsArray = Array.from(items);

Answer 2

querySelectorAll未返回array，这就是未定义filter（array的函数）的原因。在这种情况下，您应该从filter调用Array.prototype函数并使用textContent.indexOf(string)检查该元素是否包含您想要的文本内容（Flexbox）。样本：

var items = document.querySelectorAll('li');
var filter   = Array.prototype.filter;

var itemsFlex = filter.call(items, function(item) {
    return item.textContent.indexOf('Flexbox') >= 0;
});

console.log(itemsFlex);

请参阅此处的示例： https://jsbin.com/hibixipoyo/edit?html,js,output

Answer 3

原因是querySelectorAll没有返回数组。

您可以通过以下方式将NodeList转换为数组：

var itemsArray = Array.prototype.slice.call(document.querySelectorAll("li"));

来源：{{3}}

Answer 4

function getPrice(){ var quantity = document.getElementById('inputletters').value.length; var price = document.getElementById('lettercost'); var total = quantity*price; var cost = document.getElementById('cost'); cost.textContent = total; }返回document.querySelectorAll()。 NodeList类似于数组，但不包含NodeLists提供的许多方法，例如forEach，map，filter等。如果要使用此函数，必须将NodeList转换为数组：

Array

过滤器不是一个功能？

4 个答案: