ES6不仅为字符串、数值和数组带来了扩展,也为对象带来了很多新特性。这一节,我们来一起学习一下对象的扩展。

对象的传统表示法

我们回顾一下,对象的传统表示法:

    let person = {
"name":"张三",
"say":function(){
alert("你好吗?");
}
}

上面的案例很简单,变量person就是一个对象,对象含有name属性和一个say方法。表示法是用键值对的形式来表示,这就是传统的表示法。

ES6中的简洁写法

ES6给我们带来了更简便的表示法,我们一起来对比一下:

 var name = "Zhangsan";
var age = 12; //传统的属性写法
var person = {
"name":name,
"age":age
};
console.log(person);
//结果:{name: "Zhangsan", age: 12} //ES6的属性写法
var person = {name,age};
console.log(person);
//结果:{name: "Zhangsan", age: 12}

咱们来讲解一下上面这个案例,首先定义两个变量name和age,分别用传统的写法和ES6中的写法,把变量作为person对象的属性值。第一种写法大家很熟悉,使用键值对的表示法,而ES6中的新写法只是简单地用两个变量名即可,而得到的结果跟传统的写法一样。

这也就是新的写法更简捷了,变量名可以作为键值对的键(变量名name和age),而变量的名作为值(变量的值Zhangsan和12),最后一起组成了person对象的内容{name:”Zhangsan”,age:12}。

对象的属性可以这样简写,那么对象的方法表示呢?

我们来讲解方法的简写表示法:

    //传统的表示法
var person = {
say:function(){
alert('这是传统的表示法');
}
}; //ES6的表示法
var person = {
say(){
alert('这是ES6的表示法');
}
};

通过上面的案例,可以看出两种写法的区别,不管是属性还是方法,确实ES6给我们带来的表示法更加简捷,代码量更少。

属性名可以是表达式

在表示法上除了这点改进以外,还有另外一个新特点:用字面量定义一个对象的时候,可以用表达式作为对象的属性名或者方法名。不太明白?没关系,来看小案例:

    var f = "first";
var n = "Name";
var s = "say";
var h = "Hello"; var person = {
[ f+n ] : "Zhang",
[ s+h ](){
return "你好吗?";
}
};
console.log(person.firstName);
//结果:Zhang
console.log(person.sayHello());
//结果:你好吗?

注意上面person对象的定义,其中属性名和方法名都是用中括号[ ]包裹着,里面都是一个字符串相加的表达式,这就告诉我们,用字面量(大括号{ })定义对象的时候,属性名和方法名可以是一个表达式,表达式的运算结果就是属性名或者方法名。这点改进会使得对象在实际开发中的使用变得更加的灵活方便,赞!

介绍了对象的新的表示法,下面来介绍几个ES6为对象新增的函数。

Object.is( )函数

函数的作用:比较两个值是否严格相等,或者说全等。

也许有的初学者还不是很理解严格相等,我们在这里来扩展一下:

严格相等和抽象相等

我们看看两者的区别:

    var str = '12';
var num = 12; //抽象相等
str == num;
//结果:true //严格相等
str === num;
//结果:false

可以看到,抽象相等用“==”表示,严格相等用|“===”表示,进行严格相等判断的时候,首先要求类型是一样的,否则会直接返回false。

所以上面的例子中,变量str和变量num一个是字符串类型,一个是数字类型,所以结果是false,而抽象相等会对类型不一致的两个变量进行类型转化,转成同一类型再进行判断。“12”转换成数字类型得到12,再进行比较后得到的结果是true。

好了,科普完严格相等后我们回来看Object.is()函数,它的作用也跟严格相等一样,我们来看看:

    var str = '12';
var num = 12;
var num2 = 12; Object.is(str,num);
//结果:false Object.is(num2,num);
//结果:true

上述的执行结果跟我们预期的一样,参数类型不一样str和num进行比较,得到的结果是false。变量类型和值都一样的num和num2进行比较,得到的结果是true。

Object.assign()函数

函数作用:将源对象的属性赋值到目标对象上。这么讲肯定是有点抽象的,咱们用案例说话,更直观更形象:

    //这个充当目标对象
let target = {"a":1}; //这个充当源对象
let origin = {"b":2,"c":3}; Object.assign(target,origin); //打印target对象出来看一下
console.log(target);
//结果 {a: 1, b: 2, c: 3}

注意输出的结果,target对象已经不是{ a:1 }了,而是变成了{a: 1, b: 2, c: 3},经过Object.assign( )函数的处理,源对象的属性被添加到了target对象上。这就是Object.assign( )函数的作用。

此外,Object.assign( )函数的参数还可以是多个(至少是两个)。我们在上面的案例稍做修改,加一个参数:

    //这个充当目标对象
