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 } />

如何随机混洗包含名称字符串的数组？

1 个答案: