Javascript - 基礎

什麼是變數 ?

變數可以想像成一個空盒子，可以用來裝東西。而這些東西賦值給這個盒子。
變數第一個字母必須為英文字母，後面可接底線或數字等。
變數大小寫要先設定好，因為在 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)