javascript - 如何简化元素搜索方法?

标签 javascript reactjs ecmascript-6

我做了一个方法 checkAddedTrack() ,它检查搜索的元素是否添加到用户播放列表中,但我认为这个方法有点愚蠢,你能给我提个建议吗,我怎样才能用另一种方式使它更简单,或者更聪明?

提前谢谢您!

function SearchListItem(props) {
  const {id, playlist, isSelected, clickHandler, index, title_short, duration, onClickAdd} = props;


  const checkAddedTrack = () => {
    let isTrackAdded = false;
    playlist.map(track => {
      if (track.id === id) {
        isTrackAdded = true;
      }
    });
    return isTrackAdded;
  };

  return (
    <div>
      <li className={isSelected ? `active-song` : ``} onClick={() => {
        clickHandler(index)
      }}>
        {index + 1 + ' . '}{title_short} {formatTime(duration)}
      </li>
      <button disabled={checkAddedTrack()} onClick={onClickAdd}>
        <i className={!checkAddedTrack() ? `fa fa-plus` : `fa fa-minus`}> </i>
      </button>
    </div>
  );
}

最佳答案

是的,这比您需要的要多一点,您可以使用 Array#some 方法来实现:

const checkAddedTrack = () => playlist.some(track => track.id === id)

该方法将返回一个 bool 值,具体取决于该数组中的一项或多项是否满足条件。

考虑这个播放列表的示例,您可以非常轻松地使用该函数:

const playlist = [{id:1}, {id:2}, {id:3}, {id:4}, {id:5}, {id:6}, {id:7}, ];
let id = 5;

const checkAddedTrack = () => playlist.some(track => track.id === id)

console.log(checkAddedTrack())

id = 10;

console.log(checkAddedTrack())

关于javascript - 如何简化元素搜索方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51411032/

相关文章:

javascript - React with Redux 和 Router - 服务器渲染

javascript - 将 Promise 包装在函数中与在变量中声明它之间的区别

javascript - 解构函数参数子属性

javascript - 如何修复自定义 Hook 中的 typescript 错误

javascript - 为什么这会导致串联而不是将两个数字相加?

Javascript 伪经典继承 vs 函数式继承

javascript - 如何将一个新元素添加到另一个JS中

javascript - React PWA 捕获键盘关闭事件

npm - Jest 和 ES2015 导入。 Jest 尊重 package.json 中的 pkg.module 声明

javascript - javascript 的 Facebook 登录 API 不起作用