let target = {"a":1}; //这个充当源对象
let origin1 = {"b":2,"c":3}; //这个充当源对象
let origin2 = {"d":4,"e":5}; Object.assign(target,origin1,origin2); //打印target对象出来看一下
console.log(target);
//结果 {a: 1, b: 2, c: 3, d: 4, e: 5}

我们从最后打印出来的结果可以看出,对象origin1和对象origin2的属性都被添加赋值到了对象target上。也就是Object.assign( )函数参数中的源对象可以是一个或者一个以上。

那么,如果赋值过程中,对象的属性出现了相同的名字怎么办?如果这样,后面的属性值就会覆盖前面的属性值。还是上面的案例稍做修改,看代码:

    //这个充当目标对象
let target = {"a":1}; //这个充当源对象
let origin1 = {"a":2}; //这个充当源对象
let origin2 = {"a":3}; Object.assign(target,origin1,origin2); //打印target对象出来看一下
console.log(target);
//结果 {a: 3}

每个对象属性都含有属性a,它的值从1到最后变成了3,也就是Object.assign()函数处理的过程中,会把最后出现的属性覆盖前面的同名属性。

巧妙利用Object.assign( )函数的功能,我们可以完成很多效果,比如:给对象添加属性和方法,克隆对象,合并多个对象,为对象的属性指定默认值。

Object.getPrototypeOf( )函数

函数作用:获取一个对象的prototype属性。这里的对象我们用一个自定义类实例出来的对象来演示。(这里涉及到了javascript的面向对象,后面拓展)

    //自定义一个Person类(函数)
function Person(){ }
//函数都有一个预属性prototype对象
Person.prototype = {
//给prototype对象添加一个say方法
say(){
console.log('hello');
}
}; //实例化Person对象,赋值给变量allen
let allen = new Person();
//调用类的say方法
allen.say();
//结果:打印出hello //获取allen对象的prototype属性
Object.getPrototypeOf(allen);
//结果:打印{say:function(){.....}}

这个案例代码有点长,但是为了大家能看懂,我把注释写得比较详细,前面部分都是关于面向对象的实现。把函数Person用new关键字调用,这个时候函数Person就相当于构造函数或者说是一个类,实例化后是一个对象,这个对象会继承Person类的prototype的属性和方法。上述例子中,也就是对象allen继承了一个say方法,可以直接调用。

如果你想看看prototype中还有哪些方法和属性,那么,你就可以使用Object.getPrototypeOf( )函数来获取,参数就是allen对象,最后的结果也如我们所料,确实打印出了我们刚开始定义好的内容:一个对象,含有一个say方法{say:function(){.....}}。

那么,如果我想为这个对象修改prototype的内容,要怎么办?这个时候,我们可以用ES6给我们的另一个方法。

Object.setPrototypeOf()函数

函数作用:设置一个对象的prototype属性。

还是上面的案例, 我们稍做修改:

    //自定义一个Person类(函数)
function Person(){ }
//函数都有一个预属性prototype对象
Person.prototype = {
//给prototype对象添加一个say方法
say(){
console.log('hello');
}
}; //实例化Person对象,赋值给变量allen
let allen = new Person();
//调用类的say方法
allen.say();
//结果:打印出hello //使用Object.setPrototypeOf
Object.setPrototypeOf(
allen,
{say(){console.log('hi')}
}); //再次调用类的say方法
allen.say();
//结果:打印出hi

上面的代码,我们使用Object.setPrototypeOf()函数对对象的prototype属性进行了修改,具体的修改是重写了say方法。在修改前,我们曾经调用过一次say( )方法,得到的结果是打印hello,修改之后我们再一次调用allen.say( );得到的结果是打印出hi,说明我们修改成功了。

最后两个函数Object.getPrototypeOf()和Object.setPrototypeOf()的案例代码有点长,涉及到了javascript的面向对象内容。新手如果没有接触过面向对象的话,读起来一定会懵逼,这里有必要拓展一下javascript的面向对象。

javascript的面向对象

Javascript本身不是一种面向对象的编程语言,在ES5中,它的语法中也没有class(类的关键字),但是,开发者可以利用对象的原型prototype属性来模拟面向对象进行编程开发。

这里对于新手来说不一定可以理解,但没关系,前端君就是负责把它讲明白。下面我们就用prototype模式,简单演示一下如何模拟面向对象编程:

    //构造函数模拟创建一个Dog类
function Dog(name){
this.name = name;
} //把一些属性和方法,定义在prototype对象上
Dog.prototype = {
"type":"动物",
"say":function(){
alert("名字叫"+this.name);
}
}; //实例化
var dog = new Dog('旺财');
//调用say方法
dog.say();
//结果:名字叫旺财

上面的案例告诉我们,模拟面向对象编程有几个关键步骤:1、构造函数;2、给prototype对象添加属性和方法;3、实例化;4、通过实例化后的对象调用类的方法或者属性。

注意:面向对象是一种编程思想,并不是具体的工具。

