JavaScript教學 - 運算子(Operators)

文章已搬家，請點擊前往👈

REDIRECT_MODE = 1;

介紹JavaScript中的運算子(Operators)的用法，包含邏輯運算子(Logical Operator)、字串運算子(String Operator)和特殊運算子(Special Operator)。

6. 邏輯運算子

邏輯運算子(Logical Operator)在程式語言中一般用來做布林代數使用，進行複數的條件判斷，例如：

n >= 0 && n

包含以下運算子

範例 說明 a && b 邏輯AND，a為true且b為true，則回傳true a || b 邏輯OR，a為true或b為true，則回傳true !a 邏輯NOT，a為false，則回傳true

然而JavaScript和其它語言在&&和||邏輯運算子的行為上有些不同之處。

6.1 邏輯AND(&&)

JavaScript中的&&回傳的結果並不一定是布林值，實際上他會依據以下規則回傳運算結果：

如果運算式轉為布林值為false，則回傳該數值。(例如0, null, undefined, NaN和空字串) 如果為true，則回傳右邊運算式的數值；換句話說，當全部成立時，回傳最右邊運算式的數值。

true && null && 100 // null true && {} && 100 // 100

而如同一般程式語言一樣，如果左方的運算式結果為false時，將不會執行右邊的運算式：

false && neverExec() // 右邊的函式將永遠不會觸發

6.2 邏輯OR(||)

如同AND一樣，JavaScript中的||回傳結果不一定是布林值，他會依據以下規則回傳運算結果：

如果運算式轉為布林值為true，則回傳該數值。 如果為false，則回傳右邊運算式的數值；如果全部為false，則回傳false。

而如同一般程式語言一樣，如果左方的運算式結果為true時，將不會執行右邊的運算式：

true || neverExec() // 右邊的函式將永遠不會觸發

除此之外，由於OR的特性，時常會被拿來利用作為 指派預設值 之用：

option = option || 'default';

7. 字串運算子

字串運算子(String Operator)使用+號作為連接字串之用，由於和算術運算子的數值相加符號一樣，所以在數字和字串混合使用的時候可能需要注意，避免產生未預期的結果，可以看以下範例：

1 + '2' // 12 1 + 2 + '3' // 33 '1' + 2 + 3 // 123 '1' + (2 + 3) // 15

執行順序為由左至右，當遇到字串之後才會變成字串連接，在變成字串之前還是會使用算術相加，可使用括號先執行算術運算後在轉為字串連接。

8. 特殊運算子

JavaScript中包含一些其他的特殊運算子(Special Operator)，以下逐一介紹。

8.1 條件運算子

條件運算子(Conditional Operator)是唯一的三元運算子，語法如下：

expr ? true_val : false_val

使用範例如下：

score >= 60 ? 'pass' : 'fail' n > 0 ? 100 / n : 0 a > b ? a : b

8.2 逗號運算子

逗號運算子(Comma Operator)使用逗號(,)隔開鎂個運算式，並回傳最右邊的運算式結果，這個運算子通常用在迴圈之中，同時對多個變數進行變量操作，例如：

