Javascript初學筆記1 (變數命名、運算子、Switch、函數相關)

這週在AC的學習上多花了點時間，切版實在是一大學問 要找機會多練習，之後大概也會放一些切版的學習心得上來。總之我利用多的時間在codecademy以及一些線上資源先行接觸了一下JS的寫法 也算是為後續做準備，以下先針對幾個與python寫法較為不同的地方整理。

變數命名

共有let、var以及const三種 假設我今天要儲存一個新變數fruit，我便有以下三種寫法

let fruit =['apple','banana']
var fruit =['apple','banana']
const fruit =['apple','banana'] 
#三種都會產生一個儲存陣列的fruit變數

const在直覺上也許很好理解，設定的變數不容修改 但這樣的直覺並不完全正確
const僅是代表此變數不能重複宣告、給予新的值
舉個例子來說

 
const fruit =['apple','banana']
let fruit = 'apple' #這裡會出現錯誤
const fruit = ['apple','banana','mango'] #這樣也是錯誤
但如果是以下的例子，最後輸出的結果就會是 ['apple','banana','mango'] 
const fruit =['apple','banana']
fruit.push('mango')
console.log(fruit) 

挺有意思的吧?至於var 跟 let兩者差別在於….我現階段的理解不確定是否完全正確
總之let會是var的更優秀版本，因為let保有區塊性 var比較像是global的變數
之後會在寫一篇文章專門探討兩者的差別。

運算子

唯一比較特別的便是其他語言的 == 再JS內需用 ===替代
那== 與 ===具體的差別在哪?
在JS內前者被稱為一般相等，後者則稱為嚴格相等
簡單來說，一般相等會將輸入的值一致化後再作比較，後者則保留了資料類別的比較
請看以下的例子。

let x = 1
let y= '1'
console.log(x===y) #false
console.log(x==y) #true
大部分情況請採用嚴格相等 避免不必要的麻煩

順帶一提，在JS中自然也有三元運算的概念 配合變數命名可以讓程式碼變得更加整潔，一樣請看下面的例子。

let money =100
if(money>100){
  var status = 'rich'
} else {
  var status = 'poor'
}
console.log(status) 
利用三元運算則可縮減成以下
let money =100
let status = money>100? 'rich' : 'poor';
console.log(status) 

取整數

JS內有幾個取整數的方法我覺得挺有意思的，在此做個紀錄。

 
let x =4.19;
console.log(Math.round(x))#4 round跟其他語言用法一致，取最接近整數
console.log(Math.floor(x))#4 floor會取比x小的下一個整數
console.log(Math.ceil(x)) #5 ceil會取比x大的下一個整數

Switch (類似其他語言的case)

值得一提的是，在JS內不管是函數、迴圈或是switch的基礎寫法都是類似的
if (變數或判斷式){
要執行的內容)
}
以下我們看個switch的例子會更好理解

 
let groceryItem = 'papaya';

switch (groceryItem) {
  case 'tomato':
    console.log('Tomatoes are $0.49');
    break;
  case 'lime':
    console.log('Limes are $1.49');
    break;
  case 'papaya':
    console.log('Papayas are $1.29');
    break;
  default:
    console.log('Invalid item');
    break;
} 
最後輸出的結果自然就是 
'Papayas are $1.29' 
記得，在每個case判別後務必加入break 否則會進入無窮判斷迴圈。

函數相關

JS與其他語言一樣 都有不只一種的函數寫法，而JS的箭頭函數我必須說並不是這麼的直觀，一樣我們舉個例子來說會最快，假設我今天要寫一個加總的函數

如果今天是用python寫
def add(a,b):
     return a+b
很直觀對唄?那用JS寫呢?
1.基本寫法
const add = function(a,b) {
  return a+b;
} 
2.JS特有的Arrow
const add = (x,y) =>{
  return x+y;
} 
簡單來說就是將function省略為箭頭符號
()內包含的便是要傳入函數的變數，僅有一個變數時可以省略括號
不傳入變數時可以則省略括號內的內容
比方說一個簡單的hello world函數用此方法寫就會像是以下
const hello =() =>{
  console.log('Hello world!')
} 
若大括號內僅有一行程式，則可以進一步縮減
const hello =() => console.log('Hello world!') 

最後做個收尾，我們將運算子與函數做結合，用以下例子做總結
假設我要寫個簡單的判斷函數 來判斷今天是不是需要澆水
如果今天是週三則回傳true其他日子則回傳false
最傳統的寫法會是

const plantNeedsWater = function(day) {
  if (day === 'Wednesday') {
    return true;
  } else {
    return false;
  }
};

加入箭頭函數的概念後則可以稍微精簡成

const plantNeedsWater = (day) => {
  if (day === 'Wednesday') {
    return true;
  } else {
    return false;
  }
};  

接著再加入三元運算的概念後則變為

 const plantNeedsWater = (day) => {
  return day === 'Wednesday' ? true : false;
}; 

由於僅有一個變數且中括號內僅有一行程式，最後可精簡為

const plantNeedsWater = day =>  day === 'Wednesday' ? true : false; 

如何? 有意思吧!