es6语法特性进阶(2)

对象功能的扩展
在JavaScript中,几乎所有的类型都是对象,所以使用好对象,对提示JavaScript的性能很重要。
ECMAScript 6 给对象的各个方面,从简单的语法扩展到操作与交互,都做了改进。

对象类别
ECMAScript 6 规范明确定义了每种对象类别。理解该术语对于从整体上认识该门语言显得十分重要。对象类别包括:
普通对象(ordinary object)拥有 JavaScript 对象所有的默认行为。
特异对象(exotic object)的某些内部行为和默认的有所差异。
标准对象(standard object)是 ECMAScript 6 中定义的对象,例如 Array, Date 等,它们既可能是普通也可能是特异对象。
内置对象(built-in object)指 JavaScript 执行环境开始运行时已存在的对象。标准对象均为内置对象。

简写的属性初始化

1
2
3
4
5
6
7
8
9
function createPerson(name, age) {
//返回一个对象:属性名和参数名相同。
return {
name:name,
age:age
}
}
console.log(createPerson("lisi", 30)); // {name:"lisi", age:30}
//在ES6中,上面的写法可以简化成如下形式

在ES6中,上面的写法可以简化成如下的形式:

1
2
3
4
5
6
7
8
function createPerson(name, age) {
//返回一个对象:属性名和参数名相同。
return {
name, //当对象属性名和本地变量名相同时,可以省略冒号和值
age
}
}
console.log(createPerson("lisi", 30)); // {name:"lisi", age:30}

当对象字面量中的属性只有属性名的时候,JavaScript 引擎会在该作用域内寻找是否有和属性同名的变量。在本例中,本地变量 name 的值被赋给了对象字面量中的 name 属性。
该项扩展使得对象字面量的初始化变得简明的同时也消除了命名错误。对象属性被同名变量赋值在 JavaScript 中是一种普遍的编程模式,所以这项扩展的添加非常受欢迎。

简写的方法声明

1
2
3
4
5
6
7
var person = {
name:'lisi',
sayHell:function () {
console.log("我的名字是:" + this.name);
}
}
person.sayHell()

在ES6中,上面的写法可以简化成如下的形式:

1
2
3
4
5
6
7
var person = {
name:'李四',
sayHell() {
console.log("我的名字是:" + this.name);
}
}
person.sayHell();

省略了冒号和function看起来更简洁;

在字面量中动态计算属性名
在ES5之前,如果属性名是个变量或者需要动态计算,则只能通过 对象.[变量名] 的方式去访问。而且这种动态计算属性名的方式 在字面量中 是无法使用的。

1
2
3
4
5
6
var p = {
name : '李四',
age : 20
}
var attName = 'name';
console.log(p[attName]) //这里 attName表示的是一个变量名。

而下面的方式使用时没有办法访问到attName这个变量的。

1
2
3
4
5
6
var attName = 'name';
var p = {
attName : '李四', // 这里的attName是属性名,相当于各级p定义了属性名叫 attName的属性。
age : 20
}
console.log(p[attName]) // undefined

在ES6中,把属性名用[ ]括起来,则括号中就可以引用提前定义的变量。

1
2
3
4
5
6
var attName = 'name';
var p = {
[attName] : '李四', // 引用了变量attName。相当于添加了一个属性名为name的属性
age : 20
}
console.log(p[attName]) // 李四

新增的方法 Object.is()

ECMAScript 从第五版开始避免在 Object.prototype 上添加新的全局函数或方法,转而去考虑具体的对象类型如数组)应该有什么方法。当某些方法不适合这些具体类型时就将它们添加到全局 Object 上 。
ECMAScript 6 在全局 Object 上添加了几个新的方法来轻松地完成一些特定任务。
在 JavaSciprt 中当你想比较两个值时,你极有可能使用比较操作符()或严格比较操作符(=)。许多开发者为了避免在比较的过程中发生强制类型转换,更倾向于后者。但即使是严格等于操作符,它也不是万能的。例如,它认为 +0 和 -0 是相等的,虽然它们在 JavaScript 引擎中表示的方式不同。同样 NaN === NaN 会返回 false,所以必须使用 isNaN() 函数才能判断 NaN 。
ECMAScript 6 引入了 Object.is() 方法来补偿严格等于操作符怪异行为的过失。该函数接受两个参数并在它们相等的返回 true 。只有两者在类型和值都相同的情况下才会判为相等。如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
console.log(+0 == -0); // true
console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true
console.log(5 == 5); // true
console.log(5 == "5"); // true
console.log(5 === 5); // true
console.log(5 === "5"); // false
console.log(Object.is(5, 5)); // true
console.log(Object.is(5, "5")); // false

很多情况下 Object.is() 的表现和 = 是相同的。它们之间的区别是前者 认为 +0 和 -0 不相等而 NaN 和 NaN 则是相同的。不过弃用后者是完全没有必要的。何时选择 Object.is() 与 == 或 = 取决于代码的实际情况。

Object.assign()
使用assign主要是为了简化对象的混入(mixin)。混入是指的在一个对象中引用另一个对象的属性或方法。
assing可以把一个对象的属性和方法完整的转copy到另外一个对象中。

1
2
3
4
5
6
7
8
9
10
11
12
var p = {
name : "lisi"
age : 20,
friends : ['张三', '李四']
}
var p1 = {};
Object.assign(p1, p); //则p1中就有了与p相同的属性和方法. p1是接受者,p是提供者
console.log(p1);
//这种copy是浅copy,也就是说如果属性值是对象的话,只是copy的对象的地址值(引用)
console.log(p1.friends == p.friends); //true p1和p的friends同事指向了同一个数组。
p.friends.push("王五");
console.log(p1.friends); //['张三', '李四', '王五']

assign方法可以接受任意多的提供者。意味着后面提供者的同名属性和覆盖前面提供者的属性值。

1
2
3
4
5
6
7
8
9
10
11
12
var p = {
name : "lisi",
age : 20,
friends : ['张三', '李四']
}
var p1 = {
name : 'zs',
}
var p2 = {};
Object.assign(p2, p, p1); //p和p1都是提供者
console.log(p2.name); // zs

访客的ip和所在地址: 访问时间: 当前时间:

殖民 wechat
欢迎您扫一扫上面的微信公众号
打赏不在多少,请鼓励一下!