vue 随机取一个数组中的4项数据不重复

可以使用 Fisher-Yates 洗牌算法来实现随机取不重复的数组元素。具体步骤如下：

1. 首先，将数组中的元素按照顺序排列。
2. 然后，从数组的最后一个元素开始，向前遍历数组，对于每个元素，随机生成一个小于等于它的下标，将该元素与随机下标对应的元素交换位置。
3. 重复步骤 2 直到遍历到数组的第一个元素，此时数组中前面的 4 个元素就是随机取的不重复元素。

示例代码如下：

function getRandomItems(arr, count) {
  const result = [];
  const len = arr.length;
  for (let i = len - 1; i >= len - count; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]];
    result.push(arr[i]);
  }
  return result;
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = getRandomItems(arr, 4);
console.log(result); // [2, 5, 9, 6]，随机取 4 个不重复的元素

相关问题

vue 随机取一个数组中的数据

可以使用 Math.random() 方法生成一个随机数，再用该随机数乘以数组长度，取整数部分作为数组下标，即可随机取得数组中的数据。具体代码如下：

var arr = [1, 2, 3, 4, 5];
var randomIndex = Math.floor(Math.random() * arr.length);
var randomData = arr[randomIndex];
console.log(randomData); // 随机输出数组中的一个数据

在vue中定义一个数组，如何输出数组中的指定数据

在 Vue.js 中，你可以通过模板语法或者 JavaScript 部分来访问并输出数组中的特定数据。这里提供两种常见的方法：

1. **模板语法（HTML部分）**：

   <template>
     <ul>
       <li v-for="item in items" :key="item.id">{{ item.name }}</li> <!-- 如果你想显示 name 属性 -->
     </ul>
   </template>

这里 `v-for` 是 Vue 的指令，它会遍历名为 `items` 的数组，并将每个元素的数据赋给 `item`。`:key` 是为了优化虚拟DOM的更新。

2. **JavaScript (script部分）**：

   data() {
     return {
       items: [
         { id: 1, name: 'Item 1' },
         { id: 2, name: 'Item 2' }
       ]
     };
   },
   
   computed: {
     // 使用 computed 计算属性来过滤、处理数据
     displayNames() {
       return this.items.map(item => item.name);
     }
   },
   
   template: `
     <ul>
       <li v-for="name in displayNames" :key="name">{{ name }}</li>
     </ul>
   `,

在这个例子中，`displayNames` 是一个计算属性，会返回经过处理的 `items` 数组，然后在模板中遍历并输出 `name`。