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

【问题标题】：searching item in a knockout observable array case insensitive在敲除可观察数组中搜索项目不区分大小写
【发布时间】：2020-03-07 19:18:59
【问题描述】：

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

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

但这不起作用。基本上，我想检查 arrList2 中是否存在 arrList 中的元素（不区分大小写检查），两者都是 ko 可观察数组。有什么建议吗？

【问题讨论】：

标签： knockout.js comparison observable

【解决方案1】：

你可以使用var differences = ko.utils.compareArrays(arrList(), arrList2());
它会给你一个数组，其中包含看起来像这样的项目{status: "added", value: originalItem}

状态将是这三个值之一added, deleted, retained
看看这篇文章 - Utility Functions in 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>

【讨论】：

谢谢，这有点广泛，但可以达到目的。我刚刚切换到使用函数： function( element, array ) { var len = array.length; var str = element.toString().toLowerCase(); for ( var i = 0; i

【解决方案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
    }
});

【讨论】：

谢谢，但我比较的元素也需要小写，对吧？我切换到使用函数。