JavaScript ES5

ECMAScript 5 是什么？

ECMAScript 5 也稱為 ES5 和 ECMAScript 2009。

本章介紹 ES5 的一些最重要的特性。

ECMAScript 5 特性

這些是 2009 年發布的新特性：

  • "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()
  • 屬性 Getter 和 Setter
  • 新的對象屬性和方法

ECMAScript 5 語法更改

  • 對字符串的屬性訪問 [ ]
  • 數組和對象字面量中的尾隨逗號
  • 多行字符串字面量
  • 作為屬性名稱的保留字

"use strict" 指令

“use strict” 定義 JavaScript 代碼應該以“嚴格模式”執行。

例如，使用嚴格模式，不能使用未聲明的變量。

您可以在所有程序中使用嚴格模式。它可以幫助您編寫更清晰的代碼，例如阻止您使用未聲明的變量。

“use strict” 只是一個字符串表達式。舊瀏覽器如果不理解它們就不會拋出錯誤。

請閱讀 JS 嚴格模式 中的更多內容。

String.trim()

String.trim() 刪除字符串兩端的空白字符。

實例

var str = "       Hello World!        ";
alert(str.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()

檢索數組中的某個元素值并返回其位置：

實例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

親自試一試

請在 JS 數組迭代方法中學習更多內容。

Array.lastIndexOf()

Array.lastIndexOf() 與 Array.indexOf() 類似，但是從數組結尾處開始檢索。

實例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

親自試一試

請在 JS 數組迭代方法 中學習更多內容。

JSON.parse()

JSON 的一個常見用途是從 Web 服務器接收數據。

想象一下，您從Web服務器收到這條文本字符串：

'{"name":"Bill", "age":62, "city":"Seatle"}'

JavaScript 函數 JSON.parse() 用于將文本轉換為 JavaScript 對象：

var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');

親自試一試

請在我們的 JSON 教程 中學習更多內容。

JSON.stringify()

JSON 的一個常見用途是將數據發送到Web服務器。

將數據發送到 Web 服務器時，數據必須是字符串。

想象一下，我們在 JavaScript 中有這個對象：

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

請使用 JavaScript 函數 JSON.stringify() 將其轉換為字符串。

var myJSON = JSON.stringify(obj);

結果將是遵循 JSON 表示法的字符串。

myJSON 現在是一個字符串，準備好發送到服務器：

實例

var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

親自試一試

請在我們的 JSON 教程 中學習更多內容。

Date.now()

Date.now() 返回自零日期（1970 年 1 月 1 日 00:00:00:00）以來的毫秒數。

實例

var timInMSs = Date.now();

親自試一試

Date.now() 的返回與在 Date 對象上執行 getTime() 的結果相同。

請在 JS 日期 中學習更多。

屬性 Getter 和 Setter

ES5 允許您使用類似于獲取或設置屬性的語法來定義對象方法。

這個例子為名為 fullName 的屬性創建一個 getter：

實例

// 創建對象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// 使用 getter 顯示來自對象的數據：
document.getElementById("demo").innerHTML = person.fullName;

親自試一試

這個例子為語言屬性創建一個 setter 和一個 getter：

實例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  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: "Bill",
  lastName : "Gates",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
};
// 使用 setter 設置對象屬性：
person.lang = "en";
// 顯示來自對象的數據：
document.getElementById("demo").innerHTML = person.language;

親自試一試

請在 JS 對象訪問器 中學習更多有關 Getter 和 Setter 的知識。

新的對象屬性和方法

Object.defineProperty() 是 ES5 中的新對象方法。

它允許您定義對象屬性和/或更改屬性的值和/或元數據。

實例

// 創建對象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
};
// 更改屬性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// 枚舉屬性
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

親自試一試

下一個例子是相同的代碼，但它隱藏了枚舉中的語言屬性：

實例

// 創建對象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
};
// 更改屬性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// 枚舉屬性
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

親自試一試

此例創建一個 setter 和 getter 來確保語言的大寫更新：

實例

// 創建對象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  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;

親自試一試

ES5 新的對象方法

ECMAScript 5 為 JavaScript 添加了許多新的對象方法：

// 添加或更改對象屬性
Object.defineProperty(object, property, descriptor)
// 添加或更改多個對象屬性
Object.defineProperties(object, descriptors)
// 訪問屬性
Object.getOwnPropertyDescriptor(object, property)
// 將所有屬性作為數組返回
Object.getOwnPropertyNames(object)
// 將可枚舉屬性作為數組返回
Object.keys(object)
// 訪問原型
Object.getPrototypeOf(object)
// 防止向對象添加屬性
Object.preventExtensions(object)
// 如果可以將屬性添加到對象，則返回 true
Object.isExtensible(object)
// 防止更改對象屬性（而不是值）
Object.seal(object)
// 如果對象被密封，則返回 true
Object.isSealed(object)
// 防止對對象進行任何更改
Object.freeze(object)
// 如果對象被凍結，則返回 true
Object.isFrozen(object)

請在 對象 ECMAScript5 中學習更多內容。

對字符串的屬性訪問

charAt() 方法返回字符串中指定索引（位置）的字符：

實例

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

親自試一試

ECMAScript 5 允許對字符串進行屬性訪問：

實例

var str = "HELLO WORLD";
str[0];                   // 返回 H

親自試一試

對字符串的屬性訪問可能有點不可預測。

請在 JS 字符串方法 中學習更多內容。

尾隨逗號(Trailing Commas)

ECMAScript 5 允許在對象和數組定義中使用尾隨逗號：

Object 實例

person = {
  firstName: "Bill",
  lastName: " Gates",
  age: 62,
}

Array 實例

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

警告！！！

Internet Explorer 8 將崩潰。

JSON 不允許使用尾隨逗號。

JSON 對象：

// 允許：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)
// 不允許：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

JSON 數組：

// 允許：
points = [40, 100, 1, 5, 25, 10]
// 不允許：
points = [40, 100, 1, 5, 25, 10,]

多行字符串

如果使用反斜杠轉義，ECMAScript 5 允許多行的字符串文字（字面量）：

實例

"Hello \
Kitty!";

親自試一試

\ 方法可能沒有得到普遍的支持。

較舊的瀏覽器可能會以不同的方式處理反斜杠周圍的空格。

一些舊的瀏覽器不允許 \ 字符后面的空格。

分解字符串文字的一種更安全的方法是使用字符串添加：

實例

"Hello " + 
"Kitty!";

親自試一試

保留字作為屬性名稱

ECMAScript 5 允許保留字作為屬性名稱：

對象實例

var obj = {name: "Bill", new: "yes"}

親自試一試

ES5（ECMAScript 5）瀏覽器支持

Chrome 23、IE 10 和 Safari 6 是第一批完全支持 ECMAScript 5 的瀏覽器：

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
2012 年 9 月 2012 年 9 月 2013 年 4 月 2012 年 7 月 2013 年 7 月