JS ES5

创建于 2024-12-03 / 36
字体： [默认] [大] [更大]

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" 指令

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

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

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

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

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

String.trim()

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

实例

var str = "       Hello World!        ";
alert(str.trim()); 亲自试一试 »

Read more in JS String Methods.

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 数组迭代方法 中学习更多内容。

Advertisement

-->

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()

检索数组中的某个元素值并返回其位置:

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple"); 亲自试一试 »

请在 JS 数组迭代方法 中学习更多内容。

Array.lastIndexOf()

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾处开始检索。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple"); 亲自试一试 »

请在 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:00）以来的毫秒数。

实例

var timInMSs = Date.now(); 亲自试一试 »

Date.now() 的返回与在 Date 对象上执行 getTime() 的结果相同。

请在 JS 日期 中学习更多。

属性 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; 亲自试一试 »

这个例子为语言属性创建一个 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 来确保语言的大写更新:

实例

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 对象访问器 中学习更多有关 Getter 和 Setter 的知识。

新的对象属性和方法

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

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

实例

// 创建对象:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// 更改属性:
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;
亲自试一试 »

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

实例

// 创建对象:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// 更改属性:
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;
亲自试一试 »

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

实例

///创建对象:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO"
};

// 更改属性:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});

// 更改 Language
person.language = "en";

// 显示 Language
document.getElementById("demo").innerHTML = person.language; 亲自试一试 »

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)

请在 对象 ECMAScript5 中学习更多内容。

对字符串的属性访问

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

实例

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H 亲自试一试 »

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

实例

var str = "HELLO WORLD";
str[0];                   // 返回 H 亲自试一试 »

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

请在 JS 字符串方法 中学习更多内容。

尾随逗号(Trailing Commas)

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

Object 实例

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

Array 实例

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

警告！！！

Internet Explorer 8 将崩溃。

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,]

多行字符串

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

实例

"Hello
Dolly!"; 亲自试一试 »

方法可能没有通用支持。
旧版浏览器可能会以不同的方式处理反斜杠周围的空格。
一些较旧的浏览器不允许在 字符后面使用空格。

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

实例

"Hello " +
"Dolly!"; 亲自试一试 »

保留字作为属性名称

ECMAScript 5允许保留字作为属性名称:

Object 实例

var obj = {name: "John", new: "yes"} 亲自试一试 »

ES5（ECMAScript 5）浏览器支持

Chrome 23、IE 10 和 Safari 6 是第一批完全支持 ECMAScript 5 的浏览器:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
Sep 2012 Sep 2012 Apr 2013 Jul 2012 Jul 2013



0 人点赞过