ECMAScript 2009,也称为 ES5,是 JavaScript 的第一个重大修订版。
本章介绍 ES5 最重要的特性。
“严格使用”
字符串[数字]访问
多行字符串
字符串.trim()
Array.isArray()
数组 forEach()
数组映射()
数组过滤器()
数组减少()
数组reduceRight()
数组每个()
数组一些()
数组索引()
数组的最后索引()
JSON.parse()
JSON.stringify()
日期.now()
日期到ISOString()
日期 toJSON()
属性获取者和设置者
作为属性名称的保留字
对象方法
对象定义属性()
函数绑定()
尾随逗号
所有现代浏览器均完全支持 ES5
:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9.0 | Yes | Yes | Yes | Yes |
"use strict"
定义 JavaScript 代码应在“严格模式”下执行。
例如,使用严格模式,您可以不使用未声明的变量。
您可以在所有程序中使用严格模式。它可以帮助您编写更清晰的代码, 就像阻止您使用未声明的变量一样。
"use strict"
只是一个字符串表达式。旧的浏览器如果不理解的话不会抛出错误。
阅读 JS 严格模式了解更多内容。
charAt()
方法返回指定位置处的字符 字符串中的索引(位置):
var str = "HELLO WORLD";
str.charAt(0); // returns H
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The charAt() method returns the character at a given position in a string:</p>
<p id="demo"></p>
<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0);
</script>
</body>
</html>
ES5 允许对字符串进行属性访问:
var str = "HELLO WORLD";
str[0]; // returns H
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>ECMAScript 5 allows property acces on strings:</p>
<p id="demo"></p>
<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str[0];
</script>
</body>
</html>
字符串上的属性访问可能有点难以预测。
阅读 JS 字符串方法了解更多内容。
"Hello \
Dolly!";
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p>
You can break a code line within a text string with a backslash.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>
</body>
</html>
\ 方法可能没有普遍支持。
较旧的浏览器可能会处理 反斜杠周围的空格不同。
一些较旧的浏览器会这样做 \ 字符后面不允许有空格。
分解字符串文字的更安全方法是使用 string 添加:
"Hello " +
"Dolly!";
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p>The safest way to break a code line in a string is using string addition.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>
</body>
</html>
ES5 允许保留字作为属性名称:
var obj = {name: "John", new: "yes"}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>ECMAScript 5</h1>
<p>ECMAScript 5 allows reserved words as property names.</p>
<p id="demo"></p>
<script>
var obj = {name: "John", new: "yes"};
document.getElementById("demo").innerHTML = obj.new;
</script>
</body>
</html>
trim()
trim()
方法删除字符串两侧的空格。
var str = " Hello World! ";
alert(str.trim());
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The trim() Method</h2>
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trim();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</body>
</html>
阅读 JS 字符串方法了解更多内容。
Array.isArray()
isArray()
方法检查对象是否为数组。
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The isArray() Method</h2>
<p>Click the button to check if "fruits" is an array.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
</script>
</body>
</html>
阅读 JS 数组了解更多内容。
forEach()
forEach()
方法为每个数组元素调用一次函数。
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.forEach()</h2>
<p>Calls a function once for each array element.</p>
<p id="demo"></p>
<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value) {
txt = txt + value + "<br>";
}
</script>
</body>
</html>
在 JS 数组迭代方法中了解更多信息。
map()
此示例将每个数组值乘以 2:
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.map()</h2>
<p>Creates a new array by performing a function on each array element.</p>
<p id="demo"></p>
<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value, index, array) {
return value * 2;
}
</script>
</body>
</html>
在 JS 数组迭代方法中了解更多信息。
filter()
此示例根据值大于 18 的元素创建一个新数组:
var numbers = [45, 4, 9, 16, 25];
var over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.filter()</h2>
<p>Creates a new array with all array elements that passes a test.</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
在 JS 数组迭代方法中了解更多信息。
reduce()
此示例查找数组中所有数字的总和:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.reduce()</h2>
<p>This example finds the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value, index, array) {
return total + value;
}
</script>
</body>
</html>
在 JS 数组迭代方法中了解更多信息。
reduceRight()
此示例还查找数组中所有数字的总和:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.reduceRight()</h2>
<p>This example finds the sum of all numbers in an array:</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);
document.getElementById("demo").innerHTML = "The sum is " + sum;
function myFunction(total, value) {
return total + value;
}
</script>
</body>
</html>
在 JS 数组迭代方法中了解更多信息。
every()
此示例检查所有值是否超过 18:
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.every()</h2>
<p>The every() method checks if all array values pass a test.</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "All over 18 is " + allOver18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
</body>
</html>
在 JS 数组迭代方法中了解更多信息。
some()
此示例检查某些值是否超过 18:
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.some(myFunction);
function myFunction(value) {
return
value > 18;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array.some()</h2>
<p>The some() method checks if some array values pass a test.</p>
<p id="demo"></p>
<script>
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "Some over 18 is " + allOver18;
function myFunction(value) {
return value > 18;
}
</script>
</body>
</html>
在 JS 数组迭代方法中了解更多信息。
在数组中搜索元素值并返回其位置。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The indexOf() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>
</body>
</html>
在 JS 数组迭代方法中了解更多信息。
lastIndexOf()
lastIndexOf()
与 indexOf()
相同,但从数组末尾开始搜索。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The lastIndexOf() Method</h2>
<p id="demo"></p>
<script>
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
document.getElementById("demo").innerHTML = "Apple is found in position " + position;
</script>
</body>
</html>
在 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"}');
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>Creating an Object from a JSON String</h2>
<p id="demo"></p>
<script>
const txt = '{"name":"John", "age":30, "city":"New York"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
</body>
</html>
请阅读我们的 JSON 教程了解更多信息。
JSON.stringify()
JSON 的常见用途是将数据发送到 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;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>Create a JSON string from a JavaScript object.</h2>
<p id="demo"></p>
<script>
const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>
请阅读我们的 JSON 教程了解更多信息。
Date.now()
Date.now()
返回自零日期(1 月 1 日)以来的毫秒数。 1970 年 00:00:00 世界标准时间)。
var timInMSs = Date.now();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Date.now()</h2>
<p>Date.now() is new in ECMAScript 5 (2009):</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
document.getElementById("demo1").innerHTML = Date.now();
var d = new Date();
document.getElementById("demo2").innerHTML = d.getTime();
</script>
</body>
</html>
Date.now()
返回的结果与对 Date
对象执行的 getTime() 相同。
在 JS 日期中了解更多信息。
toISOString()
toISOString()
方法使用 ISO 标准格式将 Date 对象转换为字符串:
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The toISOString() Method</h2>
<p>Convert a date to a string using the ISO standard:</p>
<p id="demo"></p>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
</script>
</body>
</html>
toJSON()
toJSON()
将 Date 对象转换为字符串,格式为 JSON 日期。
JSON 日期的格式与 ISO-8601 标准相同:YYYY-MM-DDTHH:mm:ss.sssZ:
d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Date.toJSON()</h2>
<p id="demo"></p>
<script>
d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();
</script>
</body>
</html>
ES5 允许您使用类似于获取或设置的语法来定义对象方法 一个财产。
此示例为名为 fullName 的属性创建一个 getter:
// Create an object:
var person = {
firstName:
"John",
lastName : "Doe",
get
fullName() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.fullName;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Getters and setters allow you to get and set properties via methods.</p>
<p>This example creates a getter for a property called fullName.</p>
<p id="demo"></p>
<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>
此示例为语言属性创建一个 setter 和一个 getter:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
get lang() {
return this.language;
},
set lang(value) {
this.language = value;
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.lang;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Getters and setters allow you to get and set properties via methods.</p>
<p>This example creates a setter and a getter for the language property.</p>
<p id="demo"></p>
<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
get lang() {
return this.language;
},
set lang(value) {
this.language = value;
}
};
// Set an object property using a setter:
person.lang = "en";
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
</script>
</body>
</html>
此示例使用 setter 来保护语言的大写更新:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
set lang(value) {
this.language = value.toUpperCase();
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the
object:
document.getElementById("demo").innerHTML =
person.language;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Getters and setters allow you to get and set properties via methods.</p>
<p>This example has a modified setter to secure upper case uppdates of language.</p>
<p id="demo"></p>
<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
language : "",
set lang(value) {
this.language = value.toUpperCase();
}
};
// Set an object property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
</script>
</body>
</html>
了解有关 JS 对象访问器中的 Gettes 和 Setters 的更多信息
Object.defineProperty()
Object.defineProperty()
是 ES5 中新的 Object 方法。
它允许您定义对象属性和/或更改属性的值和/或 元数据。
// Create an Object:
var person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
//
Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
</head>
<body>
<h2>JavaScript defineProperty()</h2>
<p id="demo"></p>
<script>
// Create an Object:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
// Enumerate Properties
txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
下一个示例是相同的代码,只不过它隐藏了枚举的语言属性:
// Create an Object:
var person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : false,
configurable : true
});
//
Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript defineProperty()</h2>
<p id="demo"></p>
<script>
// Create an Object:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : false,
configurable : true
});
// Enumerate Properties
txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
此示例创建一个 setter 和一个 getter 来确保语言的大写更新:
// Create an Object:
var person = {
firstName: "John",
lastName :
"Doe",
language : "NO"
};
// Change a Property:
Object.defineProperty(person, "language", {
get : function() { return
language },
set : function(value) { language = value.toUpperCase()}
});
// Change Language
person.language = "en";
// Display Language
document.getElementById("demo").innerHTML = person.language;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript defineProperty()</h2>
<p id="demo"></p>
<script>
// Create an Object:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO"
};
// Change a Property:
Object.defineProperty(person, "language", {
get : function() { return language },
set : function(value) { language = value.toUpperCase()}
});
// Change language
person.language = "en";
// Display language
document.getElementById("demo").innerHTML = person.language;
</script>
</body>
</html>
ES5 为 JavaScript 添加了很多新的对象方法:
// Create object with an existing object as prototype
Object.create(parent, donor)
// Adding or changing an object property
Object.defineProperty(object, property, descriptor)
// Adding or changing object properties
Object.defineProperties(object, descriptors)
// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)
// Returns all properties as an array
Object.getOwnPropertyNames(object)
// Accessing the prototype
Object.getPrototypeOf(object)
// Returns enumerable properties as an array
Object.keys(object)
// Prevents adding properties to an object
Object.preventExtensions(object)
// Returns true if properties can be added to an object
Object.isExtensible(object)
// Prevents changes of object properties (not values)
Object.seal(object)
// Returns true if object is sealed
Object.isSealed(object)
// Prevents any changes to an object
Object.freeze(object)
// Returns true if object is frozen
Object.isFrozen(object)
在对象 ECMAScript5 中了解更多信息。
Bind()
通过 bind()
方法,一个对象可以借用另一个对象的方法。
此示例创建 2 个对象(人员和成员)。
成员对象借用了 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);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p>
<p id="demo"></p>
<script>
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);
document.getElementById("demo").innerHTML = fullName();
</script>
</body>
</html>
在函数bind() 中了解更多信息。
ES5 允许在对象和数组定义中使用尾随逗号:
person = {
firstName: "John",
lastName: "
Doe",
age: 46,
}
points = [
1,
5,
10,
25,
40,
100,
];
警告 !!!
JSON 不允许尾随逗号。
//
Allowed:
var person = '{"firstName":"John", "lastName":"Doe",
"age":46}'
JSON.parse(person)
// Not allowed:
var person = '{"firstName":"John",
"lastName":"Doe", "age":46,}'
JSON.parse(person)
//
Allowed:
points = [40, 100, 1, 5, 25, 10]
// Not allowed:
points =
[40, 100, 1, 5, 25, 10,]