ECMAScript 5 特性

ecmascript 5 也称为 es5 和 ecmascript 2009。

ecmascript 5 特性

这些是 2009 年发布的新特性：

• "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()
• 属性 getter 和 setter
• 新的对象属性和方法

ecmascript 5 语法更改

• 对字符串的属性访问 [ ]
• 数组和对象字面量中的尾随逗号
• 多行字符串字面量
• 作为属性名称的保留字

"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 + "<br>"; 
}

 

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;
}

 

array.indexof()

检索数组中的某个元素值并返回其位置：

实例

var fruits = ["banana", "orange", "apple", "mango"];
var a = fruits.indexof("apple");

 

array.lastindexof()

array.lastindexof() 与 array.indexof() 类似，但是从数组结尾处开始检索。

实例

var fruits = ["banana", "orange", "apple", "mango"];
var a = fruits.lastindexof("apple");

 

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 服务器时，数据必须是字符串。

想象一下，我们在 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 允许您使用类似于获取或设置属性的语法来定义对象方法。

这个例子为名为 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;

 

新的对象属性和方法

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;

 

下一个例子是相同的代码，但它隐藏了枚举中的语言属性：

实例

// 创建对象：
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;

 

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)

// 如果对象被密封，则返回 true
object.issealed(object)

// 防止对对象进行任何更改
object.freeze(object)

// 如果对象被冻结，则返回 true
object.isfrozen(object)

 

对字符串的属性访问

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"}