javascript - jQuery 拼接 inArray 与多个关键对象

Question

这里是 Javascript 新手 --

我有以下数组:

var group = ({ 
        one: value1,
        two: value2,
        three: value3
    });

我想检查数组“group”是否是“groupsArray”的一部分，如果不是则添加它，如果是则删除它。

var groupLocate = $.inArray(group, groupsArray);
if(groupLocate ==-1){
        groupsArray.push(group);
        } else {
        groupsArray.splice($.inArray(group, groupsArray),1);
        }

此方法适用于单值数组。不幸的是，在这种情况下，我无法使用三个键和值来工作，因为 groupLocate 总是返回 -1。

我做错了什么？

谢谢。

Answer 1

首先，它有助于理解为什么 $.inArray() 不起作用。让我们尝试一个更简单的案例。将其粘贴到浏览器的 JavaScript 控制台中加载了 jQuery 的页面(例如我们正在访问的页面)并运行它:

var object = { a: 1 };
var array = [ { a: 1 } ];
console.log( '$.inArray: ', $.inArray( object, array ) );

(注意术语:您的 group 变量是对象，而不是数组。)

现在看起来 object 在数组中，对吧？为什么它会打印 -1 呢？试试这个:

console.log( object );
console.log( array[0] );

它们看起来一样。怎么样:

console.log( '== or === works? ', object == array[0], object === array[0] );

或者更简单:

console.log( 'Does {a:1} == {a:1}? ', {a:1} == {a:1} );
console.log( 'What about {} == {}? ', {} == {} );

那些都打印false!

这是因为两个恰好内容相同的对象仍然是两个独立的对象，当你使用==或===来比较两个对象时，您实际上是在测试它们是否都是对同一个对象的引用。两个不同的对象永远不会比较相等，即使它们包含完全相同的内容。

$.inArray() 的工作方式类似于使用 === 运算符来比较两个对象 - 它不会在数组中找到对象，除非它是 相同的对象，而不仅仅是具有相同内容的对象。

知道这一点后，这是否暗示了解决问题的任何可能方法？您可以通过多种方式编写自己的代码来在数组中搜索您的对象，或者您可能会发现使用诸如 Underscore.js 之类的库会很有帮助。其中有许多对数组和对象有用的方法。

例如，您可以使用 _.findWhere( groupsArray, group )找到第一个匹配项 - 需要注意的是它只比较 group 对象中的属性。例如，如果 group 是 {a:1}，它将匹配 groupsArray 数组中的一个对象是 {a: 1,b:2}.

如果你需要精确匹配，你可以结合Underscore的_.find()和 _.isEqual()方法:

var index = _.find( groupsArray, function( element ) {
    return  _.isEqual( element, group );
});

现在要注意最后一件事。您将 group 对象推送到 groupsArray 数组的代码 - 您知道推送实际的 group 对象本身。它不会在数组中复制它，它是对同一个对象的引用。 (具有讽刺意味的是，这意味着您在数组中查找 group 的原始代码实际上可以在您自己将相同的 group 对象推送到数组的情况下工作。)

如果你想确保 groupsArray 中的元素都是它们自己的独立对象，而不是对代码中 float 的另一个对象的引用，你可以使用另一个 Underscore 方法来做一个浅层的复制:

groupsArray.push( _.clone(group) );

但是，如果 group 有任何嵌套对象，则不会复制它们。 (我在 Underscore 中没有看到深度复制功能，尽管如果需要，您可以编写一个。)