js生成不重复的随机数，简单代码少-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41793354/article/details/120504820

本文介绍如何使用Vue.js实现了一个功能，用户可以动态指定数组中不重复的随机视频数量。通过简单的JavaScript方法，利用Math.random()和数组操作，展示了如何生成并管理随机数列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个项目，用户的需求大概是这样的：用户先添加大量的视频，然后用户可以输入一个数字，可以动态指定一个数组里面有多少个视频。

也就是说，总数和需要的个数都是动态的，不确定的。

实现思路就用不重复的随机数解决：

效果图：

实现代码：

<template>
  <div class="container">
    <el-button @click="getRandomNum(needNum,allNum)">js生成不重复的随机数</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
         needNum: 4, //需要几个随机数
         allNum: 10, //随机数范围从 0 到 allNum - 1随机选取
         getRandomList: [], //获取生成的随机数数组
      }
    },
    methods: {
      getRandomNum(needNum,allNum) {
        let randomList = []; //生成的随机数组
        while (randomList.length < needNum) {
          let num = Math.floor(Math.random() * allNum);
          if (randomList.indexOf(num) == -1) {
            randomList.push(num)
          }
        }
        this.getRandomList = randomList;
        console.log(this.getRandomList,'this.getRandomList')
      },
    }
  };
</script>

<style lang="scss">
  .container {
    padding: 50px;
    background-color: white;
    height: 100%;
  }
</style>

生成不重复的随机数，代码也就几行，理解indexOf就可以了

不是用vue的兄弟们，把getRandomNum方法复制一下就可以了。

加油