JavaScript 語法 流程控制 Function (函數) Object (物件) 數值 布林值 字串 陣列 時間和日期 Math 物件
正規表示式 瀏覽器物件模型 BOM JS DOM HTML DOM CSS樣式 & Event

數值 布林值 字串 陣列 (內建物件)

JavaScript 內建物件 (JavaScript Native Objects)

JavaScript 有一些內建物件,也可以稱作 資料型態 ,包含:
Number 物件: 數字型態的物件,如整數 (5, 10) 或浮點數 (3.14)
Boolean 物件: 表示邏輯真假值的物件,真就是 true,假就是 false
String 字串物件: 任何字元 (Unicode)
Array 陣列物件: 可用來容納任何其他物件
Math 物件: 提供許多常用的數學常數及數學計算函數
Date 物件: 專門處理時間和日期的物件
RegExp 物件: 即正規表示式 (regular expression) 物件
每一種物件都有各自的屬性 (attribute) 和方法 (method) 可以使用。

Number (數值)

Number 物件也就是 數值型態 的物件,如整數 (integer) 或帶有小數點的浮點數 (floating point) 都是 Number。
JavaScript Number 是 64-bit Floating Point。
數值可以用字面常量 (literal) 的方式來寫:
var x = 180;
var y = 30.25;
也可以用科學記號表示法 (scientific (exponent) notation):
var x = 101e5;     // 10100000
var y = 101e-5;    // 0.00101

八進位表示法 (Octal)
 你可以用 0 開頭來用八進位表示法表示一個數字:
 var x = 017;
 console.log(x);    // 15
十六進位表示法 (Hexadecimal)
 你可以用 0x 開頭來用十六進位表示法表示一個數字:
 var x = 0xaf;
 console.log(x);    // 175

Infinity
 Infinity 或 -Infinity 是 JavaScript 一個 global 的屬性,表示 無限大 或 無限小。
 例如:
 console.log(100000000000 > Infinity);     // 會輸出 false
 console.log(-99999 > -Infinity);          // 會輸出 true
 var x =  2 / 0;    // x = Infinity
 var y = -2 / 0;    // y = -Infinity
 console.log(typeof Infinity);      // 輸出 number

NaN (Not a Number)
NaN 是 JavaScript 一個 global 的屬性,表示一個值是 "非數值"。
 例如:
 var x = 100 - 'string';      // x = NaN
 var y = 5 + x;               // 一個 NaN 做數值運算,返回的結果也是 NaN, y = NaN

JavaScript 還有一個 global function isNaN 用來判斷一個值 是不是 NaN。例如:
 isNaN(NaN);          // true
 isNaN(undefined);    // true
 isNaN({});           // true
 isNaN(true);         // false
 isNaN(null);         // false
 isNaN(20);           // false

Number() 函數 - 型別轉換

Number() 可以用來將其他的資料型態轉型 (type conversion) 成 數值型態。 字串 轉 數字 Number('3.14') // 3.14 Number('100') // 100 Number(' ') // 0 Number('') // 0 Number('a123') // NaN 布林值 轉 數字 Number(false) // 0 Number(true) // 1
Number 物件內建的 屬性 (Properties)
 Number.MAX_VALUE       // Number.MAX_VALUE 表示正數的最大值,約為 1.79E+308,而比 Number.MAX_VALUE 大的數就是 Infinity。
 Number.MIN_VALUE       // MIN_VALUE表示所有正數中的最小值(smallest positive numeric value),也可說是最接近0的正數,MIN_VALUE實際值近似於 5e-324。
 Number.POSITIVE_INFINITY         // Number.POSITIVE_INFINITY 跟 Infinity 是一樣的,表示無限大的正數。
 Number.NEGATIVE_INFINITY         // Number.NEGATIVE_INFINITY 跟 -Infinity 是一樣的,表示無限小的負數。
Number 物件內建的 方法 (Methods)
 toString()       // toString() 方法用來將數字轉型成字串。 例如: var count = 10; count.toString()  // '10'
 valueOf()        // valueOf() 方法用來將 Number 物件 型態轉型成基本數值型態 (primitive value)。
 parseInt()       // parseInt() 函數用來將字串轉型成整數。parseInt() 和 Number.parseInt() 是同樣的函數
 parseFloat()     // parseFloat() 函數用來將字串轉型成浮點數。parseFloat() 和 Number.parseFloat() 是同樣的函數
 toExponential()  // toExponential() 方法是用來將數字轉型為科學記號表示法 (字串型態)。
 toFixed()        // toFixed() 方法用來將一個數字轉成固定小數位數的字串。 語法:numObj.toFixed([digits])
 toLocaleString() // toLocaleString() 方法返回一個字串,表示某個數字在本地端電腦(瀏覽器)的地區設定環境下的表示法 
 toPrecision()    // toPrecision() 可以將數字格式化成指定長度的字串,如果數字長度大於指定的長度,會用科學表示法顯示。

