在敲除可观察数组中搜索项目，不区分大小写

Question

我正在尝试比较两个数组中的项目：

ko.utils.arrayForEach(arrList, function (item) {
if (arrList2().findIndex(a => item.toLowerCase() === a.toLowerCase())>=0) {
// found similar item in arrlist2, so, handle it
}
}

但这是行不通的。基本上，我想检查arrList中的一个元素是否存在于arrList2中(不区分大小写的检查(，两者都是ko可观察数组。有什么建议吗？

Answer 1

您可以使用var differences = ko.utils.compareArrays(arrList(), arrList2());
它将为您提供一个包含类似于{status: "added", value: originalItem}的项目的数组

状态将是这三个值之一added, deleted, retained
看看这篇文章-KnockoutJS 中的实用函数

var data = [
{
id: 1,
name: "Test 1"
},
{
id: 2,
name: "Test 2"
},
{
id: 3,
name: "Test 3"
}
];
function ViewModel() {
var self = this;
self.list1 = ko.observableArray(data.slice(0));
self.list2 = ko.observableArray(data.slice(0));
var item = data[0];
self.list2.remove(item);
self.list2().push({
id: 5,
name: "Test 5"
});
self.listDiff = ko.pureComputed(function() {
return ko.utils.compareArrays(self.list1(), self.list2());
});
self.listReverseDiff = ko.pureComputed(function() {
return ko.utils.compareArrays(self.list2(), self.list1());
});
self.sameItems = ko.pureComputed(function() {
return self.list1().filter(function(item1) {
var arr = self.list2().filter(function(item2) {
return (
item1.name.toString().toLowerCase() ===
item2.name.toString().toLowerCase()
);
});
return arr.length > 0;
});
});
}
var vm = new ViewModel();
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<h3>List 1</h3>
<pre data-bind="text: ko.toJSON(list1)"></pre>
<h3>List 2</h3>
<pre data-bind="text: ko.toJSON(list2)"></pre>
<h3>Items in List 1 that exist in List 2</h3>
<pre data-bind="text: ko.toJSON(sameItems)"></pre>

<h3>List 1</h3>
<ul data-bind="foreach: list1">
<li><span data-bind="text: id"></span> - <span data-bind="text: name"></span></li>
</ul>
<h3>List 2</h3>
<ul data-bind="foreach: list2">
<li><span data-bind="text: id"></span> - <span data-bind="text: name"></span></li>
</ul>
<h3>List1 vs List2 differences</h3>
<ul data-bind="foreach: listDiff">
<li>
<span data-bind="text: status"></span>
<pre data-bind="text: ko.toJSON($data)"></pre>
</li>
</ul>
<h3>List2 vs List1 differences</h3>
<ul data-bind="foreach: listReverseDiff">
<li>
<span data-bind="text: status"></span>
<pre data-bind="text: ko.toJSON($data)"></pre>
</li>
</ul>

Answer 2

您可以使用Array.prototype.map创建一个全小写版本的arrayList2，然后找出arrayList1中的项目是否也出现在arrayList2中是很简单的：

let arrList2LC = arrList2().map((item) => item.toLowerCase());
arrList1().forEach((item) => {
if (arrList2LC.indexOf(item.toLowerCase() > -1) {
// item is present in arrList2
}
});