Knockout.js 是一款基于 MVVM（Model-View-ViewModel）模式的 JavaScript 库，它提供了双向数据绑定、可观察对象和依赖跟踪等功能。其中，可观察数组是 Knockout.js 的一个重要特性，它可以让我们方便地对数组进行增删改查操作。本文将介绍如何在 Knockout.js 中对可观察数组进行过滤。
可观察数组的使用
首先，让我们回顾一下如何使用 Knockout.js 的可观察数组。假设我们有一个任务清单，其中包含多个任务：
var tasks = [
{ name: 'Task 1', isDone: true },
{ name: 'Task 2', isDone: false },
{ name: 'Task 3', isDone: true }
];我们可以通过以下方式定义一个可观察数组：
var viewModel = {
taskList: ko.observableArray(tasks)
};
ko.applyBindings(viewModel);现在，我们可以在 HTML 中使用 foreach 绑定来遍历任务清单，并对其进行修改：
<ul data-bind="foreach: taskList">
<li>
<input type="checkbox" data-bind="checked: isDone" />
<span data-bind="text: name"></span>
</li>
</ul>过滤可观察数组
接下来，我们要实现一个搜索框，能够根据输入内容来过滤可观察数组中的任务。为了实现这个功能，我们需要创建一个搜索框，并绑定它的值到 ViewModel 中：
<input type="text" data-bind="value: searchText" />
我们还需要在 ViewModel 中定义 searchText 属性和 filteredTaskList 计算属性：
-- -------------------- ---- -------
--- --------- - -
--------- --------------------------
----------- ------------------
----------------- -------------------------- -
--- ---------- - --------------------------------
------ ------------------------------------- -
------ ------------------------------------------- --- ---
---
-- -----
--
----------------------------在这个计算属性中，我们首先获取搜索框的值并转换成小写字母，然后使用 filter 方法对原始任务清单进行过滤。具体来说，我们对每个任务的名称执行 toLowerCase() 方法，并判断其是否包含搜索框的内容。如果包含，则将该任务添加到过滤后的数组中。
最后，我们可以将 foreach 绑定中的 taskList 替换成 filteredTaskList，这样就可以实现动态过滤了：
<ul data-bind="foreach: filteredTaskList">
<li>
<input type="checkbox" data-bind="checked: isDone" />
<span data-bind="text: name"></span>
</li>
</ul>总结
本文介绍了如何在 Knockout.js 中对可观察数组进行过滤。我们通过创建一个计算属性来实现动态过滤，并使用 filter 方法对原始数组进行筛选。这个功能可以应用于许多场景，例如搜索、排序等。希望本文能够帮助读者更好地理解 Knockout.js 的可观察数组和 MVVM 模式，同时也能为前端开发者提供一些指导意义。
示例代码如下：
-- -------------------- ---- -------
--- ----- - -
- ----- ----- --- ------- ---- --
- ----- ----- --- ------- ----- --
- ----- ----- --- ------- ---- -
--
--- --------- - -
--------- --------------------------
----------- ------------------
----------------- -------------------------- -
--- ---------- - --------------------------------
------ ------------------------------------- -
------ --------------------------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------