Boolean (布林值)

Boolean 用來表示兩種值: true - 表示   真 ,    false - 表示   假
在 JavaScript 中,只有這些值會被當作是 false:
null     數值 0     NaN     空字串 ''     undefined
除此以外的值都是 true!

Boolean() 函數 - 型別轉換

Boolean() 可以用來將其他的資料型態 轉型 (type conversion) 成 布林值型態。 var x = 0; Boolean(x); // false x = 100; Boolean(x); // true x = ''; Boolean(x); // false x = 'hi'; Boolean(x); // true x = null; Boolean(x); // false

String (字串)

在 JavaScript 字串是用單引號 ' 或雙引號 " 包住的字。用單引號 ' 或雙引號 " 都是一樣的,沒有特別。
例如:
var str = 'string text';
var str = "string text";
var str = "中文的字串";

特殊字元 (Special Characters)

因為字串必須包在 單引號 或 雙引號 裡面,但是要特別注意的 雙引號 裡面不能有 雙引號、單引號 裡面不能有 單引號。 例如下面這些都會發生錯誤: var str = 'Mike's pet.'; var str = "This is a "book"."; 你可以改成這樣就會正確,因為雙引號裡面可以有單引號,或單引號裡面可以有雙引號: var str = "Mike's pet."; var str = 'This is a "book".'; 或是使用跳脫字元 (escape character) 反斜線 (backslash) \,來跳脫引號: var str = 'Mike\'s pet.'; // Mike's pet. var str = "This is a \"book\"."; // This is a "book".

    跳脫字元 \ 可以用來跳脫這些特殊字元:
特殊符號 表示的符號
\0 NULL 字元
' 單引號
" 雙引號
\ 反斜線
\n 換行符號
\r carriage return 回車鍵
\t tab
\v vertical tab
\b backspace
\f form feed
\uXXXX unicode codepoint

字串相加 (String Concatenation)
我們可以用 ++= 運算子來將多個字串接起來變成一個。
用法例如:
var str = 'hel' + 'lo';
 console.log(str);             // 輸出 'hello'
var name = 'Mike';
var str2 = str + ' ' + name;
 console.log(str2);            // 輸出 'hello Mike'
str2 += '!';                   // str2 += '!' 意思同 str2 = str2 + '!'
 console.log(str2);            // 輸出 'hello Mike!'

多行字串 / 換行
有時候會遇到有非常長的字串讓你難以閱讀,例如:
var longString = 'This is a very long string which needs to wrap across multiple lines because otherwise my code is unreadable.';
但你可以用字串相加的技巧,讓你的字串在程式碼內更好閱讀:
var longString = 'This is a very long string which needs ' +
                 'to wrap across multiple lines because ' +
                 'otherwise my code is unreadable.';
或是可以在字串最後面加上反斜線 \ 表示字串會從下一行接續下去:
var longString = 'This is a very long string which needs \
to wrap across multiple lines because \
otherwise my code is unreadable.';
\ 後面除了換行符號,不能再有任何字元包含空白。上面三種字串寫法都會得到一樣的字串結果喔!

String() 函數 - 型別轉換
數字轉字串
String(123)         // '123'
String(100 + 23)    // '123'
var x = 123;
String(x)           // '123'
布林值轉字串
String(true)    // 'true'
String(false)   // 'false'

字串相等
我們可以用 ===== 運算子來判斷兩個字串是否相等:
var str = 'hello world';
if (str === 'hello world') {
    console.log('equal');             // 會輸出 'equal'
}
字串比對會逐字元比較,看兩個字串是否完全一樣。
相對的,我們可以用 !==!= 運算子來判斷兩個字串是否不相等:
var str = 'hello world';
if (str !== 'hello Mars') {
    console.log('not equal');         // 會輸出 'not equal'
}

String 物件內建的 屬性 (Properties)
.length  字串的 .length 屬性,可以用來取得字串的長度 - 包含幾個字元。
    var str = 'hello world';
    str.length              // 11

