美文网首页
「JS」练习 · 小案例练习

「JS」练习 · 小案例练习

作者: DebraJohn | 来源:发表于2018-07-12 22:36 被阅读0次

    目录

    • 在浏览器输出以下内容
    *
    **
    ***
    **
    *
    
    • 求1-100的素数
    • 求最大值
    • 数组排序
    • 过滤器
    • 附录:TypeScript一些知识

    代码开始!
    (前面写的很啰嗦,后面慢慢的精简起来了,说明还是有一点点进步的!!)

    在浏览器输出以下内容
    *
    **
    ***
    **
    *
    

    做的第一个练习,代码比较罗嗦= =

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        #star {
          list-style: none;
        }
      </style>
    </head>
    
    <body>
      <ul id="star">
      </ul>
      <script>
        var star = document.getElementById("star");
    
        function showStar(n) {
          for (i = 1; i <= Math.floor(n / 2 + 1); i++) {
            var newElement = document.createElement("li");
            var str = "";
            for (var j = 0; j < i; j++) {
              str = str + "*";
            }
            newElement.innerHTML = str;
            star.appendChild(newElement);
          }
          for (i = Math.floor(n / 2); i > 0; i--) {
            var newElement = document.createElement("li");
            var str = "";
            console.log(i);
            for (var j = i; j > 0; j--) {
              str = str + "*";
            }
            newElement.innerHTML = str;
            star.appendChild(newElement);
          }
        }
        showStar(7);
      </script>
    </body>
    
    </html>
    
    求1-100的素数
    var primeNum = function(max) {
      var i, j;
      var arr = [];
    
      for (i = 1; i < max; i++) {
        for (j = 2; j < i; j++) {
          if (i % j === 0) {
            break;
          }
        }
    
        if (i <= j && i != 1) {
          arr.push(i);
        }
      }
      return arr;
    };
    document.write(primeNum(100));
    

    这是一种方法,但是要遍历数组很多遍,效率比较低。
    师父又告诉了我另一种方法,但是还不是很理解。
    大概是折中又折中又折中的思路,可以减少循环次数,提高效率。

    (function() {
      var sss = [2, 3, 5, 7];
    
      function one() {
        var t = new Date();
    
        function cacheSsInner(num) {
          var max = num / 2;
          for (var i = 0; i < sss.length; i++) {
            if (sss[i] > max) {
              return true;
            }
            if (num % sss[i] == 0) {
              return false;
            }
            max = num / sss[i];
          }
          return true;
        }
        function cacheSs(num) {
          for (var i = sss[sss.length - 1] + 2; i <= num; i = i + 2) {
            if (cacheSsInner(i)) {
              sss.push(i);
              if (i == num) {
                return true;
              }
            }
          }
          return false;
        }
    
        function ss(num) {
          if (cacheSs(num)) {
            return true;
          }
    
          //var index = binarySearch(sss, num);
          //return index >= 0;
    
          var max = num / 2;
          for (var i = 0; i < sss.length; i++) {
            if (sss[i] > max) {
              return true;
            }
            if (sss[i] == num) {
              return true;
            }
            if (num % sss[i] == 0) {
              return false;
            }
            max = num / sss[i];
          }
          return false;
        }
    
        var ssmax = 100;
        document.writeln("求出" + ssmax + "内的素数所需的时间:  ");
        for (var j = 3; j < ssmax; j += 2) {
          if (ss(j)) {
            // document.writeln(j);
            //console.log(j);
          }
        }
        document.writeln("<br />");
        document.writeln(new Date().getTime() - t.getTime() + "ms");
        document.writeln("<br />");
            
      }
      one();
    })();
    
    求最大值
    var arr = [6, 2, 5, 1, 3];
    
    function findMax(arr) {
        var maxNum = arr[0];
    
        for (var i = 1; i < arr.length; i++) {
            var cur = arr[i];
            if (cur > maxNum) {
                maxNum = cur;
            }
        }
        return maxNum;
    }
    console.log(findMax(arr));
    
    排序

    (此处参考阮一峰的快速排序)
    递归的思路,原文点这里

    var arr = [6,2,5,1,3];
    
    function quickSort(arr){
        if(arr.length <= 1){
            return arr;
        }
        var pivotIndex = Math.floor(arr.length/2);
        var pivot = arr.splice(pivotIndex,1)[0];
        // console.log(pivot);
        var left = [];
        var right = [];
    
        for(var i =0;i<arr.length;i++){
            if (arr[i] < pivot) {
                left.push(arr[i]);
            } else {
                right.push(arr[i]);
            }
        }
        return quickSort(left).concat([pivot], quickSort(right));
    }
    console.log(quickSort(arr));
    
    过滤器
    const arr = [1, 2, 3, 4, 5, 6, 7, 8];
    

    从这里开始,师父让我用比较新的语法来写。
    少用var,多用const和let。
    (这里修正一下,const和let在一些浏览器是不支持的!!!因为这里使用typescript写的,编译后也会自动变为var,所以可以用。在写js的时候还是慎用,除非可以用babel编译)

    单数过滤器&双数过滤器
    function filterOdd(arr) {
        const oddArr = [];
        for (let i = 0; i < arr.length; i++) {
            const cur = arr[i];
            if (cur % 2 != 0) {
                oddArr.push(cur);
            }
        }
        return oddArr;
    }
    
    console.log(filterOdd(arr));
    

    双数的思路一样就不赘述了。

    自选单双数过滤器

    从这里开始,师父让我用for of循环来写。
    for of选定的是数组中这个数本身了,所以不需要再赋值了。
    对比前面的for循环(或for in循环),选中的是数组索引。

    function filter(type, arr) {
        const filterArr = [];
        for (const i of arr) {
            if (type == "odd" && i % 2 != 0 || type == "even" && i % 2 == 0) {
            // 一开始用了一大堆的if,被笑死。要求改为逻辑运算符。
                filterArr.push(i);
            }
        }
        return filterArr;
    }
    
    console.log(filter("even", arr));
    //这里可以选择even或者odd直接传参进去,就变成了可自选的单双数选择器啦!
    
    倍数选择器
    function multiply(n, arr) {
        const newArr = [];
        for (const i of arr) {
            if (i % n == 0) {
                newArr.push(i);
            }
        }
        return newArr;
    }
    
    console.log(multiply(3, arr));
    
    附录:TypeScript一些知识

    TypeScript就是比较注重数据类型。
    编译成js文件后有一个"use strict";严格模式。
    所以,上面的那个单双数选择器就是这样写的:

    function filter(type: string, arr: number[]): number[] {
        const filterArr = [] as number[];
        for (const i of arr) {
            if (type == "odd" && i % 2 != 0 || type == "even" && i % 2 == 0) {
                filterArr.push(i);
            }
        }
        return filterArr;
    }
    
    console.log(filter("odd", arr));
    

    待续内容:
    • 单双数+倍数结合的选择器
    • 多属性排序

    相关文章

      网友评论

          本文标题:「JS」练习 · 小案例练习

          本文链接:https://www.haomeiwen.com/subject/qmrdpftx.html