检查两个数组是不是包含相同的对象 - 反应 componentDidUpdate [重复]

Posted 2023-02-22

【中文标题】检查两个数组是不是包含相同的对象 - 反应 componentDidUpdate [重复]

【英文标题】：check if two arrays contain identical objects - react componentDidUpdate [duplicate]检查两个数组是否包含相同的对象 - 反应 componentDidUpdate [重复]

【发布时间】：2018-07-16 07:10:21

【问题描述】：

我正在使用 React 的 componentDidUpdate 生命周期方法。

我正在尝试确定两个数组是否相同。

我的prevState 数组如下所示：

prevState.players = [
  
    name: 'Wayne Rooney',
    age: 31
  , 
  
    name: 'Lionel Messi',
    age: 29
  ,
  
    name: 'Robbie Fowler',
    age: 42
  
];

this.state 数组如下所示：

this.state.players = [
  
    name: 'Wayne Rooney',
    age: 31
  , 
  
    name: 'Lionel Messi',
    age: 29
  ,
  
    name: 'Robbie Fowler',
    age: 42
  
];

如你所见，如果你展开下面的 sn-p，它们是不相等的：

let playersOne = [
    name: 'Wayne Rooney',
    age: 31
  ,
  
    name: 'Lionel Messi',
    age: 29
  ,
  
    name: 'Robbie Fowler',
    age: 42
  
];

let playersTwo = [
    name: 'Wayne Rooney',
    age: 31
  ,
  
    name: 'Lionel Messi',
    age: 29
  ,
  
    name: 'Robbie Fowler',
    age: 42
  
];

console.log(playersOne == playersTwo)

这是我的反应生命周期代码。

  componentDidUpdate(prevProps, prevState) 
    if(prevState.players != this.state.players) 
      this.updatePlayers(this.state);
    
  

谁能建议确定数组是否相等的最佳方法？

【问题讨论】：

重复 ***.com/questions/201183/… 和 ***.com/questions/1068834/…

JSON.stringify(playersOne) == JSON.stringify(playersTwo)

@AkashDathan 看起来有人会这样做

React 文档建议的一件事是使用不可变数据，因为这样的比较可能很昂贵，但您仍然需要使用来自 lodash 的 _.isEqual 或深度比较单个值

查看所有结果here

【参考方案1】：

使用 lodash 中的 _.isEqual； 使用 JSON.stringify 并比较字符串；

【参考方案2】：

您可以使用array.prototype.every：

var players = [
   name: 'Wayne Rooney'  , age: 31 , 
   name: 'Lionel Messi'  , age: 29 ,
   name: 'Robbie Fowler' , age: 42 
];

var statePlayers = [
   name: 'Wayne Rooney'  , age: 31 , 
   name: 'Lionel Messi'  , age: 29 ,
   name: 'Robbie Fowler' , age: 42 
];

var equals = players.length === statePlayers.length && players.every((e, i) => e.name === statePlayers[i].name && e.age === statePlayers[i].age);

console.log(equals);

或者，使用对象解构和Array.prototype.some。

const
  players = [
     name: 'Wayne Rooney'  , age: 31 , 
     name: 'Lionel Messi'  , age: 29 ,
     name: 'Robbie Fowler' , age: 42 
  ],
  statePlayers = [
     name: 'Wayne Rooney'  , age: 31 , 
     name: 'Lionel Messi'  , age: 29 ,
     name: 'Robbie Fowler' , age: 42 
  ],
  playersEqual = (expected, actual) =>
    actual.length === expected.length &&
      !expected.some(( name, age , i) =>
        (( name: otherName, age: otherAge ) =>
          name !== otherName || age !== otherAge)
        (actual[i]));

console.log(playersEqual(players, statePlayers));

【参考方案3】：

JSON.stringify(playersOne) == JSON.stringify(playersTwo)

【讨论】：

哈哈哈哈我喜欢这个

如果您的对象包含循环引用，这将适得其反。 JSON.stringify() 方法将无法正常工作。

如果您关心对象中键的顺序，这也是一个坏主意......JSON.stringify(a: 1, b: 2) !== JSON.stringify(b: 2, a: 1);

@Adzz 你的例子反驳了你的说法，你的意思是“如果你不关心键的顺序”？

哎呀，错字了。如果您认为示例中的两者应该相等，使用JSON.stringify 他们不会。

【参考方案4】：

您可以使用array#every 来检查两个对象是否具有相同数量的对象以及每个对象是否具有相同数量的键和值。

let playersOne = [ name: 'Wayne Rooney', age: 31 ,  name: 'Lionel Messi', age: 29 ,  name: 'Robbie Fowler', age: 42  ],
    playersTwo = [ name: 'Wayne Rooney', age: 31 ,  name: 'Lionel Messi', age: 29 ,  name: 'Robbie Fowler', age: 42  ];
 var isSame = playersOne.length === playersTwo.length && playersOne.every((o,i) => Object.keys(o).length === Object.keys(playersTwo[i]).length && Object.keys(o).every(k => o[k] === playersTwo[i][k]));
console.log(isSame);

【讨论】：

很好，但我认为在 lambda 中使用 .some 和 !== 来检查其中一个数组是否缺少另一个数组的元素可能会更有效。跨度>