JavaScript - ES5：初學者的全面指南
你好，有志於成為JavaScript開發者的各位！我很高興能成為你們在這個令人興奮的JavaScript ES5世界中的引路人。作為一位具有多年經驗的計算機科學教師，我見證了無數學生從完全的初學者蛻變成自信的編程者。所以，如果你從零開始，不必擔心——我們會一步步來，在你還沒反應過來之前，你將能夠像專業人士一樣編寫JavaScript！
JavaScript ES5中的新增功能
JavaScript ES5在2009年發布，為語言帶來了一系列很酷的新功能。這就像你喜歡的視頻遊戲獲得了一次出色的更新——突然間，你有了新的工具和能力，讓一切變得更加有趣和高效！讓我們一起探索這些功能，看看它們如何讓我們的編程生活變得更容易。
JavaScript數組方法
數組就像是JavaScript中的瑞士軍刀——它們非常多用處，并能夠處理各種數據。ES5引入了幾個新的方法，讓數組操作變得更加輕鬆。讓我們一一看看：
JavaScript數組 every()
every()方法就像一位嚴肅的老師，檢查班上的所有學生是否都完成了作業。它檢測數組中的所有元素是否都通過了特定的條件。
let numbers = [2, 4, 6, 8, 10];
let allEven = numbers.every(function(num) {
return num % 2 === 0;
});
console.log(allEven); // 輸出：true在這個例子中，every()檢查數組中的所有數字是否都是偶數。由於它們是，所以它返回true。
JavaScript數組 filter()
filter()就像夜總會的保鏢，只讓符合某些標準的元素進入。它創建一個新數組，包含所有通過測試的元素。
let fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
let longFruits = fruits.filter(function(fruit) {
return fruit.length > 5;
});
console.log(longFruits); // 輸出：['banana', 'cherry', 'elderberry']在這裡，filter()創建一個包含只有名字超過5個字符的水果的新數組。
JavaScript數組 forEach()
forEach()就像一個導遊，帶你一一參觀數組中的每個元素。它對數組中的每個元素執行一次提供的函數。
let colors = ['red', 'green', 'blue'];
colors.forEach(function(color, index) {
console.log(`Color at position ${index} is ${color}`);
});
// 輸出：
// Color at position 0 is red
// Color at position 1 is green
// Color at position 2 is blue這個方法很適合對數組中的每個元素進行操作，而不需要創建新數組。
JavaScript數組 isArray()
isArray()就像一名偵探，判斷一個對象是否是數組。如果對象是數組，則返回true，否則返回false。
console.log(Array.isArray([1, 2, 3])); // 輸出：true
console.log(Array.isArray('Hello')); // 輸出：false這個方法在需要檢查變量是否為數組以執行數組特定操作時特別有用。
JavaScript數組 indexOf()
indexOf()就像一個搜尋隊，尋找數組中的特定元素，並告訴你它在哪裡。它返回數組中可以找到給定元素的第一次出現的索引，或者如果元素不存在則返回-1。
let fruits = ['apple', 'banana', 'cherry', 'date'];
console.log(fruits.indexOf('cherry')); // 輸出：2
console.log(fruits.indexOf('grape')); // 輸出：-1這個方法在需要找到數組中元素的位置時很方便。
JavaScript數組 lastIndexOf()
lastIndexOf()與indexOf()類似，但它從數組的末尾開始搜索。它返回數組中可以找到給定元素的最后一次出現的索引，或者如果元素不存在則返回-1。
let numbers = [1, 2, 3, 2, 1];
console.log(numbers.lastIndexOf(2)); // 輸出：3
console.log(numbers.lastIndexOf(4)); // 輸出：-1這個方法在你想找到數組中元素的最后一次出現時很有用。
JavaScript數組 map()
map()就像一根魔法棒，轉換數組中的每個元素。它創建一個新數組，包含對每個元素調用提供的函數的結果。
let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(function(num) {
return num * num;
});
console.log(squared); // 輸出：[1, 4, 9, 16, 25]在這個例子中，map()創建一個每個數字都被平方的新數組。
JavaScript數組 reduce()
reduce()就像一個雪球從山上滾下來，積累著值。它對數組中的每個元素執行一個還原函數，結果為一個單一的輸出值。
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 輸出：15在這裡，reduce()用於將數組中的所有數字相加。
JavaScript數組 reduceRight()
reduceRight()與reduce()類似，但它從右到左處理數組。
let numbers = [1, 2, 3, 4, 5];
let result = numbers.reduceRight(function(accumulator, currentValue) {
return accumulator - currentValue;
});
console.log(result); // 輸出：-5 (5 - 4 - 3 - 2 - 1)這個方法在處理順序重要並且你想從數組的末尾開始時很有用。
JavaScript數組 some()
some()就像一位寬厚的老師，只要至少有一個學生完成了作業他就高興。它檢測數組中至少有一個元素是否通過了提供的函數的測試。
let numbers = [1, 3, 5, 7, 8, 9];
let hasEven = numbers.some(function(num) {
return num % 2 === 0;
});
console.log(hasEven); // 輸出：true在這個例子中，some()檢查數組中是否至少有一個偶數。
JavaScript日期方法
ES5還引入了一些方便的日期方法：
JavaScript Date now()
Date.now()返回自1970年1月1日00:00:00 UTC以來過去的毫秒數。
console.log(Date.now()); // 輸出：當前的時間戳（毫秒）這個方法在測量時間間隔或生成唯一標識符時很有用。
JavaScript Date toJSON()
toJSON()返回Date對象的JSON格式字符串表示。
let date = new Date();
console.log(date.toJSON()); // 輸出："2023-06-08T12:34:56.789Z"這個方法在需要將Date對象序列化為JSON時很有用。
JavaScript Date toISOString()
toISOString()將Date對象轉換為ISO 8601格式的字符串。
let date = new Date();
console.log(date.toISOString()); // 輸出："2023-06-08T12:34:56.789Z"這個方法在國際環境中標準化日期格式時很有用。
JavaScript Function bind()
bind()創建一個新函數，當調用時，其this關鍵字設置為提供的值。這就像給函數一個特定的上下文來工作。
let person = {
name: 'John',
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
let greetFunction = person.greet.bind(person);
greetFunction(); // 輸出："Hello, my name is John"這個方法在事件處理和面向對象的JavaScript中特別有用。
JavaScript JSON方法
ES5為JSON引入了內置支持：
JavaScript JSON parse()
JSON.parse()解析一個JSON字符串，構建由字符串描述的JavaScript值或對象。
let jsonString = '{"name":"John", "age":30, "city":"New York"}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // 輸出："John"這個方法在從API工作或將复杂数據結構存為字符串時非常關鍵。
JavaScript JSON stringify()
JSON.stringify()將JavaScript對象或值轉換為JSON字符串。
let obj = {name: "John", age: 30, city: "New York"};
let jsonString = JSON.stringify(obj);
console.log(jsonString); // 輸出：'{"name":"John","age":30,"city":"New York"}'這個方法在需要將數據發送到服務器或將复杂数據對象存為字符串時很有用。
JavaScript多行字符串
ES5引入了一種使用反斜杠字符創建多行字符串的方式：
let multiline = "This is a \
multiline string \
in JavaScript.";
console.log(multiline);
// 輸出：
// This is a multiline string in JavaScript.這個特性讓你在代碼中寫入長字符串變得更加容易。
JavaScript對象方法
ES5為對象引入了幾個新的方法：
JavaScript Object defineProperty()
Object.defineProperty()允許你直接在對象上定義新的或修改現有的屬性，並對這些屬性進行細粒度的控制。
let obj = {};
Object.defineProperty(obj, 'name', {
value: 'John',
writable: false,
enumerable: true,
configurable: true
});
console.log(obj.name); // 輸出："John"
obj.name = 'Jane'; // 這不會改變值，因為writable是false
console.log(obj.name); // 輸出："John"這個方法對於創建有特定行為和特徵的對象非常強大。
JavaScript屬性getter和setter
ES5引入了getter和setter方法，允許你定義如何訪問或修改屬性：
let person = {
firstName: 'John',
lastName: 'Doe',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
let parts = name.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
};
console.log(person.fullName); // 輸出："John Doe"
person.fullName = 'Jane Smith';
console.log(person.firstName); // 輸出："Jane"
console.log(person.lastName); // 輸出："Smith"Getters和setters讓你可以定義計算屬性以及在訪問或設置值時添加邏輯。
JavaScript保留字作為屬性名
ES5允許在對象字面量中使用保留字作為屬性名：
let obj = {
class: 'JavaScript',
for: 'beginners',
if: true
};
console.log(obj.class); // 輸出："JavaScript"這個特性提供了在命名對象屬性時的更多靈活性。
JavaScript "use strict"
ES5引入了"use strict"指令，它啟用JavaScript的嚴格模式。嚴格模式會捕獲常見的編碼錯誤，當進行相對"不安全"的操作時會抛出異常或錯誤。
"use strict";
x = 3.14; // 這會導致錯誤，因為x沒有被聲明使用嚴格模式有助於及早捕獲錯誤並促進更好的編碼實踐。
JavaScript字符串[number]訪問
ES5允許使用方括號表示法訪問字符串中的單個字符：
let str = "Hello";
console.log(str[0]); // 輸出："H"
console.log(str[1]); // 輸出："e"這個特性讓操作字符串中的單個字符變得更加容易。
JavaScript字符串 trim()
trim()方法從字符串的两端删除空白符：
let str = " Hello, World! ";
console.log(str.trim()); // 輸出："Hello, World!"這個方法在清理由用戶輸入或格式化字符串時很有用。
JavaScript後置逗號
ES5允許在對象和數組字面量中使用後置逗號：
let obj = {
name: "John",
age: 30,
}; // 沒有錯誤
let arr = [1, 2, 3,]; // 沒有錯誤這個特性讓添加或刪除對象和數組中的項目時，不必擔心逗號的放置。
結論
我們在這個教學中涵蓋了很多內容。ES5為JavaScript帶來了很多強大的功能，至今仍被廣泛使用。記住，學習編程就像學習一門新語言——它需要練習和耐心。如果你一開始不理解一切，不要氣餒。繼續編碼，繼續嘗試，最重要的是，享受樂趣！
這裡是一個我們討論過的方法總結表：
| 方法 | 描述 |
|---|---|
| Array.every() | 檢測數組中的所有元素是否都通過了提供的函數的測試 |
| Array.filter() | 創建一個新數組，包含所有通過提供的函數的測試的元素 |
| Array.forEach() | 對數組中的每個元素執行一次提供的函數 |
| Array.isArray() | 判定一個值是否為數組 |
| Array.indexOf() | 返回數組中可以找到給定元素的第一次出現的索引 |
| Array.lastIndexOf() | 返回數組中可以找到給定元素的最后一次出現的索引 |
| Array.map() | 創建一個新數組，包含對每個元素調用提供的函數的結果 |
| Array.reduce() | 對數組中的每個元素執行一個還原函數，結果為一個單一的輸出值 |
| Array.reduceRight() | 從右到左對數組中的每個元素執行一個還原函數，結果為一個單一的輸出值 |
| Array.some() | 檢測數組中至少有一個元素是否通過了提供的函數的測試 |
| Date.now() | 返回自1970年1月1日00:00:00 UTC以來過去的毫秒數 |
| Date.toJSON() | 返回Date對象的JSON格式字符串表示 |
| Date.toISOString() | 將Date對象轉換為ISO 8601格式的字符串 |
| Function.bind() | 創建一個新函數，當調用時，其this關鍵字設置為提供的值 |
| JSON.parse() | 解析一個JSON字符串，構建由字符串描述的JavaScript值或對象 |
| JSON.stringify() | 將JavaScript對象或值轉換為JSON字符串 |
| Object.defineProperty() | 直接在對象上定義新的或修改現有的屬性 |
| String.trim() | 從字符串的两端删除空白符 |
將這個表格放在手邊，當你編碼時可以快速參考。快樂的JavaScript編程！
Credits: Image by storyset