JavaScript ES5
ECMAScript 2009,也称为 ES5,是 JavaScript 的第一次重大修订。
本章描述了 ES5 的最重要特性。
ES5 功能
- “使用严格”
- 细绳[数字] 使用权
- 多行字符串
- 字符串.trim()
- 数组.isArray()
- 数组 forEach()
- 数组映射()
- 数组过滤器()
- 数组减少()
- 数组reduceRight()
- 数组 every()
- 数组 some()
- 数组索引()
- 数组 lastIndexOf()
- JSON.解析()
- JSON.stringify()
- 日期.now()
- 日期转ISOString()
- 日期转JSON()
- 属性 getter 和 setter
- 保留字作为属性名称
- 对象方法
- 对象定义属性()
- 函数 bind()
- 尾随逗号
浏览器支持
ES5
所有现代浏览器都完全支持:
铬合金 | IE | 边缘 | 火狐 | 苹果浏览器 | 歌剧 |
是的 | 9.0 | 是的 | 是的 | 是的 | 是的 |
“use strict” 指令
"use strict"
定义 JavaScript 代码应该在“严格模式”下执行。
例如,在严格模式下,你不能使用未声明的变量。
您可以在所有程序中使用严格模式。它可以帮助您编写更干净的代码,例如防止您使用未声明的变量。
"use strict"
只是一个字符串表达式。旧版浏览器如果无法理解它,就不会抛出错误。
阅读更多 JS 严格模式.
字符串的属性访问
这 charAt()
方法返回字符串中指定索引(位置)处的字符:
ES5 允许访问字符串的属性:
字符串上的属性访问可能有点不可预测。
阅读更多 JS 字符串方法.
多行字符串
如果使用反斜杠转义,ES5 允许字符串文字跨越多行:
\ 方法可能没有得到普遍支持。
旧版浏览器可能会以不同的方式处理反斜杠周围的空格。
一些较旧的浏览器不允许在 \ 字符后面有空格。
分解字符串文字的更安全的方法是使用字符串加法:
保留字作为属性名称
ES5 允许保留字作为属性名称:
字符串修剪()
这 trim()
方法删除字符串两侧的空格。
阅读更多 JS 字符串方法.
数组.isArray()
这 isArray()
方法检查对象是否是数组。
例子
函数 myFunction() {
var 水果 = ["香蕉", "橙子", "苹果", "芒果"];
var x = document.getElementById("演示");
x.innerHTML = Array.isArray(水果);
}
亲自尝试 »
阅读更多 JS 数组.
数组 forEach()
这 forEach()
方法对每个数组元素调用一次函数。
例子
var txt = "";
var 数字 = [45, 4, 9, 16, 25];
数字.forEach(我的函数);
函数 myFunction(值){
txt = txt + 值 + "<br> “;
}
亲自尝试 »
详细了解 JS 数组迭代方法.
数组映射()
此示例将每个数组值乘以 2:
例子
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
函数 myFunction(值){
返回值*2;
}
亲自尝试 »
详细了解 JS 数组迭代方法.
数组过滤器()
此示例从值大于 18 的元素创建一个新数组:
例子
var 数字 = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
函数 myFunction(值){
返回值>18;
}
亲自尝试 »
详细了解 JS 数组迭代方法.
数组减少()
此示例求数组中所有数字的总和:
例子
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
函数 myFunction(总计,值){
返回总计+价值;
}
亲自尝试 »
详细了解 JS 数组迭代方法.
数组reduceRight()
此示例还查找数组中所有数字的总和:
例子
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
函数 myFunction(总计,值){
返回总计+价值;
}
亲自尝试 »
详细了解 JS 数组迭代方法.
数组 every()
此示例检查所有值是否超过 18:
例子
var 数字 = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
函数 myFunction(值){
返回值>18;
}
亲自尝试 »
详细了解 JS 数组迭代方法.
数组 some()
此示例检查某些值是否超过 18:
例子
var 数字 = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
函数 myFunction(值){
返回值>18;
}
亲自尝试 »
详细了解 JS 数组迭代方法.
数组索引()
在数组中搜索元素值并返回其位置。
详细了解 JS 数组迭代方法.
数组 lastIndexOf()
lastIndexOf()
是相同的indexOf()
,但从数组末尾搜索。
详细了解 JS 数组迭代方法.
JSON.解析()
JSON 的一个常见用途是从 Web 服务器接收数据。
想象一下你从 Web 服务器收到了以下文本字符串:
{"name":"John","age":30,"city":"New York"}
JavaScript 函数 JSON.parse()
用于将文本转换为 JavaScript 对象:
var obj = JSON.parse('{"name":"John", "age":30, "city":"纽约"}');
亲自尝试 »
更多信息请阅读我们的 JSON 教程.
JSON.stringify()
JSON 的一个常见用途是将数据发送到 Web 服务器。
当向 Web 服务器发送数据时,数据必须是字符串。
假设我们在 JavaScript 中有这个对象:
var obj = {name:"约翰", age:30, city:"纽约"};
使用 JavaScript 函数 JSON.stringify()
将其转换为字符串。
var myJSON = JSON.stringify(obj);
结果将是遵循 JSON 符号的字符串。
myJSON 现在是一个字符串,可以发送到服务器了:
例子
var obj = {name:"约翰", age:30, city:"纽约"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
亲自尝试 »
更多信息请阅读我们的 JSON 教程.
日期.now()
Date.now()
返回自零日期(1970 年 1 月 1 日 00:00:00 UTC)以来的毫秒数。
Date.now()
返回与在Date
目的。
详细了解 JS 日期.
日期转ISOString()
这 toISOString()
方法将 Date 对象转换为字符串,使用 ISO 标准格式:
日期转JSON()
toJSON()
将 Date 对象转换为字符串,格式化为 JSON 日期。
JSON 日期具有与 ISO-8601 标准相同的格式:YYYY-MM-DDTHH:mm:ss.sssZ:
属性 Getter 和 Setter
ES5 允许您使用类似于获取或设置属性的语法来定义对象方法。
此示例创建一个 吸气剂 对于名为 fullName 的属性:
例子
// 创建一个对象:
var person = {
名字:“约翰”,
姓氏:“Doe”,
获取全名(){
返回 this.firstName + " " + this.lastName;
}
};
// 使用 getter 显示来自对象的数据:
document.getElementById("demo").innerHTML = person.fullName;
亲自尝试 »
此示例创建一个 二传手 和一个吸气剂 对于语言属性:
例子
var person = {
名字:“约翰”,
姓氏:“Doe”,
语言 :“否”,
获取语言() {
返回这个.语言;
},
设置语言(值){
这个.语言=值;
}
};
// 使用 setter 设置对象属性:
人.lang =“ en”;
// 使用 getter 显示来自对象的数据:
document.getElementById("demo").innerHTML = person.lang;
亲自尝试 »
此示例使用 setter 来确保语言的大写更新:
例子
var person = {
名字:“约翰”,
姓氏:“Doe”,
语言 :“否”,
设置语言(值){
这个.语言 = 值.toUpperCase();
}
};
// 使用 setter 设置对象属性:
人.lang =“ en”;
// 显示来自对象的数据:
document.getElementById("demo").innerHTML = person.language;
亲自尝试 »
详细了解 Gettes 和 Setters JS 对象访问器
对象.defineProperty()
Object.defineProperty()
是 ES5 中的一个新的对象方法。
它允许您定义对象属性和/或更改属性的值和/或元数据。
例子
// 创建对象:
var person = {
名字:“约翰”,
姓氏:“Doe”,
语言 :“否”,
};
// 改变属性:
对象.defineProperty(人,“语言”,{
值:“EN”,
可写 : true,
可枚举 : true,
可配置 : true
});
// 枚举属性
var txt = "";
for (var x 亲自) {
txt += person[x] + "<br> “;
}
document.getElementById("demo").innerHTML = txt;
亲自尝试 »
下一个示例是相同的代码,只是它隐藏了枚举中的语言属性:
例子
// 创建对象:
var person = {
名字:“约翰”,
姓氏:“Doe”,
语言 :“否”,
};
// 改变属性:
对象.defineProperty(人,“语言”,{
值:“EN”,
可写 : true,
可枚举:false,
可配置 : true
});
// 枚举属性
var txt = "";
for (var x 亲自) {
txt += person[x] + "<br> “;
}
document.getElementById("demo").innerHTML = txt;
亲自尝试 »
此示例创建了一个 setter 和一个 getter 来确保语言的大写更新:
例子
/// 创建一个对象:
var person = {
名字:“约翰”,
姓氏:“Doe”,
语言 :“否”
};
// 改变属性:
对象.defineProperty(人,“语言”,{
获取:函数(){返回语言},
设置:函数(值){ 语言 = 值.toUpperCase()}
});
// 改变语言
人.语言 = “en”;
// 显示语言
document.getElementById("demo").innerHTML = person.language;
亲自尝试 »
ES5 对象方法
ES5 为 JavaScript 添加了许多新的对象方法:
管理对象
// 使用现有对象作为原型创建对象
Object.create(父母,捐赠者)
// 添加或更改对象属性
Object.defineProperty(对象,属性,描述符)
// 添加或更改对象属性
Object.defineProperties(对象,描述符)
// 访问属性
Object.getOwnPropertyDescriptor(对象,属性)
// 以数组形式返回所有属性
对象.getOwnPropertyNames(对象)
// 访问原型
Object.getPrototypeOf(对象)
// 以数组形式返回可枚举属性
对象.keys(对象)
保护对象
// 防止向对象添加属性
对象.preventExtensions(对象)
// 如果可以向对象添加属性,则返回 true
对象.isExtensible(对象)
// 防止对象属性(不是值)的改变
对象.密封(对象)
// 如果对象是密封的,则返回 true
Object.isSealed(对象)
// 防止对对象进行任何更改
对象.冻结(对象)
// 如果对象被冻结则返回 true
Object.isFrozen(对象)
详细了解 ECMAScript5 对象.
函数 Bind()
随着 bind()
方法,一个对象可以借用另一个对象的方法。
此示例创建了 2 个对象(person 和 member)。
member 对象从 person 对象借用了 fullname 方法:
例子
const 人 = {
名字:“约翰”,
姓氏:“Doe”,
全名:函数(){
返回 this.firstName + " " + this.lastName;
}
}
const 成员 = {
名字:“Hege”,
姓氏:“Nilsen”,
}
让 fullName = person.fullName.bind(member);
亲自尝试 »
详细了解 函数 bind().
尾随逗号
ES5 允许在对象和数组定义中使用尾随逗号:
对象示例
人 = {
名字:“约翰”,
姓氏:“Doe”,
年龄:46岁,
}
数组示例
分数 = [
1,
5,
10,
25,
40,
100,
];
警告 !!!
JSON 不允许使用尾随逗号。
JSON 对象:
// 允许:
var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
JSON.解析(人)
// 不允许:
var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
JSON.解析(人)
JSON 数组:
// 允许:
点数 = [40, 100, 1, 5, 25, 10]
// 不允许:
点数 = [40, 100, 1, 5, 25, 10,]