1. 程式人生 > >js小案例練習

js小案例練習

目錄

  • 在瀏覽器輸出以下內容
*
**
***
**
*
  • 求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。

單數過濾器&雙數過濾器
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));
待續內容:
  • 單雙數+倍數結合的選擇器
  • 多屬性排序