String 物件內建的 方法 (Methods)
substr() 跟 substring(),slice()相似用來切割字串,可以從一段字串中擷取其中的一段,差異在於 substr()第二個參數是指定要擷取多長。
         語法: str.substr(start [, length])
           參數 start 是一個數字表示要從哪個位置開始擷取,位置從 0 開始;
           如果start是一個負數,則表示值同 "字串長度+start";如果 start 大於字串長度,結果會返回空字串
           參數 length 是一個數字表示總共要取出幾個字元,預設取到字串結尾。 最後結果會返回一個 新字串。
         用法:
           var str = 'abcdefghij';
           console.log(str.substr(1, 2));      // 輸出 'bc'
           console.log(str.substr(-3, 2));     // 輸出 'hi'
           console.log(str.substr(-3));        // 輸出 'hij'
           console.log(str.substr(1));         // 輸出 'bcdefghij'
           console.log(str.substr(-20, 2));    // 輸出 'ab'
           console.log(str.substr(20, 2));     // 輸出空字串 ''
substring() 跟substr(),slice()相似用來切割字串,可以從一段字串中擷取其中的一段,差異在於substring()的兩個參數都不能傳入負數。
toLowerCase() 用來將字串中的英文字母都轉成小寫。
toUpperCase() 用來將字串中的英文字母都轉成大寫。
replace() 用來將字串中的字取代為另一個字。
charAt() 可用來取得 字串 中特定位置的 字元。var str ='hello world';  console.log(str.charAt(1));  // 輸出 'e'
charCodeAt() 可以用來取得 字串 特定位置的字元的 Unicode 編碼。
concat() 用來將好幾個 字串 相加,然後返回一個新字串。
indexOf() 用來判斷 字串變數 中是否包含某字串時出現的位置。 str.indexOf(searchValue[, fromIndex])
lastIndexOf() 相對於 indexOf() 用來找出一個 字串 在另一個字串中最後出現的位置。
match() 用來搭配 正規表示式 (Regex)來找出字串中匹配的內容。
search() 用來找出一個字串在另一個字串中的位置。search() 的用途跟 indexOf() 相似,只是search()可用 正規表示式 當參數。
slice() 可以用來擷取一個字串的其中一部分。類似用途的方法還有 substr() 和 substring()。
split() 可以用來根據你指定的分隔符號,將字串切割成一個字串陣列。

Array (陣列)

陣列 (array) 是一個有序的序列,陣列中可以儲存不定數量的任何值,陣列在 JavaScript 中屬於複合資料型態 (composite data type)。
宣告陣列 (Create an Array)
可以用 array literal [] 來宣告一個新陣列。
語法:
var arrayName = [item1, item2, ...];
 例如:var fruits = ['Apple', 'Banana'];
       陣列的最後一個元素後面不要再加上逗號 ,, 例如 ['Apple', 'Banana',] 因為在不同的瀏覽器可能會發生錯誤。

存取陣列 (Access the Elements of an Array)
陣列中的每一個值我們稱做一個元素,每一個元素儲存在陣列中固定的位置,我們稱做索引 (index),
索引值從 0 開始,表示陣列中的第一個元素,第二個之後的元素索引值則依序加 1 (0, 1, 2, 3, ...)。
我們可以用 [] 運算子來存取陣列中的元素。
語法:
ary[index]
 例如:var fruits = ['Apple', 'Banana'];
      var first = fruits[0];                      // Apple
      var last = fruits[fruits.length - 1];       // Banana
取得陣列長度 (length)
你可以由陣列的 length 屬性得到一個陣列的長度:
  var fruits = ['Apple', 'Banana'];
  console.log(fruits.length)                 // 輸出 2
新增元素
你可以用 push() 方法來新增元素到陣列最後面:
  var fruits = ['Apple', 'Banana'];
  fruits.push('Orange');
  console.log(fruits);                // 輸出 ["Apple", "Banana", "Orange"]
或用 ary[aryLength] 的方式:
  var fruits = ['Apple', 'Banana'];
  fruits[fruits.length] = 'Orange';
  console.log(fruits);                // 輸出 ["Apple", "Banana", "Orange"]
上面的 fruits.length 其實就是陣列目前最大索引值加 1 的意思,但一般都會用 .push() 比較方便。
或用 unshift() 方法來新增一個元素到陣列最前面:
  var fruits = ['Apple', 'Banana'];
  fruits.unshift('Orange');
  console.log(fruits);                // 輸出 ["Orange", "Apple", "Banana"]
