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>

:::

相关文章
|
1月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
23 2
|
1月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
20 3
|
1月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
35 4
|
1月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
31 1
|
1月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
23 5
|
1月前
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
17 3
|
1月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
37 1
|
1月前
|
JavaScript 前端开发
如何在JS中声明一个数组
如何在JS中声明一个数组
18 0
|
1月前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
27 3
|
1月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
13 0