js-JS随机打乱数组

简介: JS随机打乱数组

JS随机打乱数组

function shuffle(arr) { // 随机打乱数组
  let _arr = arr.slice() // 调用数组副本,不改变原数组
  for (let i = 0; i < _arr.length; i++) {
    let j = getRandomInt(0, i)
    let t = _arr[i]
    _arr[i] = _arr[j]
    _arr[j] = t
  }
  return _arr
}
function getRandomInt(min, max) { // 获取min到max的一个随机数,包含min和max本身
  return Math.floor(Math.random() * (max - min + 1) + min)
}

<!-- ## vue demo
::: demo

<template>
  <div>
    原数组:{{arr}}
    <button @click="clickBut">click me!打乱数组</button></br></br>
    打乱结果:{{result}}
  </div>
</template>
<script>
  export default {
    data(){
      return {
        arr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
        result: []
      }
    },
    methods:{
      clickBut(){
        this.result = this.shuffle(this.arr)
      },
      shuffle(arr) { // 随机打乱数组
        let _arr = arr.slice() // 调用数组副本,不改变原数组
        for (let i = 0; i < _arr.length; i++) {
          let j = this.getRandomInt(0, i)
          let t = _arr[i]
          _arr[i] = _arr[j]
          _arr[j] = t
        }
        return _arr
      },
      getRandomInt(min, max) { // 获取min到max的一个随机数,包含min和max本身
        return Math.floor(Math.random() * (max - min + 1) + min)
      }
    }
  }
</script>

::: -->

::: demo [vanilla]

<html>
  原数组:<span id="span1"></span>
  <button id="btn">click me!打乱数组</button> </br></br>
  打乱结果:<span id="span2"></span>
</html>
<script>
    function getRandomInt(min, max) { // 获取min到max的一个随机数,包含min和max本身
      return Math.floor(Math.random() * (max - min + 1) + min)
    }
    function shuffle(arr) { // 随机打乱数组
      let _arr = arr.slice() // 调用数组副本,不改变原数组
      for (let i = 0; i < _arr.length; i++) {
        let j = getRandomInt(0, i)
        let t = _arr[i]
        _arr[i] = _arr[j]
        _arr[j] = t
      }
      return _arr
    }
    //使用
    function $(el){
      return document.querySelector(el)
    }
    let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    const $span2 = $('#span2');
    $('#span1').textContent = arr;
    $('#btn').onclick = function () {
      $span2.textContent = shuffle(arr);
    }
  </script>

:::

相关文章
|
4天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
23 3
|
4天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
4天前
|
JavaScript Java
JS有趣的灵魂 清空数组
JS有趣的灵魂 清空数组
|
4天前
|
JavaScript
通过使用online表单的获取使用,了解vue.js数组的常用操作
通过使用online表单的获取使用,了解vue.js数组的常用操作
|
4天前
|
存储 JavaScript 前端开发
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
9 0
|
4天前
|
JavaScript 前端开发
js关于数组的方法
js关于数组的方法
11 0
|
4天前
|
JavaScript 前端开发
js怎么清空数组?
js怎么清空数组?
14 0
|
4天前
|
存储 JavaScript 前端开发
js处理数组的方法
js处理数组的方法
14 2
|
4天前
|
JavaScript 前端开发 索引
JavaScript 数组的索引方法数组转换为字符串方法
JavaScript 数组的索引方法数组转换为字符串方法
|
4天前
|
JavaScript 前端开发
JavaScript 数组的添加删除和排序
JavaScript 数组的添加删除和排序