ECMAScript 5 - JavaScript 5

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()
属性 Getter 和 Setter
新的对象属性和方法

ECMAScript 5 语法更改

对字符串的属性访问 [ ]
数组和对象字面量中的尾随逗号
多行字符串字面量
作为属性名称的保留字

严格模式

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

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

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

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

请阅读 JS 严格模式中的更多内容。

String.trim()

String.trim() 删除字符串两端的空白字符。

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String.trim()</h1>
<p>点击这个按钮来输出已删除空白字符的字符串。</p>
<button onclick="myFunction()">试一试</button>
<p><strong>注释：</strong>Internet Explorer 8 或更低版本不支持 trim() 方法。</p>
<script>
function myFunction() {
  var str = "     Hello World!     ";
  alert(str.trim());
}
</script>
</body>
</html>

运行一下

请在 JS 字符串方法中阅读更多内容。

数组的 isArray() 方法

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组的 isArray() 方法</h1>
<p>单击按钮以检查“fruits”是否为数组。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo">
<script>
function myFunction() {
  var fruits = ["香蕉", "橘子", "苹果", "芒果"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}
</script>
</body>
</html>

运行一下

请在 JS 数组中阅读更多内容。

数组的 forEach() 方法

forEach() 方法为每个数组元素调用一次函数。

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组的 forEach() 方法</h1>
<p>为每个数组元素调用一次函数。</p>
<p id="demo">
<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：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组的 map() 方法</h1>
<p>通过对每个数组元素执行函数来创建新数组。</p>
<p id="demo">
<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>

运行一下

数组的 filter() 方法

此例用值大于 18 的元素创建一个新数组：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组的 filter() 方法</h1>
<p>使用通过测试的所有数组元素创建一个新数组。</p>
<p id="demo">
<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>

运行一下

数组的 reduce() 方法

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组的 reduce() 方法</h1>
<p>此例确定数组中所有数字的总和：</p>
<p id="demo">
<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>

运行一下

JSON.parse()

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

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

'{"name":"埃隆马斯克", "age":50, "city":"新泽西"}'

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

<!DOCTYPE html>
<html>
<body>
<h1>用 JSON 字符串创建对象</h1>
<p id="demo">
<script>
var txt = '{"name":"埃隆马斯克", "age":50, "city":"新泽西"}'
var obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
</body>
</html>

运行一下

JSON.stringify()

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

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

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

var obj = {"name":"埃隆马斯克", "age":50, "city":"新泽西"}

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

var myJSON = JSON.stringify(obj);

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

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

Date.now()

Date.now() 返回自零日期（1970 年 1 月 1 日 00:00:00:00）以来的毫秒数。

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Date.now()</h1>
<p>Date.now() 是ECMAScript 5（2009）中的新功能：</p>
<p id="demo1">
<p id="demo2">
<script>
document.getElementById("demo1").innerHTML = Date.now();
var d = new Date();
document.getElementById("demo2").innerHTML = d.getTime();
</script>
</body>
</html>

运行一下

属性 Getter 和 Setter

ES5 允许您使用类似于获取或设置属性的语法来定义对象方法。

这个例子为名为 fullName 的属性创建一个 getter：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Getter 和 Setter</h1>
<p>Getter 和 Setter 允许您通过方法获取和设置属性。</p>
<p>此例为名为 fullName 的属性创建一个 getter。</p>
<p id="demo">
<script>
// 创建对象：
var person = {
  firstName: "埃隆",
  lastName : "马斯克",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// 使用 getter 来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>

运行一下

这个例子为语言属性创建一个 setter 和一个 getter：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Getter 和 Setter</h1>
<p>Getter 和 Setter 允许您通过方法获取和设置属性。</p>
<p>此例为 language 属性创建 setter 和 getter。</p>
<p id="demo">
<script>
// 创建对象：
var person = {
  firstName: "埃隆",
  lastName : "马斯克",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};
// 使用 setter 设置对象属性：
person.lang = "en";
// 使用 getter 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;
</script>
</body>
</html>

运行一下

这个例子使用 setter 来确保语言的大写更新：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Getter 和 Setter</h1>
<p>Getter 和 Setter 允许您通过方法获取和设置属性。</p>
<p>此例具有修改的 setter 以保护语言的大写更新。</p>
<p id="demo">
<script>
// Create an object:
var person = {
  firstName: "埃隆",
  lastName : "马斯克",
  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>

运行一下

新的对象属性和方法

Object.defineProperty() 是 ES5 中的新对象方法。

它允许您定义对象属性和/或更改属性的值和/或元数据。

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
</head>
<body>
<h1>JavaScript defineProperty()</h1>
<p id="demo">
<script>
// 创建对象：
var person = {
  firstName: "埃隆",
  lastName : "马斯克",
  language : "NO",
};
// 更改属性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// 枚举属性
txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

运行一下

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript defineProperty()</h1>
<p id="demo">
<script>
// 创建对象：
var person = {
  firstName: "埃隆",
  lastName : "马斯克",
  language : "NO",
};
// 更改属性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// 枚举属性：
txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

运行一下

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

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript defineProperty()</h1>
<p id="demo">
<script>
// 创建对象：
var person = {
  firstName: "埃隆",
  lastName : "马斯克",
  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;
</script>
</body>
</html>

运行一下

ECMAScript 5 为 JavaScript 添加了许多新的对象方法：

ES5 新的对象方法
// 添加或更改对象属性
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)

对字符串的属性访问

charAt() 方法返回字符串中指定索引（位置）的字符：

实例

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串方法</h1>
<p>charAt() 方法返回字符串中给定位置的字符：</p>
<p id="demo">
<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0);
</script>
</body>
</html>

运行一下

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

实例

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串方法</h1>
<p>ECMAScript 5 字符串的属性访问：</p>
<p id="demo">
<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str[0];
</script>
</body>
</html>

运行一下

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

尾随逗号(Trailing Commas)

ECMAScript 5 允许在对象和数组定义中使用尾随逗号：

person = {
  firstName: "埃隆",
  lastName: " 马斯克",
  age: 50,
}

Array 实例

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

JSON 不允许在末尾使用逗号。Internet Explorer 8 将崩溃。

JSON 对象：

// 允许：
var person = '{"firstName":"埃隆", "lastName":"马斯克", "age":50}'
JSON.parse(person)
// 不允许：
var person = '{"firstName":"埃隆", "lastName":"马斯克", "age":50,}'
JSON.parse(person)

JSON 数组：

// 允许：
points = [40, 100, 1, 5, 25, 10]
// 不允许：
points = [40, 100, 1, 5, 25, 10,]

多行字符串

如果使用反斜杠转义，ECMAScript 5 允许多行的字符串文字（字面量）：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串</h1>
<p>您可以使用反斜杠在文本字符串中断开代码行。</p>
<p id="demo">
<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>
</body>
</html>

运行一下

\ 方法可能没有得到普遍的支持。

较旧的浏览器可能会以不同的方式处理反斜杠周围的空格。

一些旧的浏览器不允许 \ 字符后面的空格。

分解字符串文字的一种更安全的方法是使用字符串添加：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串</h1>
<p>打破字符串中代码行的最安全方法是使用字符串添加。</p>
<p id="demo">
<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>
</body>
</html>

运行一下

保留词作为属性名称

ECMAScript 5允许保留词作为属性名称：

对象实例

<!DOCTYPE html>
<html>
<body>
<h1>ECMAScript 5</h1>
<p>ECMAScript 5 允许保留字作为属性名称：</p>
<p id="demo">
<script>
var obj = {name: "比尔", new: "yes"};
document.getElementById("demo").innerHTML = obj.new;
</script>
</body>
</html>

运行一下

ECMAScript 5 - JavaScript 5

ECMAScript 5 是什么？

ECMAScript 5 特性

ECMAScript 5 语法更改

严格模式

String.trim()

数组的 isArray() 方法

数组的 forEach() 方法

数组的 map() 方法

数组的 filter() 方法

数组的 reduce() 方法

JSON.parse()

JSON.stringify()

Date.now()

属性 Getter 和 Setter

新的对象属性和方法

对字符串的属性访问

实例

实例

尾随逗号(Trailing Commas)

Array 实例

JSON 对象：

JSON 数组：

多行字符串

保留词作为属性名称

对象实例

分类导航