竹笋

首页 » 问答 » 常识 » VUE初体验篇搭建基础ES6新特性
TUhjnbcbe - 2022/12/30 8:17:00
北京医治皮肤病医院 http://m.39.net/disease/a_9278663.html

JavaScript发展至今,从ES5到ES6可以说实现了跨越式的进步。从原来的脚本语言,变成了可以做面向对象编程的编程语言。虽然原来也可以通过各种模拟的方式实现,但是实现起来已经不是常人可以理解的程度了。

ES6从常变量、作用域、字符串、数值、数组、函数、对象、数据类型、异步处理等等方面都进行了升级。下面我们来逐一分解梳理。

letconstvar与作用域

ES6之前的版本没有作用域的,一个var搞定。但是有利有弊。如果在块儿内var声明了变量,代码外面仍然是可见的。es6完善了作用域的的规范,并且增加了let和const用来声明块作用域下的变量。

let是声明变量,后续程序运行过程中,可以进行更改。const声明了一个常量,声明好之后,就不能变更了。

举个栗子:你声明了一个对象,对象声明的时候let爱好=看电视,const性别=女,varname=某某。后续你这个对象怎么变化,爱好从看电视变成了睡觉,但是性别无论如何都变化不了(变性手术之类不再考虑范围内)

对应块作用域的范围就是,里面的声明只有对象自己知道。外面不知道。别人只知道你声明了个对象,但是除非你告诉他,别人没办法知道你对象是男是女,什么爱好,但是你填表格的时候填过你的对象name是某某,大家就都知道了。

let和const好用的不得了,是不是var就完全被let替代了呢?不是的,let好用,但是局限也是在块作用域。如果我们想拥有函数作用域的话,就可以用var了。

这里就不得不提到一个经典面试题了:

varcallbacks=[];(function(){for(vari=0;i5;i++){callbacks.push(function(){returni;});}})();console.log(callbacks.map(function(cb){returncb();}));

循环5次,将结果都推送给callback,最后统一输出。按照正常逻辑应该是[0,1,2,3,4]的结果,但是由于var这个声明方式会把作用域提到顶部,这样后续的所有操作都是对变量i的变更而已。最后输出的时候都是最后的的i而已。也就变成了[5,5,5,5,5]

对应声明的时候变成let来声明,就正常了。

提示:const声明结束了就是完全不能更改的嘛?涉及到一个数据类型的问题,基础类型String、undefined、null、boolean、number是不能更改的。复杂类型Object就可以更改,为啥,你自己去探索。

箭头函数与默认参数

es6全新引入的书写方式,其实也算是一个语法糖,但是顺手也解决了一些作用域的问题。原来书写函数使用使用function进行声明是这样的:

functiona(x){varself=thisvarx1=x

0returnx+1}

es6版本呢

vara=(x=2)=x+1

es6版本是书写更加方便,涉及的新特性还有默认参数和减少了this作用域的变更。

尤其在进行vue组件开发过程中,经常各种函数嵌套变来变去,函数里面套函数。如果都使用function进行书写的时候,会把本组件里面使用最用的this调整到函数内部的this。解决方案1.在函数声明前使用var声明一个对象_this或者self进行复制vue的this,然后在函数内部进行操作。2.书写方式简化使用箭头函数,压根就不存在这个问题,this不会进行变更的,还是指向了vue的全局this,用起来不要太爽啊。

至于默认参数,做过后端开发的有没有很熟悉!比如PHP,JAVA里面天天这么用的好不好。这也进一步展示了js要行程一套体系完整的编程体系,把他们的好处全部都吸收过来。

解构赋值

解构赋值相当于也是一种语法糖。原来的对象取值是这样的

letobj={a:true,b:false}leta=obj.aletb=obj.b

es6使用解构这种新特效简化这种取值方式,将数据结构打破拆分进行赋值,变更后如下:

letobj={a:true,b:false}let{a,b}=obj

注意上述方式只是进行了对象解构,解构内容赋值给新声明的变量,如果原来要赋值的对象有内容时,则需要花括号括上。语法规定,代码块语句不允许出现在赋值语句左侧。如下

letobj={a:true,b:false}a=falseb=true({a,b}=obj)

在结构赋值的过程中,默认参数同样适用。上面的都是同名赋值,非同名赋值呢,如下:

letobj={a:true,b:false}let{a:c,b:d}=obj

这样cd就直接声明赋值了。

对应其他的解构赋值类型还包含嵌套对象解构、数组解构、混合解构、字符串解构、数值和布尔值解构等等,都可以学习学习。

Proxy对象代理

关于对象代理部分,最开始了解还是一脸懵的,充分理解后的本质还是字面意思(废话)。

es6的这个特性可以给对象包一层代理,复写下原生的对象内部的所有方法,在复写做成中做很多事情。

举个栗子:你要申明的对象是个明星,然后给明星找了个经纪人(就是对象代理),你所有的想要对明星的操作都要找联系人。明星的微博、

1
查看完整版本: VUE初体验篇搭建基础ES6新特性