刪除元素
用 pop() 方法來移除陣列中的"最後一個元素":
  var fruits = ['Apple', 'Banana'];
  var last = fruits.pop();         // pop() 除了移除元素,還會返回移除的元素值  // Banana
  console.log(fruits);             // 輸出 ["Apple"]
用 shift() 方法來移除陣列中的"第一個元素":
  var fruits = ['Apple', 'Banana'];
  var first = fruits.shift();    // shift() 除了移除元素,還會返回移除的元素值  // Apple
  console.log(fruits);           // 輸出 ["Banana"]
delete 運算子可以用來刪除特定位置的元素,但它不會移除元素,只是將該位置的元素值變成 undefined:
  var fruits = ['Apple', 'Banana', 'Orange'];
  delete fruits[0];
  fruits;                // [undefined, "Banana", "Orange"]

迴圈呼叫陣列 (for loop Array Elements)
for 語法可以用來遍歷陣列中所有的元素。
用法:
var fruits = ['Apple', 'Banana', 'Orange'];     // 依序會輸出:
for (var i=0; i<fruits.length; ++i) {           // Apple
    console.log(fruits[i]);                     // Banana
}                                               // Orange

陣列排序 (Array Sorting)  .sort()
陣列的 sort() 方法可以用來做陣列內元素的排序
語法:
ary.sort()
ary.sort(compareFunction)
sort() 預設會將元素轉型成 字串 再做比較,比較的方式是從左到右逐一比對元素中的每個字元的 Unicode code point 大小。
sort() 執行後會返回排序後的陣列。
 
● 字串型態元素的排序                 - 陣列排序 .sort()
var fruits = ['cherries', 'apples', 'bananas'];
fruits.sort();                     // 返回 ["apples", "bananas", "cherries"]
● 數字型態元素的排序 (Numeric Sort)  - 陣列排序 .sort()
var scores = [1, 10, 21, 2]; 
scores.sort();          // 返回 [1, 10, 2, 21]
                        // 注意 10 會排在 2 前面,因為字串'10'的第一個字元'1'比'2'的 Unicode code point 小
var things = ['word', 'Word', '1 Word', '2 Words'];
things.sort();          // 返回 ["1 Word", "2 Words", "Word", "word"]
                        // 因為數字的 Unicode code point 比英文字小
● 倒轉陣列排序 (Reversing an Array)    - 陣列排序 .sort()
你可以搭配  reverse() 方法 來將陣列的順序倒轉:
var fruits = ['cherries', 'apples', 'bananas'];
fruits.sort();
fruits.reverse();
console.log(fruits);    // 輸出 ["cherries", "bananas", "apples"]
● 自定義排序 (Custom Sort)          - 陣列排序 .sort()
sort() 可以傳入函數參數 compareFunction,可以用來自訂排序的邏輯,
陣列會根據 compareFunction 函數的回傳值來做排序依據。
compareFunction(a, b) 函數接受兩個參數,分別表示兩個元素值怎麼做比較,然後傳回一個數字,可能是正數、0 或負數:
compareFunction(a, b) 回傳值如果小於 0 (負數),表示 a 排序在 b 前面
compareFunction(a, b) 回傳值如果等於 0,表示 a 和 b 排序一樣位置不動
compareFunction(a, b) 回傳值如果大於 0 (正數),表示 b 排序在 a 前面
ECMAscript 標準沒規範當 0 相等的時候,哪個元素排先哪個元素排後,每個瀏覽器的實做可能會不一樣。
用法:
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
    return a - b;
});
console.log(numbers);     // 輸出 [1, 2, 3, 4, 5]
● 排序物件元素 (Sorting Object Array)   - 陣列排序 .sort()
var members = [
    {name: 'Mike', age: 30},
    {name: 'Jimmy', age: 25},
    {name: 'Judy', age: 20}
];
members.sort(function(a, b) {
    return a.age > b.age;               // boolean false == 0; true == 1
});
console.log(members);                   // 順序依序會是 Mike -> Jimmy -> Judy
● 亂數排序 (Random Order)        - 陣列排序 .sort()
var numbers = [10, 50, 1, 80, 250, 500, 101, 300];
numbers.sort(function(a, b) {
    return 0.5 - Math.random();    });
numbers; // [250, 10, 80, 1, 500, 101, 50, 300]  //每次執行排序後的結果都會不一樣
 
Array 物件內建的方法 (Methods) concat() every() filter() forEach() indexOf() join() lastIndexOf() map() pop() push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() unshift()