不知不觉讲篇幅已经这么长了,太长了大家也没耐心看,对象的扩展先讲到这里...

本节小结

总结:ES6给我们带来的新特性包括:简洁的表示法、属性名方法可以是表达式、Object.is( ) 函数、Object.assgin( ) 函数、Object.setPrototypeOf( ) 函数,Object.getPrototypeOf() 函数;此外还拓展了:严格相等和抽象相等的区别、javascript面向对象的实现。

在这里我给大家准备了很多的学习资料(除了ES6还有其他资料)

其实你与阿里工程师的差距只差这些东西

ES6中对象的扩展的更多相关文章

  1. 关于es6中对象的扩展

    1.Object.is() es5比较两个值是否相等,只有两个运算符,相等(==) 和 严格相等(===),他们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0 等于 -0.es6提 ...

  2. ES6 对对象的扩展

    1.对象类别 普通对象:具有JavaScript对象的所有默认内部行为 特异对象: 具有某些与默认行为不符的内部行为 标准对象: ECMAScript 6 规范中新定义的对象,例如Array,Date ...

  3. ES6中函数的扩展

    一.设置默认参数 ES6之前,给函数设置默认参数是这样做的: function fn(a) { if(typeof y === undefined){ a = a || 'hello'; } cons ...

  4. ES6中字符串的扩展

    一.查找字符串 在ES5中,可以使用 indexOf 方法和 lastIndexOf 方法查找字符串: let str = 'hello world'; alert(str.indexOf('o')) ...

  5. ES6中对象

    ES6允许把声明的变量直接赋值给对象,我们看下面的例子. let name="Zachary"; let skill= 'web'; let obj= {name,skill}; ...

  6. ES6中对象新增的方法

    属性的简洁表示法 ES6 允许在大括号里面直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = { foo }; console ...

  7. es6中对象的类与继承方法

    对于对象,我一直搞不清楚到底是该如何去继承,如何去书写.在熟练es6之后,终于会尝试写出来了. 代码如下: //我们假定父类为person,子类为man class person{ construct ...

  8. es6(三):es6中函数的扩展(参数默认值、rest参数、箭头函数)

    1.函数可以设置参数默认值 function test1(x,y=1){ console.log(x,y) } test1(10)//10 1 2.rest参数:形式为...变量名 function ...

  9. es6中对象的一些操坐

    变量的赋值 key值得构建 对象的严格检测 对象的合并 1.变量的赋值: let name='宋宇',age='17岁': let obj={name,age} //快速的将变量引入到对象中去. 2. ...

随机推荐

  1. Python python 函数参数:关键字参数

    # 关键字参数 '''关键字参数代表传入任意个含参数名的参数,这些关键字参数在函数内部自动组装为一个dict ''' def student(name,sex,**keywords): print(' ...

  2. jsp学习笔记day2

    一.jsp基础语法 1.注释 显式注释语法: <!--注释内容-->客户端可以看见 隐式注释语法:客户端不能看见 <% //单行注释 /*多行注释*/ %> 2.Scriptl ...

  3. python 开发工具简介

    一.python 开发工具简介 1.IDLE IDLE是开发python程序的基本IDE(集成开发环境),具备基本的IDE的功能,是非商业Python开发的不错的选择.当安装好python以后,IDL ...

  4. Material Design 组件之 CollapsingToolbarLayout

    CollapsingToolbarLayout 主要用于实现一个可折叠的标题栏,一般作为 AppBarLayout 的子 View 来使用,下面总结一下 CollapsingToolbarLayout ...

  5. JS 剑指Offer(二)二维数组中的查找

    04.在一个 n * m 的二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序. 请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. var ...

  6. Python函数之面向过程编程

    一.解释 面向过程:核心是过程二字,过程即解决问题的步骤,基于面向过程去设计程序就像是在设计,流水线式的编程思想,在设计程序时,需要把整个流程设计出来, 一条工业流水线,是一种机械式的思维方式 二.优 ...

  7. java初学复习

    作为学Java的小白,忽然想看一看自己学了些什么东西,话不多说,(这都是新手弄的总结)让我们看一看: 1.我们要先了解Java技术 Java SE:标准版java技术的基础和核心 Java EE:企业 ...

  8. CodeForces 277A 红娘问题(并查子集)

    题目链接 思路如下 这题可以普通的并查集来做,我们把每个人认识的红娘,放到一个同一个集合里面,然后通过 for循环 遍历出现过的编号,看总共有几个集合,当集合的个数大于1的时候,需要的话费rmb的数量 ...

  9. python函数的传参模式

    python里的变量更像是一个名字.标签.而Python中一切又皆为对象. 当函数传参时,函数参数作为一个标签,指向某个对象,因此更贴切的说是"call by object". 但 ...

  10. 在vue项目中封装echarts的正确姿势

    为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记 ...