ECMAscript5-新特性

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 和 SetterES5 允许您使用类似于获取或设置属性的语法来定义对象方法。这个例子为名为 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)// 如果可以将属性添加到对象则返回 trueObject.isExtensible(object)// 防止更改对象属性而不是值Object.seal(object)// 如果对象被密封则返回 trueObject.isSealed(object)// 防止对对象进行任何更改Object.freeze(object)// 如果对象被冻结则返回 trueObject.isFrozen(object)请在 对象 ECMAScript5 中学习更多内容。对字符串的属性访问charAt() 方法返回字符串中指定索引位置的字符实例var str “HELLO WORLD”;str.charAt(0); // 返回 HECMAScript 5 允许对字符串进行属性访问实例var str “HELLO WORLD”;str[0]; // 返回 H对字符串的属性访问可能有点不可预测。请在 JS 字符串方法 中学习更多内容。尾随逗号(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 允许多行的字符串文字字面量实例“HelloKitty!”;亲自试一试\ 方法可能没有得到普遍的支持。较旧的浏览器可能会以不同的方式处理反斜杠周围的空格。一些旧的浏览器不允许 \ 字符后面的空格。分解字符串文字的一种更安全的方法是使用字符串添加实例Hello “Kitty!”;亲自试一试保留字作为属性名称ECMAScript 5允许保留字作为属性名称对象实例var obj {name: “Bill”, new: “yes”}亲自试一试ES5ECMAScript 5浏览器支持Chrome 23、IE 10 和 Safari 6 是第一批完全支持 ECMAScript 5 的浏览器Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 152012 年 9 月 2012 年 9 月 2013 年 4 月 2012 年 7 月 2013 年 7 月