iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
Modern Web

JavaScript Note系列 第 7

運算式 & 運算子

在JS中,我們可以藉由運算式得到所需要的值。
所謂的運算式,不是只有像數學的四則運算,它也有其他的形式表現,讓我們求值。

算數運算式

算數運算式就是數學的 + - * / 運算,在執行過程中,如果需要,JS會自動把運算元轉成數值或字串。
如果有任一運算元無法轉成數值,運算結果會以NaN表示。

console.log(1 + 1); //2
console.log('1' + 1); //11
console.log(undefined + 1); //NaN

+運算子

+運算子可執行數值相加與字串串接

console.log(1 + 1); //2
console.log('A' + 'B'); //AB
console.log('1' + 1); //11
console.log(true + 1); //2

如果運算元中有字串,字串串接的優先權會大於數值相加,所以其他的運算元會轉成字串做串接。

+運算子的執行過程如下:

  • 有任一運算元是物件的話,會先轉成基型值。
  • 若有任一運算元是字串,則以字串串接為優先。
  • 不然,所有運算元會被當作數值處理相加。
  • 若有任一運算元是NaN,運算結果會是NaN。

+運算子可以讓單一值轉型成數值:

let x='1';
console.log(typeof(x)); //string
console.log(typeof(+x)); //number

遞增++

使用遞增運算式的運算元必須是變數,該運算式會將變數的值轉成數值(若非數值的話)後加1,再將運算結果丟回原變數中。
++運算子可以放在運算元的前與後,雖然都會讓運算元遞增,但執行過程有所差異:

let i = 1;
console.log(++i); //2,先遞增,再執行console.log
i = 1;
console.log(i++); //1,先執行console.log,再遞增
let i = 1;
let j = ++i;
console.log(j); //2,先執行++i,再將遞增的值給j
let i = 1;
let j = i++;
console.log(j); //1,先把i的值給j,再執行遞增

x=x+1執行數值運算的結果等同於x++,但x++不會處理string串接,它只接受數值相加,若x為字串1,x=x+1的結果會是’11’,x++的結果會是2。

比較運算子

  • 比較的是數字或字母的順序。
  • 只能比較數字與字串,所以如果不是這兩種型別,會先轉型再比較。
  • 若任一運算元是物件,會先轉成基型值,再做比較。
  • 進行轉換後,若運算元都是字串,會依據字串unicode值的數值順序做比較。
  • 進行轉換後,若至少一個運算元為非字串,兩個運算元會轉成數值比較。
  • Infinity比除了它自己的任何數都還要大。
  • -Infinity比除了它自己的任何數都還要小。
console.log(3 > 1); //true
console.log('3' > '1'); //true
console.log(3 > '1'); //true
console.log("three" > 1); //false

in運算子

檢驗物件是否有指定的屬性名稱,或陣列是否有指定的索引值,若有,回傳true;若無,回傳false。

let obj = {
    x: 1,
    y: 2
};
console.log('x' in obj); //true
console.log('y' in obj); //true
console.log('z' in obj); //false
let ary = ['a', 'b', 'c'];
console.log(1 in ary); //true
console.log(5 in ary); //false

!運算子

!運算子具有反向的意思,它會把先把運算元轉成boolean值,再反轉,true轉false或false轉true。
!!運算子除了執行剛剛的步驟之外,還會再反轉一次,變成等效的boolean值,所以如果我們要將某個值轉成boolean值的話,可以使用!!運算子。

指定運算子

以數學的觀念來看,x=5,就是x等於5的意思,但在這邊,不能這樣解讀,必須要說,把5這個值指定給x變數,而且它的結合律是從右到左。

let obj = {};
obj.x = 1;
let ary = [];
ory[0] = 1;

我們也可以用在物件和陣列的給值,設定物件的屬性值與陣列的元素。

條件運算式(?:)

let y = null;
let x = y ? y : 'hello'; //若y為有效值,回傳y,否則回傳hello

在?左邊判斷的結果必須為boolean值,若為true,回傳:左邊的值(y);若為false,回傳:右邊的值('hello')。
雖然也可以使用if判斷式來達成相同的目的,但相較之下,採用條件運算式(?:)會來的簡潔許多。

typeof

typeof運算子可以用來判斷運算元的型別,回傳型別是string。

console.log(typeof 1); //number
console.log(typeof 'ABC'); //string
console.log(typeof null); //object
console.log(typeof undefined); //undefined
console.log(typeof true); //boolean
console.log(typeof {}); //object
console.log(typeof [1, 2, 3]); //object
console.log(typeof function f() {}); //function

需要注意的是null的型別是object,如果我們需要區分null與object必須用明確的方式:

function isObjet(v) {
    return (v !== null && (typeof v == 'object' || typeof v == 'function'))
}
console.log(isObjet(123)); //false
console.log(isObjet(null)); //false
console.log(isObjet({})); //true

運算子的優先運算權

優先權 運算子
括號( )
遞增(++)、遞減(--)、反轉boolean(!)
算術 ( * 、/、%)
算術(+、-)
關係比較(>、>=、<、<=)
相等性(==、!=、===、!==)
AND(&&)
OR(||)
條件運算(?:)
指派(=)、運算後指派( * =、-=、+=、/=)

運算子的結合方向

方向 運算子
左>>右 算術 ( * 、/、%)
左>>右 比較(>、>=、<、<=、==、!=、===、!==)
左>>右 邏輯(&&、||)
右>>左 算數 (++、--)
右>>左 指派(=、+=、 * =、/=、-= )
右>>左 反向邏輯(!)
右>>左 條件運算(?:)

參考來源:
JavaScript大全
Speaking JavaScript|簡明完整的 JS 精要指南
新一代 JavaScript 程式設計精解


上一篇
型別轉換
下一篇
「==」 & 「===」 運算子
系列文
JavaScript Note31

尚未有邦友留言

立即登入留言