JavaScript ES5
ECMAScript 2009，也稱為 ES5，是 JavaScript 的第一個主要修訂版。
本章描述了 ES5 最重要的特性。
ES5 特性
- "use strict"
- 字串 [數字] 訪問
- 多行字串
- String.trim()
- Array.isArray()
- Array forEach()
- Array map()
- Array filter()
- Array reduce()
- Array reduceRight()
- Array every()
- Array some()
- Array indexOf()
- Array lastIndexOf()
- JSON.parse()
- JSON.stringify()
- Date.now()
- Date toISOString()
- Date toJSON()
- 屬性 Getter 和 Setter
- 保留字作為屬性名
- Object.create()
- Object.keys()
- 物件管理
- 物件保護
- Object defineProperty()
- Function bind()
- 尾隨逗號
瀏覽器支援
ES5 (JavaScript 2009) 自 2013 年 7 月起在所有現代瀏覽器中完全受支援。
| Chrome 23 |
IE/Edge 10 |
Firefox 21 |
Safari 6 |
Opera 15 |
| 2012 年 9 月 | 2012 年 9 月 | 2013 年 4 月 | 2012 年 7 月 | 2013 年 7 月 |
"use strict" 指令
"use strict" 定義了 JavaScript 程式碼應以“嚴格模式”執行。
在嚴格模式下，例如，您不能使用未宣告的變數。
您可以在所有程式中使用嚴格模式。它有助於您編寫更簡潔的程式碼，例如防止您使用未宣告的變數。
"use strict" 只是一個字串表示式。舊版瀏覽器如果無法理解它，則不會丟擲錯誤。
在 JS 嚴格模式 中瞭解更多。
字串上的屬性訪問
charAt() 方法返回字串中指定索引（位置）處的字元
ES5 允許在字串上進行屬性訪問
字串上的屬性訪問可能有點不可預測。
在 JS 字串方法 中瞭解更多。
多行字串
ES5 允許使用反斜槓轉義的多行字串字面量反斜槓方法可能沒有普遍支援。
舊版瀏覽器可能會對反斜槓周圍的空格進行不同的處理。
一些舊版瀏覽器不允許在 \ 字元後面有空格。
更安全地拆分字串字面量的方法是使用字串加法
保留字作為屬性名
ES5 允許保留字作為屬性名
String trim()
trim() 方法去除字串兩端的空白。
在 JS 字串方法 中瞭解更多。
Array.isArray()
isArray() 方法檢查一個物件是否是陣列。
示例
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
自己動手試一試 »
在 JS 陣列 中瞭解更多。
Array forEach()
forEach() 方法為陣列的每個元素呼叫一次函式。
示例
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
自己動手試一試 »
在 JS 陣列迭代方法 中瞭解更多。
Array map()
此示例將每個陣列值乘以 2
示例
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
自己動手試一試 »
在 JS 陣列迭代方法 中瞭解更多。
Array filter()
此示例從值大於 18 的元素建立新陣列
示例
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
自己動手試一試 »
在 JS 陣列迭代方法 中瞭解更多。
Array reduce()
此示例查詢陣列中所有數字的總和
示例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
自己動手試一試 »
在 JS 陣列迭代方法 中瞭解更多。
Array reduceRight()
此示例也查詢陣列中所有數字的總和
示例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
自己動手試一試 »
在 JS 陣列迭代方法 中瞭解更多。
Array every()
此示例檢查所有值是否都大於 18
示例
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
return value > 18;
}
自己動手試一試 »
在 JS 陣列迭代方法 中瞭解更多。
Array some()
此示例檢查是否有某些值大於 18
示例
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
function myFunction(value) {
return value > 18;
}
自己動手試一試 »
在 JS 陣列迭代方法 中瞭解更多。
Array indexOf()
搜尋陣列中的元素值並返回其位置。
在 JS 陣列迭代方法 中瞭解更多。
Array lastIndexOf()
lastIndexOf() 與 indexOf() 相同，但從陣列末尾開始搜尋。
示例
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
自己動手試一試 »
在 JS 陣列迭代方法 中瞭解更多。
JSON.parse()
JSON 的常見用途是從 Web 伺服器接收資料。
假設您從 Web 伺服器收到了此文字字串
'{"name":"John", "age":30, "city":"New York"}'
JavaScript 函式 JSON.parse() 用於將文字轉換為 JavaScript 物件
var obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');
自己動手試一試 »
在我們的 JSON 教程 中瞭解更多。
JSON.stringify()
JSON 的常見用途是向 Web 伺服器傳送資料。
向 Web 伺服器傳送資料時，資料必須是字串。
假設我們在 JavaScript 中有這個物件
var obj = {name:"John", age:30, city:"New York"};
使用 JavaScript 函式 JSON.stringify() 將其轉換為字串。
var myJSON = JSON.stringify(obj);
結果將是遵循 JSON 符號的字串。
myJSON 現在是一個字串，可以傳送到伺服器了
示例
var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
自己動手試一試 »
在我們的 JSON 教程 中瞭解更多。
Date.now()
Date.now() 返回自零日期（1970 年 1 月 1 日 00:00:00 UTC）以來的毫秒數。
Date.now() 返回的值與對 Date 物件執行 getTime() 相同。
在 JS 日期 中瞭解更多。
Date toISOString()
toISOString() 方法使用 ISO 標準格式將 Date 物件轉換為字串
Date toJSON()
toJSON() 將 Date 物件轉換為字串，格式為 JSON 日期。
JSON 日期格式與 ISO-8601 標準相同：YYYY-MM-DDTHH:mm:ss.sssZ
屬性 Getter 和 Setter
ES5 允許您使用看起來像獲取或設定屬性的語法來定義物件方法。
此示例為名為 fullName 的屬性建立了一個 getter
示例
// 建立一個物件
var person = {
firstName: "John",
lastName : "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
// 使用 getter 從物件顯示資料
document.getElementById("demo").innerHTML = person.fullName;
自己動手試一試 »
此示例為 language 屬性建立了一個 setter 和一個 getter
示例
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
get lang() {
return this.language;
},
set lang(value) {
this.language = value;
}
};
// 使用 setter 設定物件屬性
person.lang = "en";
// 使用 getter 從物件顯示資料
document.getElementById("demo").innerHTML = person.lang;
自己動手試一試 »
此示例使用 setter 確保語言屬性更新為大寫
示例
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
set lang(value) {
this.language = value.toUpperCase();
}
};
// 使用 setter 設定物件屬性
person.lang = "en";
// 從物件顯示資料
document.getElementById("demo").innerHTML = person.language;
自己動手試一試 »
在 JS 物件訪問器 中瞭解有關 Getter 和 Setter 的更多資訊
Object.defineProperty()
Object.defineProperty() 是 ES5 中的一個新 Object 方法。
它允許您定義物件屬性和/或更改屬性的值和/或元資料。
示例
// 建立一個物件
const person = {
firstName: "John",
lastName : "Doe",
language : "NO",
};
// 更改屬性
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
// 列舉屬性
let txt = "";
for (let x in person) {
txt += person[x] + "<br>";
}
// 顯示屬性
document.getElementById("demo").innerHTML = txt;
自己動手試一試 »
下一個示例是相同的程式碼，只是它將 language 屬性從列舉中隱藏
示例
// 建立一個物件
const person = {
firstName: "John",
lastName : "Doe",
language : "NO",
};
// 更改屬性
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : false,
configurable : true
});
// 列舉屬性
let txt = "";
for (let x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
自己動手試一試 »
此示例建立了一個 setter 和一個 getter，以確保語言屬性更新為大寫
示例
// 建立一個物件
const person = {
firstName: "John",
lastName : "Doe",
language : "NO"
};
// 更改屬性
Object.defineProperty(person, "language", {
get : function() { return language },
set : function(value) { language = value.toUpperCase()}
});
// 更改語言
person.language = "en";
// 顯示語言
document.getElementById("demo").innerHTML = person.language;
自己動手試一試 »
Object.create()
Object.create() 方法從現有物件建立物件。
示例
// 建立一個物件
const person = {
firstName: "John",
lastName: "Doe"
};
// 建立新物件
const man = Object.create(person);
man.firstName = "Peter";
自己動手試一試 »
Object.keys()
Object.keys() 方法返回一個包含物件鍵的陣列。
示例
// 建立一個物件
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// 獲取鍵
const keys = Object.keys(person);
自己動手試一試 »
物件管理
ES5 向 JavaScript 添加了新的物件管理方法
管理物件
// 新增或更改物件屬性
Object.defineProperty(object, property, descriptor)
// 新增或更改物件屬性
Object.defineProperties(object, descriptors)
// 訪問屬性
Object.getOwnPropertyDescriptor(object, property)
// 訪問屬性
Object.getOwnPropertyDescriptors(object)
// 將所有屬性作為陣列返回
Object.getOwnPropertyNames(object)
// 訪問原型
Object.getPrototypeOf(object)
在 物件管理 中瞭解更多。
物件保護
ES5 向 JavaScript 添加了物件保護方法
保護物件
// 阻止向物件新增屬性
Object.preventExtensions(object)
// 如果可以向物件新增屬性，則返回 true
Object.isExtensible(object)
// 阻止更改物件屬性（而非值）
Object.seal(object)
// 如果物件已密封，則返回 true
Object.isSealed(object)
// 阻止對物件進行任何更改
Object.freeze(object)
// 如果物件已凍結，則返回 true
Object.isFrozen(object)
在 物件保護 中瞭解更多。
Function Bind()
透過 bind() 方法，一個物件可以借用另一個物件的方法。
此示例建立了 2 個物件（person 和 member）。
member 物件借用了 person 物件的 fullname 方法
示例
const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName:"Hege",
lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);
自己動手試一試 »
在 函式 bind() 中瞭解更多。
尾隨逗號
ES5 允許在物件和陣列定義中使用尾隨逗號
物件示例
person = {
firstName: "John",
lastName: " Doe",
age: 46,
}
陣列示例
points = [
1,
5,
10,
25,
40,
100,
];
警告！！！
JSON 不允許尾隨逗號。
JSON 物件
// 允許
var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
JSON.parse(person)
// 不允許
var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
JSON.parse(person)
JSON 陣列
// 允許
points = [40, 100, 1, 5, 25, 10]
// 不允許
points = [40, 100, 1, 5, 25, 10,]
