ECMAscript5-新特性

最新推荐文章于 2024-05-28 15:03:55 发布

G018_star sky♬

最新推荐文章于 2024-05-28 15:03:55 发布

阅读量262

点赞数

分类专栏：前端文章标签：前端 CSS

本文链接：https://blog.csdn.net/qq_42526440/article/details/100180748

版权

前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

ECMAscript5特性：
这些是2009年发布的新特性：
“use strict”指令
1.String.trim()
2.Array.isArray()
3.Array.forEach()
4.Array.map()
5.Array.filter();
6.Array.reduce();
7.Array.reduceRight()
8.Array.every();
9.Array.some();
10.Array.indexOf();
11.Array.lastIndexOf()
12.JSON.parse();
13.JSON.stringfy();
14.Date.now();

ECMAscript5语法更改
1.对字符串的属性访问[]
2.数组合对象字面量中的尾随逗号
3.多行字符串字面量
4.作为属性名称的保留字

"use strict"指令
"use strict"定义javascript代码应该以"严格模式"执行。
例如，使用严格模式，不能使用未声明的变量。
您可以在所有程序中使用严格模式。它可以帮助您编写更清晰的代码，例如阻止您使用未声明的变量。
“use strict” 只是一个字符串表达式。旧浏览器如果不理解它们就不会抛出错误。

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

实例
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 + “
”;
}

Array.map()
这个例子给每个数组值乘以 2：

实例
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
return value * 2;
}

Array.filter()
此例用值大于 18 的元素创建一个新数组：

实例
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
return value > 18;
}

Array.reduce()
这个例子确定数组中所有数的总和：

实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
return total + value;
}

Array.reduceRight()
这个例子同样是确定数组中所有数的总和：

实例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
return total + value;
}

Array.every()
这个例子检查是否所有值都超过 18：

实例
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
return value > 18;
}

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”:“Bill”, “age”:62, “city”:“Seatle”}’
JavaScript 函数 JSON.parse() 用于将文本转换为 JavaScript 对象：

var obj = JSON.parse(’{“name”:“Bill”, “age”:62, “city”:“Seatle”}’);

请在我们的 JSON 教程中学习更多内容。

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

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

想象一下，我们在 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;
请在我们的 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: “Bill”,
lastName : “Gates”,
get fullName() {
return this.firstName + " " + this.lastName;
}
};

// 使用 getter 显示来自对象的数据：
document.getElementById(“demo”).innerHTML = person.fullName;
亲自试一试
这个例子为语言属性创建一个 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;
这个例子使用 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;
亲自试一试
请在 JS 对象访问器中学习更多有关 Getter 和 Setter 的知识。

新的对象属性和方法
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] + “
”;
}
document.getElementById(“demo”).innerHTML = txt;
亲自试一试
下一个例子是相同的代码，但它隐藏了枚举中的语言属性：

实例
// 创建对象：
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] + “
”;
}
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;
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)