ES6学习笔记:对象

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在JavaScript中,几乎每一个值都是某种特定类型的对象,于是ES6也着重提升了对象的功能性。上周花了一周的时间了解了JavaScript中的对象相关的知识,对于ES6中有关于对象的扩展功能并不太了解。今天开始就来简单的了解和学习有关于ES6中对象的扩展功能。

ES6通过多种方式来加强对象的使用,通过简单的语法扩展,提供了更多操作对象及对象交互的方法。接下来的内容就是有关于这些知识的整理。

对象类别

在浏览器这样的执行环境中,对象没有统一的标准,在标准中又使用不同的术语描述对象,ES6规范清晰定义了每一个类别的对象。总而言之,理解这些术语对象这门语言来说非常重要。在ES6中的对象类别主要分为:

  • 普通对象(Ordinary):具有JavaScript对象所有的默认内部行为
  • 特殊对象(Exotic):具有某些与默认行为不符的内部行为
  • 标准对象(Standard):ES6规范中定义的对象,例如ArrayDate等,标准对象既可以是普通对象,也可以是特殊对象
  • 内建对象:脚本开始执行时存在于JavaScript执行环境中的对象,所有标准对象都是内建对象

对象字面量语法扩展

JavaScript中的字面量模式更加简洁、有表现力,而且在定义对象时不容易出错。在JavaScript里面,字面量包括:

  • 字符串字面量(String Literal):比如hello world
  • 数组字面量(Array Literal):比如['w3cplus', 7, 'FE']
  • 对象字面量(Object Literal):比如{name:'w3cplus', age: 7}
  • 函数字面量(Function Literal):比如tell:function(){console.log(name)},其中function(){console.log(name)}被认为是函数字面量

不过我们要聊的只是对象字面量。

对象字面量

我们可以将JavaScript中的对象简单地理解为名值对组成的散列表(Hash Table,也叫哈希表)。在其他编程语言中被称作关联数组。其中的值可以是原始值,也可以是对象。不管是什么类型,它们都是属性(Property),属性值同样可以是函数,这时属性就被称为方法(Method)。

JavaScript中自定义的对象(用户定义的本地对象)任何时候都是可变的。内置本地对象的属性也是可变的。你可以先创建一个空对象,然后在需要时给它添加功能。对象字面量写法是按需创建对象的一种理想方式。比如:

var person = {};
person.name = 'w3cplus';
person.age = 7;
person.job = 'FE';
person.sayName = function() {
    console.log(this.name)
}

这里创建了一个person对象,动态给这个对象添加了三个属性nameagejob,另外添加了一个sayName()方法。

但每次创建空对象并不是必须的,对象字面量模式可以直接在创建对象时添加功能。就像下面的示例:

var person = {
    name: 'w3cplus',
    age: 7,
    job: 'FE,
    sayName: function() {
        console.log(this.name)
    }
}

如果你从来没有接触过对象字面量的写法,可能会感觉怪怪的。但越到后来你就会越喜欢它。本质上讲,对象字面量语法包括:

  • 将对象主体包含在一对大括号内{}
  • 对象内的属性或方法之间使用逗号分隔
  • 属性名和值之间使用冒号分隔

上面是有关于ES5中对象字面量相关知识点,而在ES6中,通过下面的几种语法,让对象字面量变得更强大,更简洁。

属性初始值的简写

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

function person(name, age, job) {
    return {
        name: name,
        age: age,
        job: job
    }
}

person()函数创建了一个对象,这个对象的属性名和函数的参数相同,在返回的结果中nameagejob分别重复了两遍,只是其中一个是对象属性的名称,另外一个是对象属性赋值的变量。

在ES6中,当一个对象的属性名和本地变量同名时,不必再写冒号:和值,简单地只写属性名即可:

function person(name, age, job) {
    return {
        name,
        age,
        job
    }
}

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

对象方法简写

在ES6中,除了对象的属性可以简写之外,对象中的方法也可以简写。在ES5中,如果为对象添加方法,必须通过指定名称并完整定义函数来实现,比如:

var person = {
    name: 'w3cplus',
    sayName: function() {
        console.log(this.name)
    }
}

在ES6中,通过省略冒号:function关键词,使对象中的语法变得更加简洁。所以上面的示例可以修改成:

var person = {
    name: 'w3cplus',
    sayName() {
        console.log(this.name)
    }
}

在这个示例中,person对象中创建一个sayName()方法,该属性被赋值为一个匿名函数表达式,它拥有在ES5中定义的对象方法所具有的全部特性。二者唯一的区别是,简写方法可以使用super关键词。

可计算属性名

在JavaScript中,可以通过.[]两种方式设置和访问对象中的属性名:

// 设置对象的属性
var person = new Object();
person.name = 'w3cplus';
person['first name'] = 'damo';
console.log(person);

// 访问对象中的属性
var person = {
    'first name': 'w3cplus',
    age: 7
}

console.log(person['age']);        // => 7
console.log(person['first name']); // => w3cplus

.运算符具有很大的局限性,比如上面示例中first name这种属性只能通过[]方式来设置或者访问。中括号的方式允许我们使用变量或者在使用标识符时会导致语法错误的字符串直接变量来定义属性。

var person = {};
var la
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/ES6-Objects.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部