| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> 07-ES6语法:对象增强 -> 正文阅读 |
|
[JavaScript知识库]07-ES6语法:对象增强 |
ES6添加了一系列功能来增强对象,从而使得处理对象变地更加简洁方便。 下面是简单的屏幕分享,不爱看文字的同道中人可以看视频。-_- 一、简化对象初始化1、基本示例在ES6之前的语法中,初始化对象的时候,如果刚好对象的属性名和变量名称一致,我们仍然需要如同下面的方式来赋予对象属性值。
在ES6中则进行了简化,通过变量直接进行对象初始化。代码如下:
再看起来是不是就没有那么啰嗦了,简化了一些,而且和之前语法中的效果完全一样,在控制台输出的内容如下图所示: 也就是说,如果变量的名称和对象的属性名称一致的话,直接在对象中指定变量即可,会自动创建同名的属性,并将变量值赋予该属性。 2、函数返回对象有些时候,我们自己编写的函数返回的结果不仅仅包含一个值,怎么办呢?其中有一个办法就是将返回结果包装成为一个对象,而如果我们返回的对象刚好也就是函数中相关变量的是内容,这个时候通过变量简化初始化对象的语法就有了用武之地。比如:
上述为了简化演示,我们直接赋予了各个变量的值,而实际的开发中,这些变量值可能是从别的接口中获取到的,也可能是各种各样表达式运算的结果,最后直接通过ES6简化的对象初始化方式把需要返回的变量值组装到了一个对象中返回。下面是控制台输出的结果: 当然了,使用ES6之前的语法也能将函数中的多个变量值组装为一个对象返回,也能达到同样的效果,只不过,这里提供的方式更加方便快捷一些,代码也更加优雅些。 二、简化定义对象函数在ES6之前的语法中,给对象定义方法需要类似于如下的代码。
通过上面的代码可以看到,为对象定义方法需要使用到function语句。另外,上面的代码也用到了ES6的模板字面量,如果对此还不太了解的话,可以查看我的另外一篇文章《03-ES6语法:模板字面量(Template Literals)》
这下厉害了,直接把function语句给拿掉了,只需要方法名和圆括号再跟上花括号即可,代码简化了不少。控制台输出的结果如下图所示: 语法确实简洁多了,不过需要注意的是:只有匿名函数的时候才可以使用简洁语法,如果赋值的是一个有命名的函数,那么就不能使用匿名函数了。比如下面的代码:?
上面的代码中,将命名函数introdue()赋予user.display(),看着是不是有点多此一举,整个匿名函数不就完事了吗?为什么还要多此一举的整个命名函数呢?事实上,有些情况下我们就是需要用到命名函数,最常见的一种情况是递归。递归是需要自己调用自己的,如果函数没有命名,如何调用呢?比如下面的代码:
上面的代码中我们通过函数递归调用的方式,每次对参数num的值减掉1,直到num等于0。此时,就需要在函数代码内部继续调用当前的函数,如果没有命名的话,将无法进行调用。以上代码在控制台的输出结果如下图所示: 命名函数存在的另外一个理由就是程序调试起来方便,可以直接根据函数名快速定位到发生问题的地方。 三、动态对象键1、基本用法有些时候,我们所创建的对象,它的属性名是动态的,比如属性名是由一个变量来确定的。如下面的代码:
请留意extend变量,它的值address我们想作为user的一个属性名。要怎么做呢?
以上代码在控制台输出的结果如下图所示: ES6之前的语法中,无法在创建对象的时候直接增加这些的动态属性名的属性。但是,在ES6的语法中,不仅可以使用上述的方式,在对象创建之后增加新的属性,也可以在创建对象的时候直接增加动态属性名的属性。举例如下:
上面2段代码达到的功能和效果是完全一样的,输出到控制台的内容也完全相同。? 2、属性键调用方法可以在对象的属性键名的变量上调用方法。比如下面的示例:
请注意上面代码中的变量extend值是Address,一般属性名都是首字母小写的,所以,我们希望把它转换为小写。可以直接在属性的键名上调用它的方法。 可以看到新创建的user对象的address属性名首字母是小写了。 3、函数拼接下面演示的是函数拼接的示例。
上面代码的动态属性名是字符串和函数调用结果拼接到一起的。控制台的输出结果如下图所示:?
4、字符串拼接下面演示的是字符串拼接的示例。
上面代码的动态属性名是2个字符串拼接到一起的,仅仅是为了演示说明,实际上没有这么玩的。控制台的输出结果如下图所示:? 除了以上我们举例的几种情况以外,ES6中的动态对象键名还可以是其他的有效的JS表达式,各位可以在实践中去研究下。 5、动态函数名上面演示的都是动态的属性名的一些示例,实际上对象的函数名也可以是动态的,如下代码示例:
从上面的代码可以看到,对象的函数名是动态的,通过中括号[]语法,中括号[]内部的是变量名methodName,这样就创建了一个由methodName变量值命名的函数introdue()。调用的时候同样使用的是中括号[]语法。以上代码在控制台输出的结果如下图所示:
四、对象属性解构ES6语法的对象增强中,应用非常广泛的应该算是对象属性解构了。示例代码如下:
以上代码的输出结果如下图所示: 关于ES6解构赋值相关的技术,我在另外一篇文章《05-ES6语法:解构赋值》中有详细的介绍,有兴趣的话可以移步到那里查看,此处就不再啰嗦了。 五、重复的属性名在ES6之前的版本中,如果试图给对象增加重复的属性,则会报错。如下示例代码:
但是在ES6的中,以上的代码不会报错,但也不会重现同名的2个属性,而只有一个,属性值为最后一个相同属性名的值。比如上面的代码,在控制台上的输出结果如下图:
|
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/23 16:47:44- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |