javascript - 如何随机打乱包含名称字符串的数组？

Question

现在已经被困在这个问题上有一段时间了。致力于乒乓球游戏生成器的 React 项目。努力寻找一种解决方案来随机打乱用户输入的名称数组。它甚至不会console.log任何东西!非常感谢。

import React, { Fragment } from "react";

const FixturesList = playerNamesArray => {
    let shuffledPlayers = [...playerNamesArray];

    let arr1 = shuffledPlayers.slice(); // copy array
    let arr2 = shuffledPlayers.slice(); // copy array again

    arr1.sort(function() {
       return 0.5 - Math.random();
    }); // shuffle arrays
    arr2.sort(function() {
      return 0.5 - Math.random();
    });

    while (arr1.length) {
        let player1 = arr1.pop(), // get the last value of arr1
        player2 = arr2[0] === player1 ? arr2.pop() : arr2.shift();
        //        ^^ if the first value is the same as name1,
        //           get the last value, otherwise get the first
        console.log(player1 + " gets " + player2);
    }

    return (
        <Fragment>
             <section>
                 <h1>Fixtures</h1>
             </section>
        </Fragment>
    );
};

export default FixturesList;

Answer 1

我喜欢将 .sort 与 Math.random 结合使用

const players = ['John', 'Jack', 'Anne', 'Marry', 'Mike', 'Jessica'];

players.sort(() => 0.5 - Math.random());

const pairs = [];

// as we need at least players to form a pair
while (players.length >= 2) { 
  const pair = [players.pop(), players.pop()];

  // Current pair
  console.log('Single pair', pair);

  // Save current pair
  pairs.push(pair);
}

// All pairs
console.log('All pairs', pairs);

我猜你已经知道这一点，但 random 会返回 0 到 1 之间的数字(不包括 1)，因此这个排序函数将随机返回 -0.5 到 0.5 之间的数字，对数组进行洗牌。

Pop 将返回数组中的最后一项并将其从数组中删除。我们弹出两次来得到一对。

希望有帮助!

<小时/>

继续评论。

为了渲染它，我将创建一个组件，并将pairs 传递给它。这是 React 的基础，也是你会经常做的事情。

import React from 'react';

component Pairs extends React.component
  renderPairs() {
    // pass pairs as prop
    return this.props.pairs.map(pair => {
      return (
        <li key={ pair.join('-') }>
          { pair.join(' vs ') }
        </li>
      )
    });
  }

  return (
    <ul>
      { this.renderPairs() }
    </ul>
  )
}

// Use it like this
// <Pairs pairs={ pairs } />