如何使用Knockout扩展器返回不影响原可观察数组的排序结果？

问题出在你直接对target()返回的数组执行排序——因为target()拿到的是原observableArray底层数组的引用，而数组的sort()方法是原地排序，会直接修改原数组的顺序。要实现只返回排序后的副本且不影响原数组，核心是先创建原数组的浅拷贝，再对拷贝排序。

因为你需要保留嵌套的observable和扩展属性，所以不能用ko.toJS或ko.toJSON（这些会把observable转换成原始值），而是要用浅拷贝的方式，比如数组的slice()方法或者ES6的扩展运算符[...arr]，这两种方式都会创建新数组，但数组里的元素还是原对象的引用，完美保留嵌套的observable和它们的扩展属性。

下面是修改后的defaultSort扩展器实现：

ko.extenders.defaultSort = function(target, sortConfig) {
  // 根据传入的配置定义排序函数
  const getSortFn = () => {
    const { key, direction = 'asc' } = sortConfig;
    return (a, b) => {
      // 解包属性值（处理嵌套observable）
      const valA = ko.unwrap(a[key]);
      const valB = ko.unwrap(b[key]);
      
      if (valA < valB) return direction === 'asc' ? -1 : 1;
      if (valA > valB) return direction === 'asc' ? 1 : -1;
      return 0;
    };
  };

  // 新增sorted方法，返回排序后的副本
  target.sorted = function() {
    // 创建原数组的浅拷贝，避免修改原数组
    const arrayCopy = target().slice(); 
    // 或者用ES6扩展运算符：const arrayCopy = [...target()];
    // 对拷贝数组执行排序
    return arrayCopy.sort(getSortFn());
  };

  return target;
};

使用示例 #

// 定义带嵌套observable的对象
const TodoItem = function(title, priority) {
  this.title = ko.observable(title);
  this.priority = ko.observable(priority);
};

// 创建observableArray并应用扩展器，按priority升序排序
const todos = ko.observableArray([
  new TodoItem("买菜", 2),
  new TodoItem("写代码", 1),
  new TodoItem("打扫卫生", 3)
]).extend({
  defaultSort: { key: 'priority', direction: 'asc' }
});

// 获取排序后的数组
const sortedTodos = todos.sorted();

// 原数组顺序未变
console.log(todos().map(item => item.title())); // ["买菜", "写代码", "打扫卫生"]
// 排序后的数组按priority升序
console.log(sortedTodos.map(item => item.title())); // ["写代码", "买菜", "打扫卫生"]

// 嵌套observable依然保留，可以正常绑定
sortedTodos[0].title("更新代码任务");
console.log(sortedTodos[0].title()); // "更新代码任务"

关键说明 #

• slice()和[...target()]都是浅拷贝，只会复制数组结构，不会复制内部的对象，因此嵌套的observable和它们的扩展属性完全保留，不影响后续绑定。
• sort()方法作用在拷贝后的新数组上，原observableArray的底层数组不会被修改，完全符合你的需求。

内容的提问来源于stack exchange，提问作者SventoryMang