从Knockout ObservableArray随机取对象并移除，为何异常批量删除？

兄弟，你的问题出在两个地方——Knockout绑定系统的工作机制，还有一个容易忽略的VM初始化错误，咱们一个个说清楚：

1. 先修正VM初始化的低级错误 #

你调用ko.applyBindings(PersonVM, ...)的时候，传的是构造函数本身，不是它的实例！这会导致getPerson里的this指向完全不符合预期，虽然某些环境下可能碰巧运行，但绝对是不规范的写法，正确的应该是ko.applyBindings(new PersonVM(), ...)。

2. 核心问题：绑定函数的副作用触发了循环更新 #

这才是数组被快速清空的关键：Knockout的绑定基于依赖追踪机制，它会反复执行绑定表达式，确保UI和数据完全同步。而你的getPerson是一个带副作用的函数——它不仅返回值，还修改了people这个observableArray。

咱们还原一下代码的执行流程：

• 第一次渲染时，三个<li>的with绑定依次调用getPerson()：
  1. 第一次调用：数组长度3，随机移除一个，长度变为2；
  2. 第二次调用：数组长度2，再移除一个，长度变为1；
  3. 第三次调用：数组长度1，移除最后一个，长度变为0；
• 但每次this.people.remove()都会触发people的变化，Knockout检测到变化后，会立即重新执行所有依赖people的绑定——也就是三个<li>的with绑定会再跑一遍！
• 此时数组已经空了，getPerson()里Math.random() * 0得到0，取this.people()[0]就是undefined，remove(undefined)不会报错，但数组还是空的，最终就出现了你看到的两个有内容的<li>、第三个为空的结果，控制台里的数组长度也会变成2、0、0。

简单说：你的绑定表达式在修改数据，数据修改又触发绑定重新执行，形成了快速循环，直接把数组清空了。

怎么修复？ #

解决思路很明确：不要让绑定表达式执行带有副作用的操作，也就是别在绑定里直接修改observableArray。正确做法是提前生成好要显示的随机人员列表，或者在初始化时一次性完成抽取操作，避免绑定系统反复调用移除函数。

这里给你一个修正后的方案：

HTML部分

用foreach绑定渲染提前准备好的随机列表，比重复写三个<li>更优雅：

<ul id="personList">
    <!-- ko foreach: displayPeople -->
    <li>
        <p data-bind="text: name"></p>
    </li>
    <!-- /ko -->
</ul>

JavaScript部分

在VM初始化时，从源数组里一次性抽取3个不重复的随机项，存到专门的显示数组里，避免触发循环更新：

function PersonVM() {
    // 源数据数组
    this.people = ko.observableArray([
        { name: "bob", age: 22 },
        { name: "bill", age: 23 },
        { name: "sue", age: 24 }
    ]);
    
    // 存储要显示的3个随机人员
    this.displayPeople = ko.observableArray([]);
    
    // 封装抽取不重复随机项的工具函数
    const getUniqueRandomItems = (source, count) => {
        // 拷贝源数组，避免修改原数据
        const copy = [...source()];
        const result = [];
        
        for (let i = 0; i < count && copy.length > 0; i++) {
            const randomIndex = Math.floor(Math.random() * copy.length);
            // 从拷贝数组中移除并取出随机项
            result.push(copy.splice(randomIndex, 1)[0]);
        }
        
        return result;
    };
    
    // 初始化时填充显示数组
    this.displayPeople(getUniqueRandomItems(this.people, 3));
}

// 注意这里要传VM的实例！
ko.applyBindings(new PersonVM(), document.getElementById("personList"));

这样修改后，抽取操作只在VM初始化时执行一次，不会触发绑定的循环更新，而且源数组people也能保留（如果之后还有需求的话），完美解决你的问题。

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