Question

我有一些代码应该遍历对象数组，并且如果name值在数组中的任何位置重复，则代码应显示“ repeatedName”。如果不是，则为“ not repeatName”。

export default function App() {
  const arr = [
    {
      name: "John",
      age: 22
    },
    {
      name: "Julia",
      age: 28
    },
    {
      name: "John",
      age: 22
    },
    {
      name: "Bill",
      age: 22
    }
  ];

  return (
    <div className="App">
      {arr.map((i, k) => (
        <p>
          {arr[k + 1] !== undefined && i.name === arr[k + 1].name
            ? "repeatedName"
            : "not repeatedName"}
        </p>
      ))}
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

现在我明白了：

not repeatedName

not repeatedName

not repeatedName

not repeatedName

但是预期结果是：

not repeatedName

not repeatedName

repeatedName

not repeatedName

演示：https://codesandbox.io/s/unruffled-shaw-0mdxi?file=/src/App.js:450-462 如何更改我的代码以获得描述的结果？

Answer 1

为了获得重复项，您将需要将唯一名称存储在另一个数组中，然后在对象循环中引用该数组。

以下内容将遍历对象，并将人员名称添加到数组中。然后，当它继续循环时，将使用我们已经知道的名称来检查名称。

const uniqueNames = []
const people = [
  {
    name: "John",
    age: 22
  },
  {
    name: "Julia",
    age: 28
  },
  {
    name: "John",
    age: 22
  },
  {
    name: "Bill",
    age: 22
  }
]

people.forEach((person) => {
  if (uniqueNames.indexOf(person.name) > -1) {
    console.log('Repeated')
    return
  }
  uniqueNames.push(person.name)
  console.log('Not repeated')
})

Answer 2

这是完成任务的另一种方法（仅适用于此任务）：（卡尔的解决方案更优雅）

  const arr = [
    {
      name: "John",
      age: 22
    },
    {
      name: "Julia",
      age: 28
    },
    {
      name: "John",
      age: 22
    },
    {
      name: "Bill",
      age: 22
    }
  ];


  return (
    <div className="App">

      {arr.map((i,k)=>{

          const isFound = k-1 > 0 && arr.slice(0, k-1).some( el => {
            return el.name === i.name; 
          })
          return isFound ? <p>repeatedName</p> : <p>not repeatedName</p>
      })}

    </div>
  );
}

Answer 3

假设您要检查名称是否先前出现在数组中的任何位置，您可以使用map来执行此操作-但这看起来非常笨拙和笨拙：

{arr.map((i, k) => (
    <p>
      {arr[k - 1] !== undefined && arr.slice(0, k).some(obj => obj.name === arr[k].name) 
        ? "repeatedName"
        : "not repeatedName"}
    </p>
))}

虽然我通常喜欢使用map等“功能样式”，但在这里我认为使用带有循环和某些内部状态的命令式样式更合适：

const getRepeatedStates = arr => {
    const names = [];
    const result = [];
    for (let i = 0; i < arr.length; i++) {
        const currentName = arr[i].name;
        result.push(names.includes(currentName) ? "repeatedName" : "not repeatedName";
        names.push(currentName);
    } 
    return result;
}

然后在返回的JSX中使用

{getRepeatedStates(arr).map(text => (<p>{text}</p>)}

Answer 4

有一个方便的JavaScript对象，可以很容易地识别出此类重复项。

它称为Set。使用Set.prototype.add()添加到集合中，并使用Set.prototype.has()确定集合中是否有值。值在集合中只能存在一次。

const arr = [
  { name: "John", age: 22 },
  { name: "Julia", age: 28 },
  { name: "John", age: 22 },
  { name: "Bill", age: 22 }
];

const nameSet = new Set();
let nameStats = arr.map(el => {
  let status = nameSet.has(el.name) ?
    "repeatedName" : "not repeatedName";
  nameSet.add(el.name);
  return status;
});

console.log('nameStats:', nameStats);

检查一个值是否等于另一个

4 个答案: