数组查寻的性能优化--Set

问题

查询数组是否包含某一项时，我们一般会使用 includes 和 indexof 来检查它是否被选中。但是如果数组非常大，则这可能会成为性能问题，因为带有 includes 的数组搜索需要线性时间。

优化

要解决这个问题，可以使 Set 对象，它提供了快速的 has 操作。

例子

实现多选功能，并且如果点击项之前已选中则取消选择

import { useState } from 'react';
import { letters } from './data.js';
import Letter from './Letter.js';

export default function MailClient() {
  const [selectedId, setSelectedId] = useState(new Set());

  // TODO: 支持多选
  const selectedCount = selectedId.size;

  function handleToggle(toggledId) {
    // TODO: 支持多选
    let list=new Set(selectedId);
    if(list.has(toggledId)){
      list.delete(toggledId)
    }else{
      list.add(toggledId)
    }
    setSelectedId(list);
  }

  return (
    <>
      <h2>Inbox</h2>
      <ul>
        {letters.map(letter => (
          <Letter
            key={letter.id}
            letter={letter}
            isSelected={
              // TODO: 支持多选
               selectedId.has(letter.id)
            }
            onToggle={handleToggle}
          />
        ))}
        <hr />
        <p>
          <b>
            You selected {selectedCount} letters
          </b>
        </p>
      </ul>
    </>
  );
}