您的位置 首页 php

VUE初体验篇-搭建基础ES6新特性

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

1537336137270fc56606d82

ES6从常变量、作用域、 字符串 、数值、数组、函数、对象、数据类型、异步处理等等方面都进行了升级。下面我们来逐一分解梳理。 (这里感谢 阮一峰 大神的ECMAScript 6 入门,建议大家详细通读下)

let const var 与作用域

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

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

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

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

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

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

var callbacks = []; (function() {  for (var i = 0; i < 5; i++) {  callbacks.push( function() { return i; } );  } })(); console.log(callbacks.map( function(cb) { return cb(); } ));  

循环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进行声明是这样的:

function a(x){  var self = this  var x1 = x || 0  return x+1 }  

es6版本呢

var a = (x=2)=>x+1  

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

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

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

解构赋值

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

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

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

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

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

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

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

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

这样 c d就直接声明赋值了。

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

Proxy对象代理

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

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

举个栗子:你要申明的对象是个明星,然后给明星找了个经纪人(就是对象代理),你所有的想要对明星的操作都要找联系人。明星的 微博 、微信、电话号码全都对外人公布了,但是你私信、加好友、打电话全是这个经纪人给过滤的。

整个对象代理,其实也就是对象拦截器,可以拦截的操作有13种:

  1. get(target, propKey, receiver):拦截对象属性的读取,比如proxy.foo和proxy[‘foo’]。
  2. set(target, propKey, value, receiver):拦截对象属性的设置,比如proxy.foo = v或proxy[‘foo’] = v,返回一个布尔值。
  3. has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。
  4. deleteProperty(target, propKey):拦截delete proxy[propKey]的操作,返回一个布尔值。
  5. ownKeys(target):拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
  6. getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。
  7. defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。
  8. preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值。
  9. getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象。
  10. isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值。
  11. setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。
  12. apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。
  13. construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(…args)。

举个栗子:Web 服务的客户端

Web 服务的客户端处理客户发送上来的数据都应该作为不信任的处理。所以所有发送上来的内容全部都要经过安全过滤,方式SQL注入、安全攻击、内容重编码或者权限校验。 Proxy 对象可以拦截目标对象的任意属性,这使得它很合适用来写 Web 服务的客户端。

const service = createWebService(' service.employees().then( json  => {  const employees = JSON.parse(json);  // ··· });  

上面代码新建了一个 Web 服务的接口,这个接口返回各种数据。Proxy 可以拦截这个对象的任意属性,所以不用为每一种数据写一个适配方法,只要写一个 Proxy 拦截就可以了。

function createWebService(baseUrl) {  return new Proxy({}, {  get(target, propKey, receiver) {  return () => httpGet(baseUrl+'/' + propKey);  }  }); }  

文末

上面提到的es6的新特性只是冰山一角,es6发展至今,js已经不单单是作为前端脚本语言存在,nodejs的兴起使得使用js进行后端开发也不再是幻想。前后端语言也越来越模糊,也对前端人员的能力要求进一步拔高。

你觉得未来js发展会是怎么样的呢?

欢迎关注并私信发送 es6 ,阮大神的es6全文,线上es6视频教程和实战教程源码,全部分享给你!

文章来源:智云一二三科技

文章标题:VUE初体验篇-搭建基础ES6新特性

文章地址:https://www.zhihuclub.com/42410.shtml

关于作者: 智云科技

热门文章

评论已关闭

29条评论

  1. Ginkgo for elderly people with dementia and age associated memory impairment a randomized clinical trial This type of breast cancer may grow more quickly and is more likely to spread to other parts of the body

  2. 5 mg day in women and androgen deficiency Ribociclib also delayed time to first chemotherapy by almost 1 year; the median time to first chemotherapy was 50

  3. MCF 7 and MDA MB 453 cells were grown in 35 mm dishes to 100 confluence, which were then scratched using a sterile pipette tip to form a wound com 20 E2 AD 90 20Viagra 20100 20Mg 20Ne 20Zaman 20Etkisini 20Gsterir 20 20Viagra 20Ljekarna viagra 100 mg ne zaman etkisini gsterir A Guardia Civil spokesman said it was investigating the incident, but that it was currently being put down as Гў an accident

  4. levitra rxmm health But in the meeting with Sun staff, the media mogul railedagainst police and said he had cooperated too closely withdetectives when an internal committee he set up suppliedthousands of internal emails at the height of the scandal In both cases, however, it is likely that a return to within normal parameters would occur shortly after steroid discontinuation

  5. Anastrozole Arimidex, AstraZeneca is a third generation aromatase inhibitor which rapidly reduces oestradiol concentrations to below detectable levels

  6. Use of supportive therapies such as aspirin, renin angiotensin blockade and statins are also considered in ERT treated subjects 41

  7. University of Texas at Austin, The Sexual Psychophysiological Laboratory Hypoactive Sexual Desire Disorder

  8. cafergot orlistate 120mg preo prati donaduzzi The Daily News has some of the most memorable photos in sports history

  9. In theory, taking sodium bicarbonate along with some penicillins might decrease potassium in the body too much

  10. This agent carries a black box warning for an increased risk of QTc prolongation, torsades de pointes, and SCD Cardiac patients on restricted diets may add excess salt to their food when it appears deficient, and diabetics may add extra sugar when flavor appears absent

  11. A gene set analysis of a vast panel of LCLs from different ethnic groups was conducted to assess associations between basal gene expression and thiopurine susceptibility 22 I am on test cypionate at 100 mg per week and am planning a 10 week blast at 300 mg per week

  12. Keywords adult mice; inducible gene knockout; lifespan; mortality rates; pregnancy associated plasma protein A; tamoxifen

  13. BreastMark an integrated approach to mining publicly available transcriptomic datasets relating to breast cancer outcome

  14. It s a diagnosis many infertile women dread and one that doctors hate to deliver The cultivation base has already reached the realm of the Immortal King, and with his guidance, Tuobazhi can be said to have reached the sky in one step, and the road to the realm of the Immortal King has been greatly opened for what should your blood sugar him

  15. Patients should be instructed to stay well hydrated eg, 2 liters of liquid per day Although lifestyle intervention is recommended in many countries because it leads to higher spontaneous ovulation rates 93 and natural conceptions rates, 94 the role of lifestyle intervention in conjunction to drug treatment is controversial in current evidence

  16. They always does lasix cause erectile dysfunction Erection Pills Cervalle do penile injections cause increased erectile dysfunction stayed in the dark can erectile dysfunction be cured completely room, sitting face to face in the wicker chair by the fire, silently speaking, not does lasix cause erectile dysfunction Help Maintain And Prolong Erections thermophilum Ct DGAT2

  17. Effect of injection of estradiol b e n z o a t e, tamoxifen or benz o a t e t a m o x i f e n on growth a n d D N A c o n t e n t of quail oviduct Parental A20 cells or those transfected with the Myr Akt ER or non Myr Akt ER were left unstimulated or stimulated for 24 hours by cross linking the BCR alone B, or by co cross linking the BCR with the FcОіRIIB1 B F, in the absence or presence of 4 HT

  18. The perivascular origin of ASCs and the expression of pericytic markers first suggested a role in vascular homeostasis of adipose tissue Maumus et al 7 Endometrial thickness 6

网站地图