| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> 五分钟,看懂vue项目会用到哪些ES6常用语法 -> 正文阅读 |
|
[JavaScript知识库]五分钟,看懂vue项目会用到哪些ES6常用语法 |
目录 前言? ?一个前端项目开发中,都会使用到的ES6命令,但是你知道什么是ES6命令嘛?在最新的前端技术迭代下,ES6无非就是ES5的下一个版本,也是现在JavaScript轻量级语言的最新一版本的标准。说最新也新,因为这是现在的最新的一代,但是说不新也可以是不新,因为他已经在7年前就已经发布了。 ? ?这里插一个题外话,我们知道未上分么要更新迭代一个新的命令,就那我们的ES5和ES6来说,ES6因为能很好地解决了ES5留下来的问题,解决了ES5解决不了的问题,而且在程序运行方面,比起ES5运行起来更加的方便。 一、常量声明、变量声明? ? 1、let声明命令let命令,这个命令是ES6新增加的一个命令,它的作用就是和var一样,都是用来声明变量用的,但是let和var有所不同,我们可以逐一介绍let和var不同的特点:
比如我们可以简单的看这个一个程序,
这一个程序当执行到let A=2;的时候就会执行不下去,就会报错,报错的结果如下所示, 报错解释:未捕获的Sytaxerror:标识符'a'已经声明。 因为let命令不允许在相同的作用域下重复声明同一个变量。
变量升级什么意思呢?往下看一个实例代码就知道了,
这一段代码就回到console.log(a)d的时候就会报错,报错类型如下: ?//未捕获的引用错误:在初始化之前无法访问'a' 解释一下为什么会出现这样的保存类型,因为外卖使用的是let命令,这个命令中在进行声明变量的时候,要经过定义这个环节,才能进行到执行代码编译这一步。 在前面我们说了,用var进行声明的变量,是可以在没有声明前使用这个变量的,其得到的值是:undefined未定义,不会产生报错;但是使用的是let命令进行声明的,一定要遵守先定义再执行的过程,不然就会产生报错。
我们在使用let命令的时候,所要声明的变量,这个变量只能在let命令所在的代码块里生效。这句话理解起来很简单。可以通过一个例子看就知道了。 实例:
当代码运行到最后一条console.log(a)的时候,这个代码就会报错,报错格式类型如下: //a没有定义。 补充:ES5中只有全局作用域和函数作用域两个作用域,但是ES6新增了块作用域,是的在执行的时候更加的便利。
在ES6中,如果区块在使用let命令的时候,在块级中对let所声明的变量,这个块区的作用域就会变成封闭的作用域,这个作用域的作用就是只要你在声明前使用这一些变量,都会产生报错,我们就将它称之为“暂时性死区”。代码实例如下:
?这个程序当执行到 b = 20;的时候就会报错,暂时性死区就是这个意思。 2、const命令?在一个vue开发项目中,const这个命令一般使用来声明一个只读的变量,这个变量声明一旦确定了,里面的值就不能发生改变了。这个const的特性和let的使用特性是一样的。 我们还是通过例子的方式来理解,例子:
?由此实例,我们就可以知道,用const声明的值,智能读他的值,但是没有办法进行对他的值进行改变。 二、变量解构赋值数组的解构赋值这个操作是通过从数组中提取出这个数组的值得,按照对应的位置对变量进行赋值。
这个例子左右边的数组元素都是相等的,所以代码执行的时候,该语句实现从数组[1,2,3]中以此提取数值,可以等价于 运行结果: 对象的解构赋值因为我们知道,对象这个定义属性是没有次序的,所以在解构赋值的过程中,要确保变量和属性名同名,不然就取不到对象里面的值。 例子:
变量telphone在右边的对象中没有对应的属性名了,所以输出的值就是undefined未定义。 三、rest参数?这个参数在语法里面又可以成为不定参数,作用是用来获取函数或解析数组赋值过程中的多余参数。
为什么呢?因为rest只能出现在变量的最后面,不能出现在其他的位置,简单地说,就是后续剩余的参数。 四、箭头函数在ES6语法中,是被允许使用箭头来进行函数的定义的,这种方法更加的简介,可以把ES5中的function进行省略,一般的语法格式可以是:(参数a,参数b)=>{函数体},箭头的左边部分,我们般成为前面部分,这个部分是函数的参数,而右边(后面)这个部分函数体的代码块。 箭头函数和别的普通函数除了在写法上面有所不一样之外,其功能上也要有所注意,以下列出
我们将这一段函数改成箭头函数应该怎么改:
解释:没有改成箭头函数前的函数,在执行后,我们可以在浏览器界面任何位置进行单击,而控制台输出的是Windows对象,而不是document,因为setTimeout是通过Window对象进行调用的。 ?而改成箭头函数以后,改成箭头函数执行的代码,你在浏览器界面任何位置进行点击,控制台输出的是doucment对象,因为这个箭头函数已经是在doucment里面进行定义好了的。下图是改成箭头函数后的代码运行结果: 第二点:不能使用argument对象且不能用作构造函数 五、模板字符串ES6可以允许使用反引号“`”来进行创建模板字符串‘string’,这个不仅可以可以当做普通的字符串使用,还可以用作加强型的字符串。这个模板字符串有什么好处呢,它将我们读字符的拼接实现了简化,从而代替了传统的单双引号、“+”来进行字符拼接。我们还是通过我们的代码来解释我们这句话:
?运行结果: 六、模块(Module)语法ES6实现了模块的功能,可以将一个大的工程程序拆分成很多小的功能模块, |
|
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 9:50:50- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |