文章目录
- ECMAScript 5 - JavaScript5
- JS新特性
- "use strict"指令
- String.trim()
- Array.isArray()
- Array.forEach()
- Array.map()
- Arrary.filter()
- Arrary.reduce()
- Arrary.reduceRight()
- Array.every()
- Array.some()
- Array.indexOf()
- Array.lastIndexOf()
- JSON.parse()
- JSON.stringify()
- Date.now()
- 属性 Getter 和 Setter
- 新的对象属性和方法
- 对字符串的属性访问
- 尾随逗号(Trailing Commas)
- 多行字符串
- 保留字作为属性名称
- ES5(ECMAScript 5)浏览器支持
ECMAScript 5 - JavaScript5
ECMAScript 5 是什么?
ECMAScript 5 也称为 ES5 和 ECMAScript 2009。
ECMAScript 5 特性
2009 年发布的新特性:
- “use strict”指令
- String.trim()
- Arrary.isArrary()
- Arrary.forEach()
- Arrary.map()
- Arrary.filter()
- Arrary.reduce()
- Arrary.reduceRight()
- Arrary.every()
- Arrary.some()
- Arrary.indexOf()
- Arrary.lastInsexOf()
- JSON.parse()
- JSON.stringify()
- Date.now()
- 属性Getter和Setter
- 新的对象属性和方法
ECMAScript 5语法更改
- 对字符串的属性访问 [ ]
- 数组和对象字面量中的尾随逗号
- 多行字符串字面量
- 作为属性名称的保留字
JS新特性
"use strict"指令
“use strict” 定义 JavaScript 代码应该以“严格模式”执行。
**eg: **
- 使用严格模式,不能使用未声明的变量。
您可以在所有程序中使用严格模式。它可以帮助您编写更清晰的代码,例如阻止您使用未声明的变量
String.trim()
String.trim() 删除字符串两端的空白字符。
eg:
var str = " Hello World! ";
alert(str.trim());
Array.isArray()
isArray() 方法检查对象是否为数组。
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
Array.forEach()
forEach() 方法为每个数组元素调用一次函数。
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
Array.map()
eg:
给每个数组值乘以 2:
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Arrary.filter()
eg:
值大于 18 的元素创建一个新数组:
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
Arrary.reduce()
eg:
确定数组中所有数的总和:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
Arrary.reduceRight()
eg:
确定数组中所有数的总和:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
Array.every()
eg:
检查是否所有值都超过 18:
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
return value > 18;
}
Array.some()
eg:
检查某些值是否超过 18:
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
function myFunction(value) {
return value > 18;
}
Array.indexOf()
**eg: **
检索数组中的某个元素值并返回其位置:
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
//a为0
Array.lastIndexOf()
Array.lastIndexOf() 与 Array.indexOf()
类似,但是从数组结尾处开始检索。
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
//a为2
JSON.parse()
JSON 的一个常见用途是从 Web 服务器接收数据。
需求:
您从Web服务器收到这条文本字符串:
‘{“name”:“Bill”, “age”:62, “city”:“Seatle”}’
要求:
JavaScript 函数 JSON.parse() 用于将文本转换为 JavaScript 对象:
var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');
JSON.stringify()
JSON 的一个常见用途是将数据发送到Web服务器。
需求:
将数据发送到 Web 服务器时,数据必须是字符串。
eg:
我们在 JavaScript 中有这个对象:
var obj = {"name":"Bill", "age":62, "city":"Seatle"};
请使用 JavaScript 函数 JSON.stringify() 将其转换为字符串。
var myJSON = JSON.stringify(obj);
结果将是遵循 JSON 表示法的字符串。
myJSON 现在是一个字符串,准备好发送到服务器:
var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
Date.now()
Date.now() 返回自零日期(1970 年 1 月 1 日 00:00:00:00)以来的毫秒数。
var timInMSs = Date.now();
Date.now() 的返回与在 Date 对象上执行 getTime() 的结果相同。
属性 Getter 和 Setter
ES5 允许您使用类似于获取或设置属性的语法 来定义对象方法。
eg:
为名为 fullName 的属性创建一个 getter:
// 创建对象:
var person = {
firstName: "Bill",
lastName : "Gates",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
// 使用 getter 显示来自对象的数据:
document.getElementById("demo").innerHTML = person.fullName;
eg:
为语言属性创建一个 setter 和一个 getter:
var person = {
firstName: "Bill",
lastName : "Gates",
language : "NO",
get lang() {
return this.language;
},
set lang(value) {
this.language = value;
}
};
// 使用 setter 设置对象属性:
person.lang = "en";
// 使用 getter 显示来自对象的数据:
document.getElementById("demo").innerHTML = person.lang;
eg:
使用 setter 来确保语言的大写更新:
var person = {
firstName: "Bill",
lastName : "Gates",
language : "NO",
set lang(value) {
this.language = value.toUpperCase();
}
};
// 使用 setter 设置对象属性:
person.lang = "en";
// 显示来自对象的数据:
document.getElementById("demo").innerHTML = person.language;
新的对象属性和方法
Object.defineProperty()
Object.defineProperty()
是 ES5 中的新对象方法。
用途:
定义对象属性和/或更改属性的值和/或元数据。
实例
// 创建对象:
var person = {
firstName: "Bill",
lastName : "Gates",
language : "NO",
};
// 更改属性:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
// 枚举属性
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
eg:
和上一个例子是相同的代码,但它隐藏了枚举中的语言属性:
// 创建对象:
var person = {
firstName: "Bill",
lastName : "Gates",
language : "NO",
};
// 更改属性:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : false,
configurable : true
});
// 枚举属性
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
此例
创建一个 setter 和 getter 来确保语言的大写更新:
// 创建对象:
var person = {
firstName: "Bill",
lastName : "Gates",
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;
ES5 新的对象方法
ECMAScript 5 为 JavaScript 添加了许多新的对象方法:
// 添加或更改对象属性
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()
charAt()
方法返回字符串中指定索引(位置)的字符:
var str = "HELLO WORLD";
str.charAt(0); // 返回 H
ECMAScript 5 允许对字符串进行属性访问:
var str = "HELLO WORLD";
str[0]; // 返回 H
对字符串的属性访问可能有点不可预测。
尾随逗号(Trailing Commas)
ECMAScript 5 允许在对象和数组定义中使用尾随逗号:
Object 实例
person = {
firstName: "Bill",
lastName: " Gates",
age: 62,
}
Array 实例
points = [
1,
5,
10,
25,
40,
100,
];
警告!!!
-
Internet Explorer 8 将崩溃。
-
JSON 不允许使用尾随逗号。
JSON 对象:
// 允许:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)
// 不允许:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)
JSON 数组:
// 允许:
points = [40, 100, 1, 5, 25, 10]
// 不允许:
points = [40, 100, 1, 5, 25, 10,]
多行字符串
如果使用反斜杠转义,ECMAScript 5 允许多行的字符串文字(字面量):
实例
"Hello \
Kitty!";
-
\ 方法可能没有得到普遍的支持。
-
较旧的浏览器可能会以不同的方式处理反斜杠周围的空格。
-
一些旧的浏览器不允许 \ 字符后面的空格。
-
分解字符串文字的一种更安全 的方法是使用字符串添加:
实例
"Hello " +
"Kitty!";
保留字作为属性名称
ECMAScript 5允许保留字作为属性名称:
对象实例
var obj = {name: "Bill", new: "yes"}
ES5(ECMAScript 5)浏览器支持
Chrome 23、IE 10 和 Safari 6 是第一批完全支持 ECMAScript 5 的浏览器: