Javascript - 基礎


Posted by Bryan9411 on 2020-06-27

什麼是變數 ?

變數可以想像成一個空盒子,可以用來裝東西。而這些東西賦值給這個盒子。
變數第一個字母必須為英文字母,後面可接底線或數字等。
變數大小寫要先設定好,因為在 Javascript 裡,變數的大小寫有區別。

  • 變數宣告範例:

    var box = 'apple'  //宣告一個變數 box ,再把  '='  後面的值賦予給這個變數 box。
    console.log(123)
    
  • 如果宣告變數,但不賦予值會如何 ??

    var box  //如果宣告變數,但不賦予值的話, 結果會輸出成 undefined。
    
  • 變數也可以做數學運算:

    var a = 20
    var b = 30
    console.log(a + b) //印出結果會是 50
    

陣列(Arry)與物件(object)

如果說變數是一個箱子的話,陣列就是很多類型差不多的箱子。
陣列索引從0開始算起。
陣列的長度是可以隨時被改變的。

  • 陣列:
    var score = [60,70,90,75]  
    //宣告一個陣列名稱叫 score ,而陣列裡面的東西就是他的物件。
    //如要找出第一筆資料只要找出他的索引值即可。 第一筆資料 60 分,索引值是0(陣列從0開始算起)
    //所以 console.log(score[0]) 即可印出第一筆資料。
    
  • 物件:
    var student = []
    var Bryan = {
      name:'Bryan',  
      score: 80,
      phone:'0912345678',
      address: 'Tainan',
    }
    student.push(Bryan) //把這位 Bryan 的資料給加到 student 這個陣列裡面。  push可以把資料給加入陣列裡。
    console.log(student[0].name) //找出這個陣列中第0個索引值中的 name 資料。
    console.log(Bryan.name)  //也可以寫成這樣,從物件資料裡去找
    

判斷式 if/else 與 switch

if() {} else {}: if 後面的區塊是條件式,當條件成立的時候會執行 {} 內的區塊內容,反之不成立時則執行else區塊內容。
if() {} else if() {}: if 後面的區塊是條件式,當條件成立的時候會執行 {} 內的區塊內容,反之不成立時則再執行第二個 if 裡的判斷式。
switch : 比對一個 表達式 裡頭的值是否符合 case 條件。

  • if/else
    function bmi(weight , height) {
      var w = weight
      var h = height / 100
      var bmi = w / (h * h)
      if(bmi < 18.5) {
          console.log('體重過輕') //如果 bmi 小於 18.5 就印出體重過輕
      } else if(18.5 <= bmi && bmi < 24) {
          console.log('正常範圍')  ////如果 bmi 大於或等於 18.5 和小於 25就印出正常範圍
      } else if(24 <= bmi && bmi < 27) {
          console.log('過重')
      } else if(27 <= bmi && bmi < 30) {
          console.log('輕度肥胖')
      } else if(30 <= bmi && bmi < 35) {
          console.log('中度肥胖')
      } else {
          console.log('重度肥胖')  //如果都不在這些範圍內,就印出 重度肥胖
      }
          return bmi
      }
    }
    console.log(bmi(65 , 173))
    
  • switch
    var apple = 'red' 
    switch(apple) {
      case 'yellow' :  //判斷蘋果是不是黃色的,是的話就執行下列區塊內容
          console.log('蘋果不是黃色的')
          break; //break 如果判斷式成立,跳出這個迴圈
      case 'red' :
          console.log('答對了! 蘋果是紅色的')
          break;
      case 'brown' :
          console.log('蘋果不是咖啡色的')
          break;
      default:  //如果都不是 就執行下面區塊內容
          console.log('這些都不是蘋果的顏色')
    }
    

迴圈

do{}while();:do while 是先執行 do 區塊內容後 再執行 while 裡的條件做判斷。要注意的是 while結尾要+分號。
while: 直接判斷是否符合條件,符合的話再執行區塊內程式碼,直到條件不符合為止。
for: 當變數值與設定的條件符合時,就會持續執行到條件不符合才停止執行。

  • do{}while() :印出 1~9
    var i = 1
    do{ //先執行 do 區塊內程式碼
     console.log(i)
     i++
    } while(i <= 9); //再判斷裡面條件是否符合,不符合就跳出迴圈
    
  • while迴圈 :印出 1~9
    var i = 1
    while(i<=9) { //判斷裡面條件是否符合,符合就執行區塊內程式碼,直到條件不符合
      console.log(i)
      i++
    }
    
  • for迴圈 :印出 1~9
    for(var i = 1; i <= 9; i++) { // 宣告個變數,再執行中間判斷式,判斷是否符合,符合的話就執行區塊內程式碼,執行完後再執行右邊 i++ 
      console.log(i)
    }
    
    常用內建函式

Number類型內建函式

  • 字串轉數字 parseInt()

    var a = 10;
    var b = parseInt('20'); //透過 parseInt 把字串轉成數字
    console.log(a + b)
    
  • 無條件進位 ceil

    console.log(Math.ceil(11.2)) // ceil 無條件進位 所以答案 12
    
  • 在 0 和 1 之間隨機取數:random , 轉成正整數:floor

    console.log(Math.floor(Math.random()*10)) // 透過 floor 轉成正整數,random 讓這個正整數在 0 和 1 之間隨機取數
    

String類型內建函式

  • 小寫轉大寫: toUpperCase ,大寫轉小寫: toLowerCase
    var a = 'abcdefg'.toUpperCase();
    var b = 'ABCDEFG'.toLowerCase();
    console.log(a,b)
    
  • 判斷字串在第幾行(空格也算在內): indexOf
    var str = 'hi hello world'
    var index = str.indexOf('hello')
    console.log(index)
    
  • 替換文字: replace
    var str = 'hi hello world'.replace('hi','hey') //replace('要被替換的文字' , '要替換成什麼文字')
    console.log(str)
    
  • 以一個指定的分割字串来决定每个拆分的位置,也可把字串轉成陣列: splite 。 去空格: trim
    var str = 'hi hello world'
    var changeArr = str.split(' ') //使用空白鍵來區隔字串 
    console.log(changeArr) // 結果會是 ["hi", "hello", "world"]
    

陣列類型函式

  • 陣列元素間插入 文字 or 符號: join
    var a = [1,2,3]
    console.log(a.join('和')) //結果是1和2和3
    var b = [4,5,6]
    console.log(b.join('!')) // 結果是4!5!6
    
  • 後面可接一個函式(可無限接續下去),可以把每一個元素傳進去。簡單說就是把這個陣列元素帶到另一個函式,做return回傳 : map
    var arr = [1,2,3]
    function double(n) {
      return n*2
    }
    var newArry = arr.map(double) //利用 map 將 arr 這陣列帶到 function(double),再跑裡面程式碼 
    console.log(newArry)
    
  • 過濾功能,可把回傳值的東西保留下來,其餘過濾掉: filter
    var arr = [-1,2,-3]
    function filterArr(n) { 
      return n>0
    }
    var newArry = arr.filter(filterArr) //篩選 filterArr 這 function 裡面, n > 0 的元素
    console.log(newArry)
    
  • 只留下陣列某一部分: slice
    var arr = [1,2,3,4,5,6,7,8,9,10]
    console.log(arr.slice(2)) //只留下陣列序號2以後的元素(包刮2本身)
    console.log(arr.slice('2','5')) //只留下陣列序號2到序號5的元素(但不包括5) 亦即 n>=2 && n<5
    
  • 插入元素splice(從索引位置中插入,從索引處刪除幾筆,插入什麼資訊) 與 刪除元素: splice
    var arr = ['1950', '1970', '1980', '1990', '2000', '2010']
    arr.splice(1,0,'1960') //插入元素(第一筆位置,刪除0筆,插入1960)
    console.log(arr) 
    arr.splice(3,1,'1985') //插入元素(第三筆位置,刪除1筆,插入1985)
    console.log(arr)
    arr.splice(0,1) //從索引0中刪除1個元素
    console.log(arr)
    
  • 按照順序排序(裡面可以放function): sort
    var arr = [1,30,4,21] //由小>>>>>>>>>>>>大
    arr.sort(function(a,b) { //如果 a > b 前面大於後面 , 由大排到小, 反之
      if(a === b) {
          return 0 // 如果a === b 就return 0 相等不換位
      } else if(b > a) {
          return -1 // 如果b > a 就return -1 不換位置
      } else {
          return 1 // 如果b < a 就return 1  換位置
      }
    })
    console.log(arr)
    
  • 三元運算子寫法 由大>>>>>>>>小 排序
    var newArr = [1,30,4,21]
    newArr.sort(function(a,b) {
      if( a === b) return 0
      return a > b ? -1 : 1
    })
    console.log(newArr)
    









Related Posts

Table RWD系列-1

Table RWD系列-1

D47_W6HW1

D47_W6HW1

[第二週] 位元運算  判斷奇偶數不是只能取餘數

[第二週] 位元運算 判斷奇偶數不是只能取餘數


Comments