KnockOut.JS 比较两个数组并从第二个数组中删除唯一值

Question

我正在开发 Knockout.js。

var chosenFruit = ko.observableArray([]);
var allFruits   = ko.observableArray([]);

allFruits       =       [ "Apple" , "Bananna" , "Grapes" , "Oranges"]
chosenFruit     =       ["Apple" , "Bananna" , "kiwi"]

现在，由于第一个数组中不存在“Kiwi”（这意味着，在所有水果中），我想从第二个数组（chosenFruit）中删除“Kiwi”。

我想比较两个数组并从第二个数组中删除 - 第一个数组中不存在的值。

也就是说，经过比较后，第二个数组应该是：

chosenFruit   =        ["Apple" , "Bananna"]

请建议如何实现。

提前感谢您！

Answer 1

使用Array#filter方法

var allFruits = ["Apple", "Bananna", "Grapes", "Oranges"],
  chosenFruit = ["Apple", "Bananna", "kiwi"];

console.log(
  // iterate and filter out element
  chosenFruit.filter(function(v) {
    // check value present in array
    return allFruits.indexOf(v) > -1;
  })
)

---

更新 1：如果您想保留引用，请使用 Array#splice 删除元素。

var allFruits = ["Apple", "Bananna", "Grapes", "Oranges"],
  chosenFruit = ["Apple", "Bananna", "kiwi"];
// store length for iterating
var i = chosenFruit.length;

// iterate upto `0`
while (i--) {
  // check value exist in array
  if (allFruits.indexOf(chosenFruit[i]) == -1) {
    // if not present then remove it
    chosenFruit.splice(i, 1);
  }
}


console.log(chosenFruit);

---

更新 2： 通过敲除使用 Array#filter 执行类似的操作，它会生成一个新的过滤数组。

var chosenFruit = ko.observableArray(["Apple", "Bananna", "Grapes", "Oranges"]);
var allFruits = ko.observableArray(["Apple", "Bananna", "kiwi"]);

console.log(
  chosenFruit().filter(function(v) {
    return allFruits().indexOf(v) > -1;
  })
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

---

更新 3 ：如果您想更新 observableArray，请使用带有回调函数的 remove() 方法。

var chosenFruit = ko.observableArray(["Apple", "Bananna", "Grapes", "Oranges"]);
var allFruits = ko.observableArray(["Apple", "Bananna", "kiwi"]);

allFruits.remove(function(v) {
  return chosenFruit().indexOf(v) == -1;
});

console.log(allFruits())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

Answer 2

您可以通过定位并删除不应该在chosenFruits数组中的项目来执行以下操作。;

allFruits   = [ "Apple" , "Bananna" , "Grapes" , "Oranges"],
chosenFruit = ["Apple" , "Bananna" , "Kiwi", "Melon", "Cockroach"];
  discarded = chosenFruit.reduceRight((p,c,i,a) => !allFruits.includes(c) ? p.concat(a.splice(i,1)) : p,[]);
	                                                                 
console.log(chosenFruit);
console.log(discarded);

具有常规功能；

allFruits   = [ "Apple" , "Bananna" , "Grapes" , "Oranges"],
chosenFruit = ["Apple" , "Bananna" , "Kiwi", "Melon", "Cockroach"];
  discarded = chosenFruit.reduceRight(function(p,c,i,a){
                                        return allFruits.indexOf(c) === -1 ? p.concat(a.splice(i,1))
                                                                           : p;
                                      },[]);
	                                                                 
console.log(chosenFruit);
console.log(discarded);

Answer 3

console.log($(["Apple" , "Bananna" , "kiwi"]).filter([ "Apple" , "Bananna" , "Grapes" , "Oranges"]).get());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>