JavaScript ES5

Apa itu 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()
  • Property Getter dan Setter
  • Objek baru sifat dan kaedah

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

请在 Kaedah iterasi array 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

请在 Kaedah iterasi array 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

请在 Kaedah iterasi array 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

请在 Kaedah iterasi array JS 中学习更多内容。

Array.reduceRight()

Contoh ini juga untuk menentukan jumlah keseluruhan semua bilangan di dalam array:

Example

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

Try It Yourself

请在 Kaedah iterasi array JS 中学习更多内容。

Array.every()

Contoh ini memeriksa apakah semua nilai melebihi 18:

Example

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

Try It Yourself

请在 Kaedah iterasi array JS 中学习更多内容。

Array.some()

Contoh ini memeriksa apakah ada nilai yang melebihi 18:

Example

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

Try It Yourself

请在 Kaedah iterasi array JS 中学习更多内容。

Array.indexOf()

Mencari nilai suatu elemen di dalam array dan mengembalikan posisinya:

Example

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

Try It Yourself

请在 Kaedah iterasi array JS中学习更多内容。

Array.lastIndexOf()

Array.lastIndexOf() Dengan Array.indexOf() Dengan demikian, tetapi mencari dari akhir array.

Example

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

Try It Yourself

请在 Kaedah iterasi array JS 中学习更多内容。

JSON.parse()

Penggunaan biasa JSON adalah untuk menerima data dari pelayan Web.

Tengahkan bayangkan, anda menerima string teks ini dari pelayan Web:

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

Fungsi JavaScript JSON.parse() Digunakan untuk mengubah teks ke objek JavaScript:

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

Try It Yourself

Sila lawati di Panduan JSON 中学习更多内容。

JSON.stringify()

Penggunaan biasa JSON adalah untuk menghantar data ke pelayan Web.

Data mesti menjadi string apabila dihantar ke pelayan Web.

Tengahkan bayangkan, kami punya objek ini di JavaScript:

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

Gunakan fungsi JavaScript JSON.stringify() untuk mengubahnya ke string.

var myJSON = JSON.stringify(obj);

Hasilnya akan adalah string yang mengikuti penyenaraian JSON.

myJSON kini adalah string, siap dihantar ke pelayan:

Example

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

Try It Yourself

Sila lawati di Panduan JSON 中学习更多内容。

Date.now()

Date.now() mengembalikan bilangan millisecond dari tarikh nol (1 Januari 1970 00:00:00:00).

Example

var timInMSs = Date.now();

Try It Yourself

Date.now() kembalikan yang sama seperti keputusan daripada melaksanakan getTime() di objek Tarikh.

请在 Tarikh JS dalam mengambil tahu lebih banyak.

Property Getter dan Setter

ES5 membolehkan anda menggunakan sintaks yang seperti mengambil atau menetapkan sifat untuk mendefinikan kaedah objek.

Contoh ini membuat sifat bernama fullName yang mempunyai getter:

Example

// 创建对象:
var person = {
  firstName: "Bill",
  lastName : "Gates"
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Gunakan getter untuk tunjukkan data dari objek:
document.getElementById("demo").innerHTML = person.fullName;

Try It Yourself

Contoh ini membuat sifat bahasa yang mempunyai setter dan getter:

Example

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  get lang() {
    return this.language;
  ,
  set lang(value) {
    this.language = value;
  }
});
// Gunakan setter untuk menetapkan sifat objek:
person.lang = "en";
// Gunakan getter untuk tunjukkan data dari objek:
document.getElementById("demo").innerHTML = person.lang;

Try It Yourself

Contoh ini menggunakan setter untuk memastikan kemas kini huruf besar bahasa:

Example

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Gunakan setter untuk menetapkan sifat objek:
person.lang = "en";
// Tunjukkan data dari objek:
document.getElementById("demo").innerHTML = person.language;

Try It Yourself

请在 Aksesori Objek JS dalam mengambil tahu lebih banyak tentang Getter dan Setter.

Objek baru sifat dan kaedah

Object.defineProperty() Adalah kaedah objek baru di ES5.

Ia membolehkan anda merakamkan sifat objek dan/atau mengubah nilai dan/atau metadata sifat.

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 String

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 in different ways.

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 batch of browsers that fully support ECMAScript 5:

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