iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧系列 第 5

[想試試看JavaScript ] 運算子與自動轉型

運算子

所謂的運算子就是就是一些符號,運算廣義來說就是對資料做的任何動作。
平常生活中的加減乘除是一種運算,不過在程式裡的運算是泛指任何對資料做的動作。
運算子的類型很多,依照性質分類,大概分下面幾種

  • 指派運算子 (Assignment Operator)
  • 算術運算子 (Arithmetic Operator)
  • 比較運算子 (Comparison Operator)
  • 邏輯運算子 (Logical Operator)
  • 字串運算子 (String Operator)
  • 特殊運算子 (Special Operator)
  • 位元運算子 (Bitwise Operator)

指派運算子 (Assignment Opereator)

指派運算子會根據 = 右邊的值,為左邊賦予一個值
例如

var a=1;
console.log(a); // 印出 1
var b=a;
console.log(b); // 印出 1,右邊是變數也可以使用指派運算子

只要右邊可以吐出一個值,就可以使用 = 放進左邊。

+= (Addition assignment)

下面的程式碼,可能剛學的時候會很奇怪,因為平常我們已經習慣閱讀時,從左邊閱讀到右邊

var n=2;
n=n+1;
console.log(n); // 印出 3

第一行:n 賦值為 2
第二行:將右邊 n 加一再放進左邊的 n
最後 n 等於 3

我們很常會將變數的資料做加法,並且馬上放進原本的變數裡面
有個比較簡短的寫法可以這樣子寫。

var n=2;
n+=1;
console.log(n) // 印出3

其實 n=n+1n+=1 是一樣的
就是將原來的變數做加法,再將計算完的資料放進原來的變數裡面。
資料型態是字串的情形也很常使用

var word="Today is ";
word+="good day";
console.log(word); // "Today is good day"

算術運算子 (Arithmetic)

基本的有,加減乘除

var n1=1+1;
var n2=1-1;
var n3=2*2;
var n4=6/3;
console.log(n1); // 2
console.log(n2); // 0
console.log(n3); // 4
console.log(n4); // 2

加法有些比較特別的狀況
家法還可以對字串使用

var p="我";
var j="吃飯";

console.log(p+j); // 我吃飯

或者字串加數字

console.log(100+"100"); // 100100
console.log(100+"ABC"); // 100ABC

自動轉型

其實,加法是算術運算子,兩筆資料用上加法的話,電腦就會進行運算
Javascript 有一個特性,有「自動轉型」這個特性,就是當兩筆資料要進行運算,當這兩筆資料的資料型態不一樣,他會自動將資料轉成一樣的資料型態再做運算。
而其他的程式語言,可能資料型態不一樣就無法做運算了,所以別的程式語言想將不同的資料型態做運算,就要多打額外的指令去操作。

這有優點也有缺點。
優點是只要熟記自動轉型的規則,就可以用比較短的語法完成程式。
缺點是只要不熟轉型的規則,資料就會變成預期以外的值。例如

var n1;
var n2;
var n3;
n1=100;
// 其他的程式碼
// 其他的程式碼
n2=n1+"100";
// 其他的程式碼
// 其他的程式碼
n3=n2*2

console.log(n3) // 200200

可能 n2 的地方,只是想要加數字 100 ,可是打錯,打成字串 100。
當我們看到結果 n3 的資料變成 200200,就會很困惑,這不是我們要的結果。
而 n3 與 n2 之間隔了很多行,我們要再一堆程式碼找問題在哪裡就會比較困難。


上一篇
[想試試看JavaScript ] 陳述式與表達式
下一篇
[想試試看JavaScript ] 運算子 (算術運算子)
系列文
想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧30

尚未有邦友留言

立即登入留言