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()
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() 方法返回字符串中指定索引（位置）处的字符

示例

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

自己动手试一试 »

ES5 允许在字符串上进行属性访问

示例

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

自己动手试一试 »

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

在 JS 字符串方法中了解更多。

多行字符串

ES5 允许使用反斜杠转义的多行字符串字面量

示例

"Hello \
Dolly!";

自己动手试一试 »

反斜杠方法可能没有普遍支持。
旧版浏览器可能会对反斜杠周围的空格进行不同的处理。
一些旧版浏览器不允许在 \ 字符后面有空格。

更安全地拆分字符串字面量的方法是使用字符串加法

示例

"Hello " +
"Dolly!";

自己动手试一试 »

保留字作为属性名

ES5 允许保留字作为属性名

对象示例

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

自己动手试一试 »

String trim()

trim() 方法去除字符串两端的空白。

示例

var str = " Hello World! ";
alert(str.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()

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

示例

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

自己动手试一试 »

在 JS 数组迭代方法中了解更多。

Array lastIndexOf()

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

示例

var fruits = ["Apple", "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 UTC）以来的毫秒数。

示例

var timInMSs = Date.now();

自己动手试一试 »

Date.now() 返回的值与对 Date 对象执行 getTime() 相同。

在 JS 日期中了解更多。

Date toISOString()

toISOString() 方法使用 ISO 标准格式将 Date 对象转换为字符串

示例

const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();

自己动手试一试 »

Date toJSON()

toJSON() 将 Date 对象转换为字符串，格式为 JSON 日期。

JSON 日期格式与 ISO-8601 标准相同：YYYY-MM-DDTHH:mm:ss.sssZ

示例

d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();

自己动手试一试 »

属性 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

示例

自己动手试一试 »

此示例使用 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()

Object.defineProperty() 是 ES5 中的一个新 Object 方法。

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

示例

// 创建一个对象
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，以确保语言属性更新为大写

示例

// 创建一个对象
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)

在对象保护中了解更多。

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

❮ 上一个下一个 ❯

★ +1

W3schools 学习路径

跟踪您的进度 - 免费！

JS 教程

JS 版本

JS 对象

JS 函数

JS 类

JS 异步

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics

JS 示例

JS 参考

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

示例

Date toISOString()

示例

Date toJSON()

示例

属性 Getter 和 Setter

示例

示例

示例

Object.defineProperty()

示例

示例

示例

Object.create()

示例

Object.keys()

示例

对象管理

管理对象

对象保护

保护对象

Function Bind()

示例

尾随逗号

对象示例

数组示例

JSON 对象