ES5 ng JavaScript

Ano ang 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()
  • Propersiyon Getter at Setter
  • bagong propersiyon at paraan ng bagay

ECMAScript 5 語法更改

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

"use strict" 指令

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

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

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

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

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

String.trim()

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

Example

var str = "       Hello World!        ";
alert(str.trim());

Try It Yourself

请在 JS 字符串方法 中閱讀更多內容。

Array.isArray()

isArray() 方法檢查對象是否為數組。

Example

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

Try It Yourself

请在 JS 數組 中閱讀更多內容。

Array.forEach()

forEach() 方法為每個數組元素調用一次函數。

Example

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

Try It Yourself

请在 JS 数组迭代方法 中学习更多内容。

Array.map()

此例給每個數組值乘以 2：

Example

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

Try It Yourself

请在 JS 数组迭代方法 中学习更多内容。

Array.filter()

此例用值大於 18 的元素創建一個新數組：

Example

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

Try It Yourself

请在 JS 数组迭代方法 中学习更多内容。

Array.reduce()

此例確定數組中所有數的總和：

Example

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

Try It Yourself

请在 JS 数组迭代方法 中学习更多内容。

Array.reduceRight()

这个例子同样是确定数组中所有数的总和：

Example

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

Try It Yourself

请在 JS 数组迭代方法 中学习更多内容。

Array.every()

这个例子检查是否所有值都超过 18：

Example

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

Try It Yourself

请在 JS 数组迭代方法 中学习更多内容。

Array.some()

这个例子检查某些值是否超过 18：

Example

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
function myFunction(value) {
  return value > 18;
}

Try It Yourself

请在 JS 数组迭代方法 中学习更多内容。

Array.indexOf()

检索数组中的某个元素值并返回其位置：

Example

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

Try It Yourself

请在 JS 数组迭代方法中学习更多内容。

Array.lastIndexOf()

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾处开始检索。

Example

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

Try It Yourself

请在 JS 数组迭代方法 中学习更多内容。

JSON.parse()

JSON 的一个常见用途是从 Web 服务器接收数据。

想象一下，您从 Web 服务器收到这条文本字符串：

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

Functions in JavaScript JSON.parse() 用于将文本转换为 JavaScript 对象：

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

Try It Yourself

Mangyaring pumunta sa aming JSON tutorial 中学习更多内容。

JSON.stringify()

JSON 的一个常见用途是将数据发送到 Web 服务器。

将数据发送到 Web 服务器时，数据必须是字符串。

想象一下，我们在 JavaScript 中有这个对象：

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

请使用 JavaScript 函数 JSON.stringify() 将其转换为字符串。

var myJSON = JSON.stringify(obj);

结果将是遵循 JSON 表示法的字符串。

myJSON 现在是一个字符串，准备发送到服务器：

Example

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

Try It Yourself

Mangyaring pumunta sa aming JSON tutorial 中学习更多内容。

Date.now()

Date.now() ay nagbibigay ng bilang ng milyeseconde mula sa wakas ng petsa (1970 Enero 1, 00:00:00:00).

Example

var timInMSs = Date.now();

Try It Yourself

Date.now() ang bumalik ay katulad ng resulta ng pagpapatugtugan ng getTime() sa bagay na petsa.

请在 JS petsa sa pag-aaral ng higit pang kaalaman.

Propersiyon Getter at Setter

ES5 ay nagbibigay ng kapangyarihan sa iyo na gamitin ang sintaks ng pagkuha o pagtatakda ng propersiyon upang lagayin ang mga paraan ng bagay.

Ang halimbawa na ito ay gumagawa ng isang propersiyon na may pangalang fullName: getter:

Example

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates"
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Gamitin ang getter upang ipakita ang data mula sa bagay:
document.getElementById("demo").innerHTML = person.fullName;

Try It Yourself

Ang halimbawa na ito ay gumagawa ng isang setter at isang getter:

Example

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// Gamitin ang setter upang itakda ang propersiyon ng bagay:
person.lang = "en";
// Gamitin ang getter upang ipakita ang data mula sa bagay:
document.getElementById("demo").innerHTML = person.lang;

Try It Yourself

Ang halimbawa na ito ay gumagamit ng setter upang siguraduhin na ang kapagdagdag ng wika ay may mga malalaki na titik:

Example

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Gamitin ang setter upang itakda ang propersiyon ng bagay:
person.lang = "en";
// Ipakita ang data mula sa bagay:
document.getElementById("demo").innerHTML = person.language;

Try It Yourself

请在 JS object accessor sa pag-aaral ng higit pang kaalaman tungkol sa Getter at Setter.

bagong propersiyon at paraan ng bagay

Object.defineProperty() ito ay bagong paraan ng bagay sa ES5.

ito ay nagbibigay ng kapangyarihan sa iyo na maglagay ng ato magbabago ang halaga at metadata ng mga propersiyon ng bagay.

Example

// 创建对象：
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;

Try It Yourself

下一个例子是相同的代码，但它隐藏了枚举中的语言属性：

Example

// 创建对象：
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;

Try It Yourself

此例创建一个 setter 和 getter 来确保语言的大写更新：

Example

// 创建对象：
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;

Try It Yourself

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() 方法返回字符串中指定索引（位置）的字符：

Example

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

Try It Yourself

ECMAScript 5 允许对字符串进行属性访问：

Example

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

Try It Yourself

对字符串的属性访问可能有点不可预测。

请在 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,]

Multi-line Strings

If backslashes are used for escaping, ECMAScript 5 allows multi-line string literals (literals):

Example

"Hello \
Kitty!";

Try It Yourself

The backslash method may not be universally supported.

Older browsers may handle spaces around the backslash differently.

Some old browsers do not allow spaces after the backslash character.

A safer way to split string literals is to use string concatenation:

Example

"Hello " + 
"Kitty!";

Try It Yourself

Reserved Words as Property Names

ECMAScript 5 allows reserved words to be used as property names:

Object Example

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

Try It Yourself

ES5 (ECMAScript 5) Browser Support

Chrome 23, IE 10, and Safari 6 are the first browsers to fully support ECMAScript 5:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
September 2012 September 2012 April 2013 July 2012 July 2013