JavaScript快速入門 – 字串、陣列與物件
Strings
let str = 'Hi'; let greeting = "Hello";
跳脫字元 Escape Characters
跳離本身字元所代表的意義，在一個字串表示中，若要輸出"，要寫成："""，否則第2個"會被當成字串字元，第3個字串字元"被當成多餘的字串字元。 ' — Single quote " — Double quote — Backslash b — Backspace 到退 f — Form feed，換頁，進紙 n — New line ，新行 r — Carriage return ，游標回到一開始的位置 t — Horizontal tabulator，水平定位 v — Vertical tabulator ，垂直定位Windows line break: 'rn' Unix line break: 'n' Tab: 't' Backslash ''
String 方法
charAt() 回傳字串中的特定位置處的字元 (將字串視為字元的陣列，索引值從0開始)var str = 'hello world'; // 輸出 'e' console.log(str.charAt(1)); // 輸出 'h' console.log(str.charAt(0));charCodeAt() 取得字串特定位置的字元的 Unicode 編碼
var str = 'hello world'; // 輸出 104 console.log(str.charCodeAt(0)); // 輸出 101 console.log(str.charCodeAt(1));concat() 幾個字串相加，然後返回一個新字串
var hello = 'Hello, ';
// 輸出 'Hello, Mike have a nice day.'
console.log(hello.concat('Mike', ' have a nice day.'));
簡單一點，使用+就可以連接2個字串：
var hello = 'Hello, '; // 輸出 'Hello, Mike have a nice day.' console.log(hello + 'Mike' + ' have a nice day.');fromCharCode() 回傳1或多個指定的unicode編碼的字符(串)
String.fromCharCode(72,69,76,76,79); //HELLO String.fromCharCode(65,66,67); //ABCindexOf() 判斷字串字串變數中是否包含某字串，返回找到的位置，第一個位置從 0 開始算起；找不到則返回 -1
'Blue Whale'.indexOf('Blue'); // 0
'Blue Whale'.indexOf('Blute'); // -1
'Blue Whale'.indexOf('Whale', 0); // 5
'Blue Whale Blue'.indexOf('Blue', 5); // 11
lastIndexOf()
找出一個字串在另一個字串中最後出現的位置。
var str = 'Brave new world';
str.lastIndexOf('w'); // 10
str.lastIndexOf('g'); // -1
match()
搭配正規表示式 (Regex)來找出字串中匹配的內容。
返回一個陣列，第一個元素是完整匹配內容，接著是匹配的群組 (capturing group)；如果沒有匹配則返回 null。
var str = 'For more information, see Chapter 3.4.5.1'; var re = /see (chapter d+(.d)*)/i; var found = str.match(re); // 輸出 ["see Chapter 3.4.5.1", "Chapter 3.4.5.1", ".1"] console.log(found);replace() 字串取代 search() 找出一個字串在另一個字串中的位置。search() 的用途跟 indexOf() 相似，只是 search() 可以用正規表示式當參數。
var str = 'Apples are red, and apples are good.'; // 輸出 0 console.log(str.search(/apple/i));slice() 用來擷取一個字串的其中一部分。
var str = 'The morning is upon us.'; // 輸出 'he morn' console.log(str.slice(1, 8)); // 輸出 'morning is upon u' console.log(str.slice(4, -2)); // 輸出 'is upon us.' console.log(str.slice(12)); // 輸出空字串 '' console.log(str.slice(30)); // 輸出 'us.' console.log(str.slice(-3)); // 輸出 'us' console.log(str.slice(-3, -1)); // 輸出 'The morning is upon us' console.log(str.slice(0, -1));split() 用來根據你指定的分隔符號，將字串切割成一個字串陣列。
var str = 'a,b,c,d,e';
var strAry = str.split(',');
// 輸出 ["a", "b", "c", "d", "e"]
console.log(strAry);
// 輸出 ["a", "b"]
console.log(str.split(',', 2));
分隔符號也可以是一個正規表示式：
var names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand '; var re = /s*;s*/; var nameList = names.split(re); // 輸出 ["Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand "] console.log(nameList);substr() 跟 substring(), slice() 相似用來切割字串，可以從一段字串中擷取其中的一段，差異在於 substr() 第二個參數是指定要擷取多長。 語法：
str.substr(start [, length])- 參數 start 是一個數字表示要從哪個位置開始擷取，位置從 0 開始；如果 start 是一個負數則視為0；如果 start 大於字串長度，結果會返回空字串。
- 參數 length 是一個數字表示總共要取出幾個字元，預設取到字串結尾。
- 結果會返回一個新字串。
var str = 'abcdefghij'; // 輸出 'bc' console.log(str.substr(1, 2)); // 輸出 'hi' console.log(str.substr(-3, 2)); // 輸出 'hij' console.log(str.substr(-3)); // 輸出 'bcdefghij' console.log(str.substr(1)); // 輸出 'ab' console.log(str.substr(-20, 2)); // 輸出空字串 '' console.log(str.substr(20, 2));substring() 跟 substr(), slice() 相似用來切割字串，可以從一段字串中擷取其中的一段，差異在於 substring() 的兩個參數都不能傳入負數。 語法：
str.substring(indexStart[, indexEnd])
- 參數 indexStart 是一個數字表示要從哪個位置開始擷取
- 參數 indexEnd 是一個數字表示要擷取到哪個位置之前為止，預設取到字串結尾
- 結果會返回一個新字串
var str = 'fooish.com'; // 輸出 'foo' console.log(str.substring(0, 3)); console.log(str.substring(3, 0)); // 輸出 'sh.' console.log(str.substring(4, 7)); console.log(str.substring(7, 4)); // 輸出 fooish console.log(str.substring(0, 6)); // 輸出 'fooish.com' console.log(str.substring(0, 10)); console.log(str.substring(0, 20)); console.log(str.substring(100, 0));toLowerCase() 用來將字串中的英文字母都轉成小寫。
// 輸出 'apple'
console.log('APPLE'.toLowerCase());
toUpperCase()
將字串中的英文字母都轉成大寫。
// 輸出 'APPLE'
console.log('apple'.toUpperCase());
模版字串/Template literals
模版字串係ES6所導入，目的是在字串中嵌入變數，此種用法類似Vue.js，在網頁中入內容變數。(Word也有類似的功能，一個文件中可以嵌入變數欄位，應用在像是郵寄標籤、表格列印等。)var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' andnnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
陣列/Arrays
語法： 陣列名稱[索引] 索引值由0開始，在Java/JavaScript/C#程式語言中，陣列本身就是一個物件，陣列有一個屬性值：length，表示陣列的個數(長度)，最後一個元素的索引值為length-1。 陣列的功用是將同一型態的資料放置在一起，透過陣列的名稱與索引來存取陣列中的元素。例： var fruit = ["Banana", "Apple", "Pear"]; 其中fruit[0]="Banana"，fruit[1]="Apple"，fruit[2]="Pear"。 索引的概念就像是英文書籍中的索引頁，透過關鍵字的索引值可以快速找到該關鍵字在書中出現的地方。 再舉一個班級裏所有的學生為例，如果一個班級有50位學生，我們若給予每一個學生一個變數，宣告並取名： var student1, student2, student3，…，student50; 這樣的方式，若要存取所有的學生變數一次，就要寫50次的敘述： student1="Allen"; student2="Alice"; … 這樣寫法會很讓人抓狂，個體數量少還能處理， 若個體數量超過100、1000、10000？為了解決這樣的問題，陣列就是我們最好的工具： var student = ["Allen", "Alice", (後面省略)]; 之後我們要走訪陣列，可以用for迴圈：for(let i = 0; i < 49; i++) {
console.log(student[i]);
}
陣列的應用
週天的名稱轉換表格
var weekdayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; console.log(weekdayNames[ new Date().getDay() ] );上面程式可以輸出今天是禮拜幾(英文)
每月的天數
var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var thisYear = new Date().getFullYear(); if (thisYear % 400 == 0 || (thisYear%100 !=0 && thisYear %4 == 0)) monthDays[1] = 29; //閏年判斷，是閏年的話，2月為29天 console.log( monthDays[ new Date().getMonth() ] );上面的程式可以輸出這個月的天數。
陣列方法/Array Methods
concat() 結合多個陣列成為一個陣列 indexOf() 回傳一個元素在一個陣列中首次出現的位置(陣列可能包含相同的元素) join() 將一個陣列的元素結合成一個字串，並傳回該字串的參考 lastIndexOf() 回傳一個元素在一個陣列中最後出現的位置(陣列可能包含相同的元素) pop() 取出陣列中的最後一個元素(堆疊後進先出的概念) push() 加入一個元素到陣列的後端(堆疊後進先出的概念) reverse() 反轉陣列的元素 shift() 取出陣列的第一個元素 (串列先進先出的概念) slice() 取出一個陣列中的部份元素成為一個新的陣列 sort() 以字母順序方式排序陣列中的元素 splice() 加入一個元素以指定的方式與位置 toString() 將元素轉成一個字串 unshift() 加入一個元素到一個陣列的前端 valueOf() 回傳指定物件的值物件/Objects
var person = { firstName:"John", lastName:"Doe", age:20, nationality:"R.O.C." };物件屬性與值
| 屬性/Property | 值/Value |
|---|---|
| firstName | Wells |
| lastName | Chen |
| age | 20 |
| nationality | R.O.C. |
物件的new
傳統/標準的物件是新增一個物件，再指定物件的屬性與值。 Object是JavaScript所訂的一個最上層的物件類別(不管有沒有明確繼承Object類別)，是所有類別最終的父類別，在OO的世界中表示"Everything is an object/萬物皆為物件"。var person = new Object(); person.firstName = "Wells"; person.lastName = "Chen"; person.age = 20; person.nationality= "R.O.C.";
物件參考
上例，person是指向一個Object的"參考"，就像是地圖上指向寶藏的真正位置，在我們的電腦裏，物件的位置就是物件在記憶體中0101位址值。 var x = person; 上面的敘述是新宣告一個參考變數x，指向person所指向的物件，也就是說目標物件有二個參考變數x與person所指向。 要注意的是，上面的敘述不是產生一個新的物件。也就是說，至始至終也就一個物件，物件可以被多個參考變數指向，就像人可以有多個名字、代號。
