JavaScript ES5
ECMAScript 2009，也称为 ES5，是 JavaScript 的第一个重大修订版。
本章介绍 ES5 的最重要的特性。
ES5 特性
- "use strict"
- String[number] 访问
- 多行字符串
- 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() 相同，但从数组末尾开始搜索。
了解更多信息，请访问 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 来确保 language 的大写更新
示例
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 对象访问器 中了解有关 Gettes 和 Setters 的更多信息
Object.defineProperty()
Object.defineProperty() 是 ES5 中的一个新对象方法。
它允许您定义对象属性和/或更改属性的值和/或元数据。
示例
// 创建一个对象
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 来确保 language 的大写更新
示例
// 创建一个对象
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)
了解更多信息，请访问 对象保护。
函数 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,]
