Knockout JS:observableArray.splice(0)未克隆数组
Knockout JS: observableArray.splice(0) not cloning array?
背景
我似乎不能失去对我试图克隆的原始阵列的引用。为了具体说明我的问题,假设我有以下内容。
JSBin:http://jsbin.com/fehoq/168/edit
student.scores: Array[3]
0: 12
1: 97
2: 81
然后,我的dropLowestScores
方法打算在scores
数组中找到两个最低值,复制并将它们放入属性lowest
中。
student.lowest: Array[2]
0: 12
1: 81
不幸的是,虽然我在lowest
中得到了正确的值,而不是从scores
中复制它们,但它们是拼接的。不仅如此,我原来数组中的所有值都被耗尽了。
student.scores: Array[0]
这可能是有道理的,因为我正在调用knockout的splice
方法,但我在第一次调用splice(0)
的scores
数组的副本上调用它!我不确定这是否重要,但我拼接的可观察阵列由可观察的数字组成。
请参阅下面的脚本了解详细信息,或者参阅上面的JSBin了解完整内容。
请注意,student
只是我正在使用的模型。
JS
this.dropLowestScores = function() {
// find lowest scores for each student
ko.utils.arrayForEach(_this.students(), function(student){
//sporting function for observable values in array
var comparator = function(a,b){
if(a()<b()){
return -1;
} else if(a() > b()){
return 1;
} else {
return 0;
}
};
// tmp is a sorted clone of scores
var tmp = student.scores().sort(comparator).splice(0);
// set lowest to last two values in tmp array
student.lowest = tmp.splice((tmp.length-2),tmp.length);
// see what I'm getting
console.log(student.fullName());
console.log('student lowest: ' + student.lowest.length);
console.log('student scores: ' + student.scores().length);
});
};
更新
正如edhedges所指出的,slice
是正确的方法。comparator
的排序也与我的意图相反。
还有一点是,在创建tmp
之前,我无法进行排序,否则它会更新视图,而我不希望这样做。
最终版本应该如下所示。
this.dropLowestScores = function() {
ko.utils.arrayForEach(_this.students(), function(student){
var comparator = function(a,b){
if(a()<b()){
return 1;
} else if(a() > b()){
return -1;
} else {
return 0;
}
};
var tmp = student.scores().sort(comparator).slice(0);
student.lowest = tmp.splice((tmp.length-2),tmp.length-1);
});
};
您在这里遇到的主要问题是您调用了splice
,本应调用slice
。
正如您所看到的,slice是您试图实现的,但您使用了没有第二个参数的splice,所以您的数组被擦除了。
一旦解决了这个问题,您的comparator
函数仍然存在问题。你返回的是最高的两个,而不是最低的两个。
// updated dropLowestScores
this.dropLowestScores = function() {
ko.utils.arrayForEach(_this.students(), function(student){
var comparator = function(a,b){
if(a()<b()){
return 1;
} else if(a() > b()){
return -1;
} else {
return 0;
}
};
var tmp = student.scores.slice(0).sort(comparator);
student.lowest = tmp.splice((tmp.length-2),tmp.length);
console.log(ko.toJSON(student.lowest));
console.log(ko.toJSON(student.scores));
});
};
相关文章:
- 在数组JS中查找三个重复项
- 比较二维数组js
- 从数组(JS)中的对象调用函数
- 检查对象是否已被推入数组 Js
- 将CSV文件转换为JSON数组JS
- 解析多维数组JS的数组并记录索引
- 如何遍历直接传递到灰尘的数组.js
- 如何使用 D3 选择 JSON 数组.js 使用 .算子
- JavaScript 变量中的 PHP 数组 - JS 元素
- 将数据复制到 JavaScript D3 中的数组.js然后绘制散点图
- 基于数组JS中的值创建按钮
- 创建数组JS
- 按频率排序子字符串数组-JS
- 将数组js变量传递给php
- 使用不带嵌套循环的数组过滤对象数组js
- 创建封装数组JS
- 创建多dim数组(JS)
- 创建for循环对象并将它们压入数组js中
- 将数组JS中的所有项相乘
- 如何从二维数组(JS)中获取网格的坐标