学习JS的第四天之排序-CSDN博客

本文链接：https://blog.csdn.net/HtmlNewPeople/article/details/120799173

学习JS的第四天之排序

其他学习笔记：点击前往

文章目录

学习JS的第四天之排序
前言
1、冒泡排序
2、选择排序
3、Math方法
4、简单练习
总结

前言

数组排序的方法和和内置的数学方法

1、冒泡排序

比较相邻的两个元素，根据相邻元素的大小交换位置。

    console.time('冒泡排序：');
    for(var k = 0; k < arr.length - 1; k++) {
      for(var i = 0; i < arr.length - 1 - k; i++) {
        if(arr[i] > arr[i + 1]) {
          var tem = arr[i];
          arr[i] = arr[i + 1];
          arr[i + 1] = tem;
        }
      }
    }
    console.timeEnd('冒泡排序：');
    console.log(arr);

2、选择排序

在未排序中找到最小的，放在开始位置，然后再从剩余未排序元素中继续寻找较小的元素，放在后面。

var arr = [1,25,55,88,446,549,456,123,9813,8,4,123]
console.time('选择排序：')
    var len = arr.length;
    for(var n = 0; n < len - 1; n++) {
      for(var j = n + 1; j < len; j++) {
        if(arr[n] > arr[j]) {
          var tem2 = arr[n];
          arr[n] = arr[j];
          arr[j] = tem2;
        }
      }
    }
    console.timeEnd('选择排序：');
    console.log(arr);

3、Math方法

3.1 概念
    是一个内置对象，有很多方法，主要提供了一些常用的数学方法。

3.2 API
    * Math.PI            //圆周率，所有的常量都是大写，都是以Math开头的。
    * Math.random()      //得到0·10之间的随机数。
    * Math.round(x)      //四舍五入。
    * Math.floor(x)      //去掉小数点。
    * Math.ceil(x)       //向上取整。
    * Math.abs(x)        //绝对值
    * Math.max(x，z，c)  //取最大值
    * Math.min(x，z，c)  //取最小值    ...展开符
    * Math.pow(x，y)     //x的y次幂
    * Math.log (x)       //返回x的自然对数

    得到指定范围内随机整数的公式：
        Math.fool(Math.random() * (max - min + 1) + min)

3.3三角函数
    * Math.sign(x)        //返回一个数的符号。得知一个数是整数还是负数或者0。
    * Math.sin(x)         //正弦
    * Math.cos(x)         //余弦
    * Math.acos(x)        //反余弦
    * Math.asin(x)        //反正弦
    * Math.tan(x)         //正切
    * Math.atan(x)        //反正切

4、简单练习

1、随机选择今晚吃啥

  <button id="btn" type="button">选择今晚吃啥</button>
  <span id="dinner"></span>

  <script>
    var btn = document.getElementById('btn');
    var dinner = document.getElementById('dinner');
    var d = ['米线', '面条', '盖饭', '馒头', '冒菜', '火锅', '吃啥饭啊，写作业吧'];

    btn.onclick = function() {
      var min = 0;
      var max = d.length - 1;
      var ran = Math.floor(Math.random() * (max + 1));
      dinner.innerText = d[ran];
    }

2、用三角函数让一个方块做圆周运动

<style>
    #move {
      position: absolute;
      left: 800px;
      top: 300px;
      width: 20px;
      height: 20px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="move"></div>

  <script>
    var move = document.getElementById('move');
    var num = 0;
    var r = 100; // 半径
    var x = 700;
    var y = 300;

    // 计时器，不断的执行内部的代码
    setInterval(function() {
      num++;
      var a = Math.sin(num * Math.PI / 180) * r;
      var b = Math.cos(num * Math.PI / 180) * r;

      // 修改 top 和 left 的值
      move.style.left = x + b + 'px';
      move.style.top = y + a + 'px';
    }, 1); // 每隔  30 ms 执行内部的 function
  </script>
</body>