如果你想檢測并響應一個對象上的變化，你可以使用可觀察的對象。如果您想檢測和響應一系列對象的變化，請使用`observableArray`。這在許多場景中非常有用，在這些場景中，您正在顯示或編輯多個值，并且需要在添加和刪除項目時重復顯示和消失UI的各個部分。 示例： ``` var myObservableArray = ko.observableArray(); // Initially an empty array myObservableArray.push('Some value'); // Adds the value and notifies observers ``` ***** 關鍵點：ObservalArray跟蹤數組中的對象，而不是這些對象的狀態 簡單地將一個對象放入observableArray并不能使該對象的所有屬性本身都可見。當然，如果您愿意，您可以使這些屬性可見，但這是一個獨立的選擇。`observableArray`只跟蹤它持有的對象，并在添加或刪除對象時通知偵聽器。 ***** 預填充可觀察的數組 如果希望可觀察數組不以空開頭，而是包含一些初始項，請將這些項作為數組傳遞給構造函數。例如： ``` // This observable array initially contains three objects var anotherObservableArray = ko.observableArray([ { name: "Bungle", type: "Bear" }, { name: "George", type: "Hippo" }, { name: "Zippy", type: "Unknown" } ]); ``` 從## observableArray讀取信息 在幕后，observableArray實際上是一個值為數組的可觀察對象（另外，observableArray添加了一些下面描述的附加功能）。因此，您可以通過將ObservalArray作為一個無參數的函數調用來獲取底層JavaScript數組，就像其他任何可觀察對象一樣。然后您可以從底層數組中讀取信息。例如: ``` alert('The length of the array is ' + myObservableArray().length); alert('The first element is ' + myObservableArray()[0]); ``` 從技術上講，您可以使用任何本機JavaScript數組函數來操作底層數組，但通常有更好的替代方法。KO的`observableArray`有自己的等效功能，它們更有用，因為： 它們適用于所有目標瀏覽器。（例如，本機JavaScript indexOf函數在ie8或更早版本上不起作用，但KO的indexOf可以在任何地方使用。） 對于修改數組內容的函數，如`push`和`splice`，KO的方法會自動觸發依賴項跟蹤機制，以便將更改通知所有注冊的偵聽器，并且您的UI會自動更新，這意味著使用KO的方法（即ObservalArray.push）之間存在顯著差異（…）和JavaScript本地數組方法（即`observeArray(）.push（…）`，因為后者不會向數組的訂閱者發送其內容已更改的任何通知。 ***** **indexOf** indexOf函數返回與參數相等的第一個數組項的索引。例如，myObservableArray.indexOf('Blah')將返回第一個數組項的從零開始的索引，該索引等于Blah，如果找不到匹配值，則返回值-1。 ***** **slice** slice 函數是原生 JavaScript 切片函數的 observableArray 等價物（即，它返回從給定開始索引到給定結束索引的數組條目）。 調用 myObservableArray.slice(...) 相當于在底層數組上調用相同的方法（即 myObservableArray().slice(...)）。 ***** 以下所有這些函數都相當于在底層數組上運行原生 JavaScript 數組函數，然后通知偵聽器有關更改： push( value ) — 在數組末尾添加一個新項目。 pop() — 從數組中刪除最后一個值并返回它。 unshift( value ) — 在數組的開頭插入一個新項目。 shift() — 從數組中刪除第一個值并返回它。 reverse() — 反轉數組的順序并返回 observableArray（不是底層數組）。 sort() — 對數組內容進行排序并返回 observableArray。默認排序是按字母順序排列的，但您可以選擇傳遞一個函數來控制數組的排序方式。請參閱下面排序的示例。 splice() — 從給定索引開始移除并返回給定數量的元素。例如， myObservableArray.splice(1, 3) 從索引位置 1 開始刪除三個元素（即第 2、第 3 和第 4 個元素）并將它們作為數組返回。 ***** sorted和### reversed `sorted()` — 返回數組的排序副本。 如果您想保留可觀察數組的原始順序但需要按特定順序顯示它，這比排序更可取。 默認排序是按字母順序排列的，但您可以選擇傳遞一個函數來控制數組的排序方式。 您的函數應該接受數組中的任意兩個對象，如果第一個參數較小，則返回負值，正值表示第二個較小，或者為零以將它們視為相等。 例如，要按姓氏對“person”對象數組進行排序，您可以編寫： ``` var mySortedArray = ko.pureComputed(function () { return myObservableArray.sorted(function (left, right) { return left.lastName === right.lastName ? 0 : left.lastName < right.lastName ? -1 : 1; }); }); ``` `reversed() `— 返回數組的反轉后的副本。 ***** replace，remove和removeAll observableArray 添加了一些默認在 JavaScript 數組中找不到的更有用的方法： replace( oldItem, newItem ) — 用 newItem 替換與 oldItem 相等的第一個值。 remove( someItem ) — 刪除所有等于 someItem 的值并將它們作為數組返回。 remove( function (item) { return item.age < 18; } ) — 刪除所有年齡屬性小于 18 的值，并將它們作為數組返回。 removeAll( ['Chad', 132, undefined] ) — 刪除所有等于 'Chad'、123 或 undefined 的值，并將它們作為數組返回。 removeAll() — 刪除所有值并將它們作為數組返回。 ***** 確定屬性是否為 observableArray 在某些情況下，以編程方式確定您是否正在處理 observableArray 很有用。 Knockout 提供了一個實用函數 `ko.isObservableArray` 來幫助解決這種情況。 ***** 通常，一個 observableArray 會在它發生更改后立即通知其訂閱者。 但是如果 observableArray 被重復更改或觸發昂貴的更新，您可能會通過限制或延遲更改通知來獲得更好的性能。 這是使用 rateLimit 擴展器完成的，如下所示： ``` // Ensure it notifies about changes no more than once per 50-millisecond period myViewModel.myObservableArray.extend({ rateLimit: 50 }); ``` 跟蹤數組更改 盡管您可以像任何其他 observable 一樣訂閱和訪問 observableArray，但 Knockout 還提供了一種超快速方法來找出 observable 數組的變化情況（即，剛剛添加、刪除或移動了哪些項目）。 您訂閱數組更改如下： ``` obsArray.subscribe(fn, thisArg, "arrayChange"); ``` 訂閱變更的主要優點： 在大多數情況下，性能是 O(1)，即基本上沒有性能影響，因為對于簡單的操作，（推送、拼接等）Knockout 提供更改日志而不運行任何差異算法。 如果您在不使用典型的數組變異函數的情況下進行了任意更改，則 Knockout 僅依賴于算法。 更改日志只為您提供實際更改的項目。 以下是如何報告更改的示例： ``` var myArray = ko.observableArray(["Alpha", "Beta", "Gamma"]); myArray.push("Delta"); // Changes: [{ index: 3, status: 'added', value: 'Delta' }] // New value: ["Alpha", "Beta", "Gamma", "Delta"] myArray.pop(); // Changes: [{ index: 3, status: 'deleted', value: 'Delta' }] // New value: ["Alpha", "Beta", "Gamma"] myArray.splice(1, 2, "Omega"); // Changes: // [{ index: 1, status: 'deleted', value: 'Beta' }, // { index: 1, status: 'added', value: 'Omega' }, // { index: 2, status: 'deleted', value: 'Gamma' }] // New value: ["Alpha", "Omega"] myArray.reverse(); // Changes: // [{ index: 0, moved: 1, status: 'deleted', value: 'Alpha' }, // { index: 1, moved: 0, status: 'added', value: 'Alpha' }] // New value: ["Omega", "Alpha"] ``` 如上所示，更改報告為添加和刪除值的列表。 刪除項的索引引用原始數組，添加項的索引引用新數組。 當項目被重新排序時，如上面的最后一個例子所示，您還將獲得移動的信息。 您可以選擇忽略移動的信息，并將其解釋為刪除的原始 Alpha 和添加到數組末尾的不同 Alpha。 或者，您可以認識到移動的信息告訴您，您可以將添加和刪除的值視為僅更改位置的同一項目（通過匹配索引）。 observableArray 在構造時啟用了數組跟蹤，但您可以擴展任何其他訂閱（即 ko.observable 和 ko.computed），如下所示： ``` trackable = ko.observable().extend({trackArrayChanges: true}); ```