ECMAScript 2009 - ES5

ES5(ECMAScript 2009) 是 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()
  • 访问器属性 Getter 和 Setter
  • 新的对象属性方法

ES5 语法变化

  • 字符串上的属性访问 []
  • 数组字面量和对象字面量的最后一个元素可以尾随逗号
  • 多行字符串文字

“严格模式”指令

"use strict" 定义 JavaScript 代码应该在“严格模式”下执行。

例如,在严格模式下,您不可以使用未声明的变量。

您可以在所有程序中使用严格模式。它可以帮助您编写更清晰的代码,例如防止您使用未声明的变量。

"use strict" 只是一个字符串表达式。旧浏览器如果不理解它不会抛出错误。

转到JavaScript 严格模式章节中阅读更多内容。

String.trim()

trim() 方法删除字符串两侧的空格,并作为新串返回。

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

请转到 JavaScript 字符串方法章节阅读更多内容。

Array.isArray()

Array.isArray() 方法检查对象是否为数组。

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

请转到 JavaScript 数组中阅读更多内容。

Array.forEach()

Array.forEach() 方法为每个数组元素调用一次指定的回调函数。

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>";
}

请转到在 JavaScript 数组遍历章节了解更多信息。

Array.map()

此示例将每个数组值乘以 2:

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

请转到在 JavaScript 数组遍历章节了解更多信息。

Array.filter()

此示例从值大于 18 的元素创建一个新数组:

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}

请转到在 JavaScript 数组遍历章节了解更多信息。

数组.reduce()

此示例汇总数组中所有数字的总和:

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

请转到在 JavaScript 数组遍历章节了解更多信息。

Array.reduceRight()

此示例还查找数组中所有数字的总和:

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

请转到在 JavaScript 数组遍历章节了解更多信息。

Array.every()

此示例检查所有值是否都超过 18:

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

请转到在 JavaScript 数组遍历章节了解更多信息。

数组.some()

此示例检查某些值是否超过 18:

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

function myFunction(value) {
  return value > 18;
}

请转到在 JavaScript 数组遍历章节了解更多信息。

Array.indexOf()

在数组中搜索元素值并返回其位置。

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

请转到在 JavaScript 数组遍历章节了解更多信息。

Array.lastIndexOf()

Array.lastIndexOf() 与 相同 Array.indexOf() ,但从数组末尾开始搜索。

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

请转到在 JavaScript 数组遍历章节了解更多信息。

JSON.parse()

JSON 的一个常见用途是作为网页和 Web 服务器之间数据交换的数据格式,我们需要将从服务器接受的 json 字符串转为 JavaScript 对象。

假设您从 Web 服务器收到此文本字符串:

'{"name":"John", "age":30, "city":"New York"}';

函数 JSON.parse() 用于将文本转换为 JavaScript 对象:

var obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

请转到在 JavaScript JSON章节了解更多信息。

JSON.stringify()

JSON 的一个常见用途是作为网页和 Web 服务器之间数据交换的数据格式,我们需要将 JavaScript 对象转为 json 字符串发送到服务器。

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

var obj = { name: "John", age: 30, city: "New York" };

使用 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;

请转到在 JavaScript JSON章节了解更多信息。

Date.now()

Date.now() 返回自零时间(UTC 时间 1970 年 1 月 1 日 00:00:00)以来的毫秒数。

var timInMSs = Date.now();

请转到在 JavaScript 日期章节了解更多信息。

访问器属性

ES5 允许您使用 get 和 set 关键字为对象增加访问器属性。

本示例创建一个读取属性 fullName

var person = {
  firstName: "John",
  lastName: "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  },
};

document.getElementById("demo").innerHTML = person.fullName;

此示例为 language 属性创建一个访问器属性 lang

var person = {
  firstName: "John",
  lastName: "Doe",
  language: "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  },
};

person.lang = "en";

document.getElementById("demo").innerHTML = person.lang;

此示例使用 setter 来保证语言的值都是大写的:

var person = {
  firstName: "John",
  lastName: "Doe",
  language: "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  },
};

person.lang = "en";

document.getElementById("demo").innerHTML = person.language;

请转到在 JavaScript 对象访问器属性章节了解更多信息。

ES5 新对象方法

ES5 为 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): 让一个对象不可扩展,也就是不能再添加新的属性
  • Object.isExtensible(object): 判断一个对象是否是可扩展的
  • Object.seal(object): 封闭一个对象,阻止添加新属性并将所有现有属性标记为不可配置
  • Object.isSealed(object): 判断一个对象是否被封闭
  • Object.freeze(object): 冻结一个对象,一个被冻结的对象再也不能被修改
  • Object.isFrozen(object): 判断一个对象是否被冻结

请转到在 JavaScript Object 方法章节了解更多信息。

字符串的属性访问

charAt() 方法返回字符串中指定索引(位置)处的字符:

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

ES5 允许对字符串进行属性访问:

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

请转到在 JavaScript 字符串方法章节了解更多信息。

尾随逗号

ES5 允许在对象和数组定义中使用尾随逗号:

对象示例:

person = {
  firstName: "John",
  lastName: " Doe",
  age: 46,
};

数组示例:

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

!! 警告:JSON 不允许尾随逗号。

多行字符串

如果用反斜杠转义,ES5 允许多行字符串文字:

"Hello \
Dolly!";

较旧的浏览器可能会以不同的方式处理反斜杠周围的空格。一些较旧的浏览器不允许 \ 后面有空格。

分解字符串文字的一种更安全的方法是使用字符串拼接:

"Hello " + 
"Dolly!";

保留字作为属性名称

ES5 允许使用关键字作为属性名称:

var obj = { name: "John", new: "yes" };

ES5 的浏览器支持

Chrome 23、IE 10 和 Safari 6 是首批完全支持 ES5 的浏览器:

Chrome IE/Edge Firefox Safari Opera
Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
2012-09 2012-09 2013-04 2012-07 2013-07