设为首页 加入收藏

TOP

ES6对象扩展(一)
2017-10-10 16:24:08 】 浏览:9575
Tags:ES6 对象 扩展

前面的话

  随着JS应用复杂度的不断增加,开发者在程序中使用对象的数量也在持续增长,因此对象使用效率的提升就变得至关重要。ES6通过多种方式来加强对象的使用,通过简单的语法扩展,提供更多操作对象及与对象交互的方法。本章将详细介绍ES6对象扩展

 

对象类别

  在浏览器这样的执行环境中,对象没有统一的标准,在标准中又使用不同的术语描述对象,ES6规范清晰定义了每一个类别的对象,对象的类别如下

  1、普通(Ordinary)对象

  具有JS对象所有的默认内部行为

  2、特异(Exotic)对象

  具有某些与默认行为不符的内部行为

  3、标准(Standard)对象

  ES6规范中定义的对象,例如,Array、Date等。标准对象既可以是普通对象,也可以是特异对象

  4、内建对象

  脚本开始执行时存在于JS执行环境中的对象,所有标准对象都是内建对象

 

对象简写

【属性初始值简写】

  在ES5中,对象字面量只是简单的键值对集合,这意味着初始化属性值时会有一些重复

function createPerson(name, age) {
    return {
        name: name,
        age: age
    };
}

  这段代码中的createPerson()函数创建了一个对象,其属性名称与函数的参数相同,在返回的结果中,name和age分别重复了两遍,只是其中一个是对象属性的名称,另外一个是为属性赋值的变量

  在ES6中,通过使用属性初始化的简写语法,可以消除这种属性名称与局部变量之间的重复书写。当一个对象的属性与本地变量同名时,不必再写冒号和值,简单地只写属性名即可

function createPerson(name, age) {
    return {
        name,
        age
    };
}

  当对象字面量里只有一个属性的名称时,JS引擎会在可访问作用域中查找其同名变量;如果找到,则该变量的值被赋给对象字面量里的同名属性。在本示例中,对象字面量属性name被赋予了局部变量name的值

  在JS中,为对象字面量的属性赋同名局部变量的值是一种常见的做法,这种简写方法有助于消除命名错误

【对象方法简写】

  在ES5中,如果为对象添加方法,必须通过指定名称并完整定义函数来实现

var person = {
    name: "Nicholas",
    sayName: function() {
        console.log(this.name);
    }
};

  而在ES6中,语法更简洁,消除了冒号和function关键字

var person = {
    name: "Nicholas",
    sayName() {
        console.log(this.name);
    }
};

  在这个示例中,通过对象方法简写语法,在person对象中创建一个sayName()方法,该属性被赋值为一个匿名函数表达式,它拥有在ES5中定义的对象方法所具有的全部特性

  二者唯一的区别是,简写方法可以使用super关键字,而普通方法不可以

  [注意]通过对象方法简写语法创建的方法有一个name属性,其值为小括号前的名称

 

可计算属性名

  在ES5版本中,如果想要通过计算得到属性名,就需要用方括号代替点记法

var person = {},
lastName = "last name";
person["first name"] = "huochai";
person[lastName] = "match";
console.log(person["first name"]); // "huochai"
console.log(person[lastName]); // "match"

  变量lastName被赋值为字符串"last name",引用的两个属性名称中都含有空格,因而不可使用点记法引用这些属性,却可以使用方括号,因为它支持通过任何字符串值作为名称访问属性的值。此外,在对象字面量中,可以直接使用字符串字面量作为属性名称

var person = {
    "first name": "huochai"
};
console.log(person["first name"]); // "huochai"

  这种模式适用于属性名提前已知或可被字符串字面量表示的情况。然而,如果属性名称"first name"被包含在一个变量中,或者需要通过计算才能得到该变量的值,那么在ES5中是无法为一个对象字面量定义该属性的

  在ES6中,可在对象字面量中使用可计算属性名称,其语法与引用对象实例的可计算属性名称相同,也是使用方括号

var lastName = "last name";
var person = {
    "first name": "huochai",
    [lastName]: "match"
};
console.log(person["first name"]); // "huochai"
console.log(person[lastName]); // "match"

  在对象字面量中使用方括号表示的该属性名称是可计算的,它的内容将被名称求值并被最终转化为一个字符串,因而同样可以使用表达式作为属性的可计算名称

var suffix = " name";
var person = {
    ["first" + suffix]: "huochai",
    ["last" + suffix]: "match"
};
console.log(person["first name"]); // "huochai"
console.log(person["last name"]); // "match"

  这些属性被求值后为字符串"first name"和"last name",然后它们可用于属性引用。任何可用于对象实例括号记法的属性名,也可以作为字面量中的计算属性名

 

判断相等

【Object.is()】

  在JS中比较两个值时,可能习惯于使用相等运算符(==)或全等运算符(===),使用后者可以避免触发强制类型转换的行为。但是,即使使用全等运算符也不完全准确

console.log(+0 === -0);//true
console.log(NaN === NaN);//false

  ES6引入了Object.is()方法来弥补全等运算符的不准确运算。这个方法接受两个参数,如果这两个参数类型相等且具有相同的值,则返回true,否则返回false

console.log(+0 == -0); // true
co
首页 上一页 1 2 3 4 5 下一页 尾页 1/5/5
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇$(document).ready 和 window.onl.. 下一篇ExtJS布局控件

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目