for(var i = 0, j =0;i

8.3 陣列與物件存取運算子

我們可以透過中括號([])來存取陣列的元素，而物件的成員我們可以用點(.)和中括號([])來存取，例如以下範例：

var a = [123]; a[0] // 123 var o = {n: 456}; o.n // 456 o['n'] // 456

其中物件也可以使用中括號代字串的方式存取成員，利用此特性可以透過程式的方式動態的存取不同的成員：

var o = {}; for(var i = 0;i

8.4 in

in運算子可以用來判斷一個物件是否包含某個屬性，並回傳布林結果，範例如下：

var army = {black: 'color', fault: null, illegal: undefined}; console.log('black' in army); // true console.log('fault' in army); // true, 即使宣告null或undefined也是存在 console.log('illegal' in army); // true console.log('truth' in army); // false

var arr = [1, 2, 'hello']; console.log(1 in arr); // true, 實際上指的是arr[1]存在 console.log('1' in arr); // true, arr['1'] console.log('hello' in arr); // false, arr['hello']不存在 console.log(3 in arr); // false, arr[3]不存在

注意以上陣列的用法，並不是以值有沒有在陣列之中作為判斷。

8.5 instanceof

instanceof運算子可以用來判斷一個實例(instance)是否為某一種類型所建構出來，左邊必須放要被判斷的實例，右邊必須為類別建構式，以下為一個範例：

function Animal() {} function Dog() {} Dog.prototype = new Animal(); function Cat() {} Cat.prototype = new Animal();

var dog = new Dog(); console.log(dog instanceof Animal); // true console.log(dog instanceof Dog); // true console.log(dog instanceof Cat); // false console.log(dog instanceof Object); // true

console.log(Dog instanceof Animal); // false

以上範例簡單的建立了一些繼承關係，透過繼承關係的範例可以容易理解運作的意涵。

8.6 typeof

typeof運算子可以用來取得一個物件的型別，在之前的文章 JavaScript教學 - 資料型態(Data Type) - 上 中已經有介紹過，不過值得注意的地方是，自定的類別物件使用typeof只會回傳"object"的字串，如果要進一步判斷是哪一種類別，必須使用上面的instanceof的運算子。

8.7 new

new運算子可以用來產生物件實例，比較特別的是，在JavaScript中，如果不帶參數允許省略括號，一些範例如下：

var date = new Date(); var obj = new Object; var point = new Point(x, y);

8.8 delete

delete運算子可以用來移除物件的屬性、陣列元素或變數，並回傳是否成功的布林結果，以下兩種情況的物件屬性是無法刪除的：

核心屬性，例如window.document。 var宣告的變數。

JavaScript中的delete只是將該屬性或元素的參考連結移除，並不會直接將該物件作釋放記憶體的動作。delete和將值設成undefined或null是不一樣的意思，delete後該屬性將不會存在。另外在標準中的定義，如果 對象不是屬性、陣列元素或變數時也是會回傳true ，以下為一些範例：

console.log(delete window.document); // false

var a = 1; console.log(window.a); // 1 console.log(delete window.a); // false console.log(window.a); // 1

b = 2; console.log(window.b); // 2 console.log(delete window.b); // true console.log(window.b); // undefined

c = 3; console.log(window.c); // 3 console.log(delete c); // true console.log(window.c); // undefined

var arr = ['Test', 178]; arr[0] = undefined; console.log(0 in arr); // true console.log(delete arr[0]); // true console.log(0 in arr); // false

console.log(delete nofound); // true console.log(delete "you can't delete"); // true

8.9 void

void運算子可以執行一段運算式，然後不回傳結果(也就是回傳undefined)，實務上最常使用在超連結之中，用來執行一段JavaScript語法而避免頁面跳轉(一些舊的瀏覽器需要回傳undefined才不會跳轉)，例如：

Click

早期也用作產生undefined數值之用。

8.10 get / set

在一些程式語言中，支援使用屬性的方式來處理getter / setter，而在 JavaScript 1.8.5 版本加入了這項實作，宣告與使用方法如下：

var user = { get Name() { return this.name || 'Anonymous'; }, set Name(value) { this.name = value.charAt(0).toUpperCase() + value.slice(1); } }

console.log(user.Name); // Anonymous user.Name = 'john'; console.log(user.Name); // John

不過由於這個功能是比較新版本的瀏覽器才有支援，所以在普及之前可能還是避免使用。

8.11 let

JavaScript 1.7中提出了let的操作子，不過目前似乎未被大部份瀏覽器納入支援，故暫時不做介紹。

8.12 yield

JavaScript 1.7中提出了yield的操作子，不過目前似乎未被大部份瀏覽器納入支援，故暫時不做介紹。

小殘的程式光廊

提供一些演算法、資料結構、程式題目的整理與說明，PHP和JavaScript的基本教學和一些程式相關問題與解法。

JavaScript教學 - 運算子(Operators) - 下

參觀人氣

熱門文章

文章分類

電腦程式 (10)

最新文章

最新留言

文章搜尋

文章精選