因为工作的原因,实际上读书的时间很少,读【本文受版权保护】【版权所有】唐霜 www.tangshuang.net小说散文就已经够折腾了,静下心读技术方面【版权所有,侵权必究】【原创内容,转载请注明出处】的书就更困难。不过公司有学习经费,自己的【未经授权禁止转载】【未经授权禁止转载】今年还有一半没有花出去,眼看已经第四季度【原创不易,请尊重版权】【转载请注明来源】了,不花就便宜了公司,所以赶紧买了一些书原创内容,盗版必究。【原创内容,转载请注明出处】,买回来不读又浪费,就先把阮一峰《ES6本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。标准入门(第2版)》先读完。
原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。
阮一峰写的东西就是为了通俗易懂,不去纠结转载请注明出处:www.tangshuang.net【本文受版权保护】于字眼。这本书也主要把ES6和ES5不同【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】的地方列出来进行阐述,不是Javascr【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.netipt的入门书籍。虽然大部分我都有所接触【作者:唐霜】【版权所有,侵权必究】,但是系统的学习还是有必要的,这样才能有转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。全局观。平时下班回家就看几十页,周末的时【作者:唐霜】【原创内容,转载请注明出处】候啃完了。接下来,就结合自己的一些开发经【版权所有】唐霜 www.tangshuang.net【转载请注明来源】验,谈谈自己觉得ES6带给我的最吸引人的转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】地方。
【本文受版权保护】本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】废掉老版作用域的节奏
Javascript里function是【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。一级成员,ES5的时候,要么是全局作用域【本文受版权保护】【本文受版权保护】,要么是函数级作用域,都用关键字var进【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。行作用域里面的变量声明。但是到了ES6,【未经授权禁止转载】本文作者:唐霜,转载请注明出处。除了全局变量在局部作用域仍然有效这点,其著作权归作者所有,禁止商业用途转载。【作者:唐霜】他方面的理解全给废了,不升级知识,根本没本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。法装逼下去。
【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。全局变量
首先,解释一下全局作用域对我来说很重要。
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。【转载请注明来源】在开发php的时候,就没有这个概念,在J【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.netavascript里面,我们这样做:
本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.netvar a = 1;function autoinc() {
a ++;
}
autoinc();
console.log(a);
在函数autoinc()中a这个全局变量【未经授权禁止转载】未经授权,禁止复制转载。是有效的,但在php中,函数里面必须用g转载请注明出处:www.tangshuang.net【未经授权禁止转载】lobal去找到全局变量:
【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。global $a;
$a = 1;
function autoinc() {
global $a;
$a ++;
}
autoinc();
echo $a;
你可以看到,在函数外面的区域,也要用gl【关注微信公众号:wwwtangshuangnet】【作者:唐霜】obal去声明$a这个全局变量,func【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。tion外跟function内并没有全局未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net与局部的概念,大家都是局部,并不共享变量【原创不易,请尊重版权】【未经授权禁止转载】,只有用global声明之后才能在其他作本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。用域内共享这个变量。
【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】基于这一点,我认为Javascript在【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】全局与局部的安排上更加符合普通人思维。
转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。但是到了ES6这个茬,大部分风格规范都推【转载请注明来源】【作者:唐霜】荐使用const来声明一个全局变量,意思未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。就是说,如果你在全局作用域去声明一个变量【原创内容,转载请注明出处】【版权所有,侵权必究】,应该是想在所有作用域范围内共享它,那么【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net它就应该保持不变,否则会导致在不同作用域【版权所有,侵权必究】【版权所有,侵权必究】得到非预期的结果。
【未经授权禁止转载】转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。这么一来,实际上有取消全局变量的意思,c【本文受版权保护】【版权所有】唐霜 www.tangshuang.netonst声明的是不可改变的常量,相当于只【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net是一个别名而已。当然,ES6标准并没有这【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。么要求,var声明全局变量仍然是有效的。
【作者:唐霜】本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net块级作用域与let声明
用花括号处理的作用域就是块级作用域,比如原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】for/while循环语句,if判断语句原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。,甚至莫名其妙写一个{},在这个作用域内【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net,用let声明变量,出了作用域就被销毁。
未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】var i = 99;for(let i = 10;i --;) {
console.log(i); // 循环内的i值}console.log(i); // 99
在这本书里面提到,Airbnb推荐,你就【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。不要用var声明变量,全部用const/【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。let代替,const声明全局的不变的常原创内容,盗版必究。未经授权,禁止复制转载。量,let声明块级的变量……
著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】看到这里的时候,我都有点崩溃了。它的意思【版权所有,侵权必究】【作者:唐霜】是:
未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net- 把整个全局当做一个块级作用域,把整个全局本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】想象为放在一个花括号中间的代码 【本文受版权保护】原创内容,盗版必究。
- 把函数也当做一个块级作用域,函数里面根本【本文受版权保护】【关注微信公众号:wwwtangshuangnet】用不到var(不考虑变量声明提升) 【转载请注明来源】著作权归作者所有,禁止商业用途转载。
如果是这样,相当于把var废掉,把fun本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.netction作用域废掉,把全局变量废掉,所转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。有真正可以变的变量都是let,那搞个鸡毛【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。……
【本文首发于唐霜的博客】【未经授权禁止转载】【原创不易,请尊重版权】幸好,这只是Airbnb这家公司的风格,著作权归作者所有,禁止商业用途转载。【转载请注明来源】ES6甚至ES7并没有任何一点迹象打算对本文作者:唐霜,转载请注明出处。【未经授权禁止转载】var开刀,相反,我仍然觉得全局变量的使【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。用是Javascript的一大特色。
【版权所有,侵权必究】原创内容,盗版必究。上面提到,“把函数也当做块级作用域”,这【原创内容,转载请注明出处】【本文受版权保护】种想法把函数从一等公民中踢出,和其他块级转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。作用域地位平等,这也让我不能接受。Jav【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】ascript的一大特色是函数,它不仅拥【原创内容,转载请注明出处】未经授权,禁止复制转载。有对象的本质属性,而且拥有转化为实际“类本文作者:唐霜,转载请注明出处。【作者:唐霜】”的功能,而且把它作为回调函数也是实现J【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。avascript异步操作的主要方式。如本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net果把函数降级,从配备上讲,应该将它的实例著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net化功能去除,虽然ES6直接提供了clas原创内容,盗版必究。转载请注明出处:www.tangshuang.nets,但它本质上还是函数的语法糖,函数的角未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net色不仅未被弱化,反而强化。
著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】所以,我认为在函数中,顶层变量仍然应该用【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】var进行声明,以此区别于以let声明的【作者:唐霜】【本文首发于唐霜的博客】变量。
原创内容,盗版必究。【转载请注明来源】未经授权,禁止复制转载。字符串模板
这个先讲好了,字符串模板是什么意思?就是【原创内容,转载请注明出处】【本文首发于唐霜的博客】像PHP一样,可以在字符串里面用变量,只未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】不过使用方法是要用${变量或表达式}这种方法括起来。
var a = `
<p>I am ${sex.man}, and not like ${sex.woman}</p>
<p>I want to know if 1+2 equals ${a + 2}</p>
`;
可以看到,字符串模板采用“将【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。字符串引起来,它和原来的Javascri【本文受版权保护】【关注微信公众号:wwwtangshuangnet】pt字符串有两大区别:
原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】【作者:唐霜】- 可以换行 【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】
- 可以引用变量/表达式 著作权归作者所有,禁止商业用途转载。【作者:唐霜】本文版权归作者所有,未经授权不得转载。
换行就不说了,以前我们要么使用+连接字符【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。串,要么使用\换行,现在通通不用了。
【作者:唐霜】
引用变量就非常牛逼,你第一次使用这个字未经授权,禁止复制转载。【作者:唐霜】符串模板的时候,把它显示在界面上,然后修未经授权,禁止复制转载。【未经授权禁止转载】改变量的值,再显示到界面上,感觉是不是有【本文受版权保护】未经授权,禁止复制转载。点hi~
解构赋值
我认为这是ES6最酷的地方,它不仅从某种本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】意义上弥补了Javascript提取值的【原创内容,转载请注明出处】原创内容,盗版必究。时候变量名和属性名(键名)对应的操作,更【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net牛逼的地方是,它用超级简单的语法糖超越了【未经授权禁止转载】【未经授权禁止转载】大部分语言的解构赋值。
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net数组解构赋值
我们来看下php中的一种写法:
著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】list($a,$b) = explode(',',$str);
但在Javascript中更加方便:
未经授权,禁止复制转载。【原创内容,转载请注明出处】【原创不易,请尊重版权】var [a,b] = str.split(',');
如果a,b之前已经声明了,那么这里连va本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netr都省了。你或许会觉得看上去好不到哪里去【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。,但是我告诉你,在php里面,你必须去调本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。用list这个函数,而在Javascri【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】pt呢?完全是赋值这个动作完成的。
【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。对象解构赋值
更有用的,是对象的解构赋值,因为我们经常【本文首发于唐霜的博客】未经授权,禁止复制转载。会使自己的函数返回对象:
【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】// badfunction getA() {
return {
name : 'Mico',
age : 10
}}var a = getA();var name = a.name;var age = a.age;
// goodvar {name, age} = getA();
关于解构赋值的深层的东西,还需要你自己去【未经授权禁止转载】【本文首发于唐霜的博客】读书,我只想说的是,看到这样的语法糖,我【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。TM真的忍不住想尖叫有没有,太爽了。
未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。函数参数解构
更了不起的解构被用在函数的参数上。我们有本文作者:唐霜,转载请注明出处。【转载请注明来源】时会传入多个参数给函数,但是可惜的是,有原创内容,盗版必究。【本文受版权保护】的时候你并不知道那些参数是不一定需要的。【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】以往我们必须在复杂参数解构中,传入一个对【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。象,通过对象的属性去调用自己要的值,比如【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net:
本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.netfunction curl(url,postData,headers) {} // 如果并不存在postData,我们不得不这样调用:curl('http://xxx',null,{cookies:'xxx'}); // 第二个参数其实是没有必要的
上面是我们最早的一种方式,为了实现我们的【版权所有,侵权必究】【未经授权禁止转载】想法,我们决定修改参数:
著作权归作者所有,禁止商业用途转载。【转载请注明来源】本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。function curl(url,options) {
// ...
if(options.postData) {}
if(options.headers) {}
// ...}curl('http://xxx',{
headers:{cookies:'xxx'}});
通过上面这种传入对象参数的方式,可以实现【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net防止参数不必须传入的情况。
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。但是,来到ES6的时代,我们可以这样做:
未经授权,禁止复制转载。【转载请注明来源】未经授权,禁止复制转载。function curl({url,postData,headers}) {
return some_ajax({
url : url,
data : postData,
headers : headers
});}curl({
url : 'xxx',
headers : {
cookies: 'xxx'
}});
从上面可以看到,直接在定义函数的时候,利【转载请注明来源】本文版权归作者所有,未经授权不得转载。用函数参数也可以解构的特性,把参数写成{url,postData,headers}的形式,那么在调用函数的时候,传入一个对【版权所有,侵权必究】【本文首发于唐霜的博客】象作为参数,传入的参数会自动解构给声明时未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net候的那个对象。
【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。{url}这种对象形式也是ES6新增的,【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】它的意思是
转载请注明出处:www.tangshuang.net【作者:唐霜】未经授权,禁止复制转载。原创内容,盗版必究。{url:url},第一个url是属性名,第二个url是变【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。量。如果在这之前没有声明第二个url变量本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net,那么会报错。
当然,除了使用对象这种方法,我们回到最前未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。面的function curl(url,postData,headers) {}。我们现在还可以这样调用:
curl(['xxx',,{cookies:'xxx'}]); // 注意,第二个元素为空
通过数组解构的方式把参数传过去,在不需要【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net传入的位置留空就可以了。
【原创内容,转载请注明出处】【未经授权禁止转载】这种用法,简直了!我都有种感动的流鼻涕的【转载请注明来源】原创内容,盗版必究。兴奋感。只可惜目前浏览器还没有广泛支持,【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。我们需要babel的帮助……不好意思,又【本文受版权保护】未经授权,禁止复制转载。扯到babel。
著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。默认值
习惯了php函数的默认值,写Javasc原创内容,盗版必究。原创内容,盗版必究。ript函数的时候,有种香菇的冲动。然而【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。,当ES6来的时候,妈妈再也不用担心我的【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。默认值,而且Javascript现在的默【转载请注明来源】【本文受版权保护】认值,比php牛逼哄哄多了好吗。
未经授权,禁止复制转载。未经授权,禁止复制转载。函数的参数
function plus(x = 0,origin = 5) {
return origin + x;}var rs = plus(5);alert(rs);
这和php的用法一摸一样。
【本文受版权保护】【作者:唐霜】function sum(x = 2,y = x) {
return x + y;}var rs = sum(5);alert(rs);
这就不一样了……点解y可以等于x?也就是【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】说,在Javascript里,函数的参数【原创内容,转载请注明出处】【作者:唐霜】默认值可以是声明过的变量,如果该默认值没有声明过,就报错,【本文受版权保护】原创内容,盗版必究。因此,参数的变量名顺序也很重要。
【原创不易,请尊重版权】【未经授权禁止转载】【未经授权禁止转载】function sum(x = 2,y = x + 3) {
return x + y;}var rs = sum(6);alert(rs);
什么鬼?连表达式都可以作为默认值?是的,未经授权,禁止复制转载。原创内容,盗版必究。你没有瞎,只要在默认值运算的时候变量都是【转载请注明来源】【未经授权禁止转载】经过声明的就OK。
【本文受版权保护】
放个大招:
function curl(url,{postData,headers = {cookies : 'xxx'}} = {}) {
return some_ajax({
url: url,
data: postData || {}
headers: headers || {}
});}curl('http://xxx');
这是什么鬼?给我一脸黑人头像……其实简单著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】,这里面有默认值的知识,也有解构赋值的知【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】识,{postData,headers}【版权所有】唐霜 www.tangshuang.net【本文受版权保护】是解构赋值这一层,headers = {本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netcookies: ‘xxx&【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。#8217;}是解构赋值的时候如果传入的【原创内容,转载请注明出处】未经授权,禁止复制转载。对象里没有headers这个属性,默认值【未经授权禁止转载】【版权所有,侵权必究】设为{cookies : ‘【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】xxx’},{postDat【版权所有,侵权必究】未经授权,禁止复制转载。a,headers} = {}是默认值设【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net置,也就是函数的第二个参数如果没有设置的转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】话,则设置为空对象。
未经授权,禁止复制转载。【原创内容,转载请注明出处】【原创不易,请尊重版权】它的整个默认值,解构赋值的过程大概是这样【原创不易,请尊重版权】【转载请注明来源】:
【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。function curl(url,options = {}) {} // 第一层:不存在第二个实参的话,使用{}默认值function curl(url,{postData,headers}) {} // 第二层:如果存在第二个实参(默认值是{}也表示存在第二个实参),进行对象解构赋值function curl(url,postData,headers = {cookies: 'xxx'}) {} // 第三层:解构赋值的时候不存在headers,传入一个默认值
所以上面执行curl(‘xx原创内容,盗版必究。【作者:唐霜】x’),因为没有第二个实参,【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。所以实际上第二个参数默认值传入了{},所【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。以函数体内postData是不存在的,是【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.netundefined。但是headers是【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net存在的,因为第二个参数传入了默认值,第二本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】层的解构赋值无论如何都会进行,这个时候h【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.neteaders的默认值就是{cookies【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】:’xxx’}了转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】。解构的时候也存在默认值,这个默认值不是未经授权,禁止复制转载。【转载请注明来源】函数参数默认值,而是解构默认值,解构默认【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】值往下看。
【转载请注明来源】【未经授权禁止转载】【版权所有,侵权必究】解构默认值
解构的时候也可以设置默认值,按理应该在前【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】面讲,但是函数参数默认值更常见,有了上面【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net的引子,再来说解构默认值,简直直接说完就本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】可以了。
【本文受版权保护】【转载请注明来源】未经授权,禁止复制转载。var {x = 0,y = 1} = {x : 5};console.log(x,y);
而且解构默认值也遵循上面提到的默认值可以【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】是变量和表达式的规则,只要变量经过声明就【本文首发于唐霜的博客】【未经授权禁止转载】可以。
原创内容,盗版必究。【原创内容,转载请注明出处】这种东西,在我见过的语言里,就Javas【关注微信公众号:wwwtangshuangnet】【作者:唐霜】cript里面有,只能说我孤陋寡闻,第一转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】次看到,下巴都掉了。
【版权所有,侵权必究】转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】…(扩展运算符)和for…of
在ES6里面,真的是活久见,如果10年前【原创内容,转载请注明出处】未经授权,禁止复制转载。开始写Javascript,谁曾想到,一未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net下子出来这么多新东西,完全接受不了。你要【未经授权禁止转载】【本文受版权保护】是一个小版本一个小版本的升级,每个版本出未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net一个新东西,那也不至于一下子学这么多东西原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。呀,在哪个语言里面,三个点(…【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】;)也能算运算符?
【原创不易,请尊重版权】原创内容,盗版必究。for…of
为了方便,还是先说一下for…【本文受版权保护】【本文受版权保护】;of吧,它是ES6新的遍历方式(《javascript的几种常见遍历数据结【本文受版权保护】本文版权归作者所有,未经授权不得转载。构的语法》),目前来看,浏览器不支持,连babe转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.netl也不支持,要安装babel的扩展才支持本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】。
【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netfor(let value of [1,2,3]) {
console.log(value);}
就是这么简单,可以遍历过程中获取valu本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】e值。
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】原创内容,盗版必究。【原创不易,请尊重版权】…(扩展运算符)
…是我看到ES6里面,使用最本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。灵活的运算符,与其叫“扩展运算符”还不如本文作者:唐霜,转载请注明出处。【未经授权禁止转载】叫“展开运算符”来的更加形象,它的作用,著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。说白了,就是展开一个数组,得到一组独立的【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。值(顺序和数组元素顺序相同)。
【作者:唐霜】转载请注明出处:www.tangshuang.net【版权所有,侵权必究】【原创不易,请尊重版权】说实话,第一次使用还是有点难以理解的。
【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。转载请注明出处:www.tangshuang.netconsole.log(...[1,2,3]);
上面的代码等于:
【原创内容,转载请注明出处】未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netconsole.log(1,2,3);
这种操作有点难以理解,为什么通过R【本文受版权保护】转载请注明出处:www.tangshuang.net30;之后,一个数组就变成三个用逗号分开【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】的值呢?你要问我,我也不知道,它就是这种原创内容,盗版必究。【版权所有,侵权必究】作用。
【版权所有,侵权必究】
...[1,2,3]的结果不是字符串,也不是数组,没有数据类【原创不易,请尊重版权】【原创内容,转载请注明出处】型可以定义它,只能称之为“一组用逗号分开原创内容,盗版必究。转载请注明出处:www.tangshuang.net的值”。这种神奇的操作,让合并数组变得异本文作者:唐霜,转载请注明出处。【本文受版权保护】常简单:
var a = [...[1,2,3],...[4,5,6]]; // [1,2,3,4,5,6]
它经常被用在函数的传参上:
【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。function sum(...args) {
return Math.sum(args);}sum(1,2,34,23,23,5); // 任意个数的参数
不过它不能用在对象上,而只能用在类似数组原创内容,盗版必究。转载请注明出处:www.tangshuang.net的数据结构上(包括类似数组的对象)。
转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】箭头函数
活久见的还有箭头函数=>,它的用法几乎闻所未闻,这也可以表示一个【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。函数吗?可以,在ES6里面,就是这样干的【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】:
[1,2,3].map(v => v + 2);
这在以前要写成:
本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。[1,2,3].map(function(v){
return v + 2;});
显然不是方便了一点点,而且从视觉上,完全转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。没有函数的影子,是非常完整且单一的一条执本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】行语句。所有的普通函数都可以这样改写了:
【关注微信公众号:wwwtangshuangnet】【作者:唐霜】【未经授权禁止转载】function(params) {}// 改写为(params) => {}
那么什么函数是普通的呢?
【作者:唐霜】【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】- 不能在函数体内使用this 【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net
- 不允许作为构造函数,不能用new实例化 【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】【本文首发于唐霜的博客】【原创不易,请尊重版权】
- 内部不存在arguments对象 【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】
其实说白了,你只能把它当做函数用,然后让【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】函数的其他功能见鬼去。
著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】【版权所有,侵权必究】Promise
Promise在之前的Javascrip转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。t里面就已经实现了,比如jQuery引入了Deferred,但是这次ES6把Promise写进了标【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】准里。
【转载请注明来源】【本文受版权保护】本文作者:唐霜,转载请注明出处。【作者:唐霜】function ajax(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onreadystatechange = handler;
xhr.responseType = 'json';
xhr.setRequestHeader('Accept', 'application/json');
xhr.send();
function handler() {
if(this.readyState !== 4) return;
if(this.status === 200) resolve(this.response);
else reject(new Error(this.statusText));
}
});}ajax('http://xxx').then(data => {}).catch(error => {});
过多就不多说了,自己和jQuery的Pr原创内容,盗版必究。【本文首发于唐霜的博客】omise对照感受。
【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。【转载请注明来源】【版权所有,侵权必究】Class 类及其继承
Javascript也开始支持类声明了,本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。不再需要function来声明,而且cl【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。ass类型就是class类型,不是fun【版权所有,侵权必究】【原创内容,转载请注明出处】ction类型,所以在console中,未经授权,禁止复制转载。原创内容,盗版必究。看到的是class的数据结构,它和fun本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】ction实例化出来的类还有区别。
未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.netClass的基本语法
class Person {
constructor(name,age) {
this.name = name;
this.age = age;
}
say(msg) {
alert(msg)
}}var mico = new Person('Mico',10);mico.say(`Hello, my name is ${mico.name}, and ${mico.age} years old.`);
而且Javascript的类也支持静态方本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】法:
本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】class Person {
//...
static walk() { // 不要使用this
console.log('I am walking');
}}Person.walk();
当然,它一如既往的支持getter/se未经授权,禁止复制转载。【版权所有,侵权必究】tter:
本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】class Person {
get age() {
return this.age;
}
set age(x) {
this.age = x;
}}
可惜的是,Javascript的类还不支【本文受版权保护】著作权归作者所有,禁止商业用途转载。持像php一样的public, prot【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】ected, private类型的属性或本文作者:唐霜,转载请注明出处。【转载请注明来源】方法,其实我比较期待的是私有属性,因为我【本文首发于唐霜的博客】【本文受版权保护】们在类里面定义的所有属性,都不得不暴露给著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】外部,虽然可以使用修饰符@(修饰符用的少【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】,不在本文介绍范围内)实现隐藏,但是还是著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】很麻烦。我希望得到的效果如下:
【本文受版权保护】转载请注明出处:www.tangshuang.net原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。// 注意,下面这种写法会报错,我只是用来阐述自己的想法class Person {
var name; // public
var age;
var sex;
let mother; // private
let father;
let telphone;
// ...}var sony = new Person('Sony',12);console.log(sony.name); // Sonyconsole.log(sony.father); // undefined
在类的作用域范围内,使用var或let进著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】行声明,这显得很尴尬,因为在php里面用【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。var声明表示public,而如果用le【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】t声明,表示仅在class这个{}花括号未经授权,禁止复制转载。【版权所有,侵权必究】的块级作用域有效,所以很自然的:
本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。- 使用var声明表示外部可见,可以在外部进本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】行修改 【未经授权禁止转载】原创内容,盗版必究。【原创不易,请尊重版权】原创内容,盗版必究。
- 而使用let声明,对外部不可见,但内部可未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。以用this.father获取和修改 转载请注明出处:www.tangshuang.net【版权所有,侵权必究】
这只是我的一种想法,人微言轻,根本不可能转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。被别人接受。都是前端,差距咋就那么大??
著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。目前解决这种私有属性的方法主要是通过Sy【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。mbol(Symbol也是ES6新增的特本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。性),具体请参考这里和这里。
【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】
继承
ES6里面,类的继承变得超级简单,几乎和【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netphp语法一摸一样:
【原创不易,请尊重版权】【作者:唐霜】class Man extends Person {}var ken = new Man('Ken',22);
Mixin,继承于多个类
在Javascript里面比在Java里【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】面方便的多,Java里面只允许继承于一个【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。父类,当然,在Javascript里面,未经授权,禁止复制转载。【本文首发于唐霜的博客】默认是只能继承一个类,但是由于Javas【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.netcript里面property的便捷性,转载请注明出处:www.tangshuang.net原创内容,盗版必究。继承于多个类其实只需要套路一下就可以了:著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。先通过某种方法构造,从多个类里面挑出需要本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。的方法,把这些方法集中到某一个临时类身上【原创内容,转载请注明出处】【转载请注明来源】,再让你需要的类去继承这个临时类。
原创内容,盗版必究。【版权所有,侵权必究】总结
上面这些提到的点,是我自己觉得牛逼闪闪的【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。地方,是我经常用到的,当然,还有Gene【转载请注明来源】【版权所有,侵权必究】rator,Symbol,async,s【版权所有,侵权必究】未经授权,禁止复制转载。et/map等都非常重要,是ES6里面的【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。更牛逼闪闪的地方,但是因为使用到的频率于【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。我而言,主要是这些,所以我把它们拎出来。
【版权所有,侵权必究】【原创内容,转载请注明出处】【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。总体感觉上,ES6对Javascript【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。的升级,是为了适应新的编程环境而来的大动转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】作,主要包括:
【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】- node的大行其道 著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】【本文首发于唐霜的博客】
- 以Javascript作为开发语言的大型本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】项目的爆发 【作者:唐霜】【版权所有】唐霜 www.tangshuang.net
- 浏览器的混乱(谷歌这家霸道的公司) 【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】
而且还有一点感受就是,各个语言之间的语法本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。糖趋于统一,比如数组:
【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。// php$a = [];// javascriptvar a = [];
在php5.3之前,并不支持这种写法,就未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】像Javascript在ES6之前不支持本文作者:唐霜,转载请注明出处。【本文受版权保护】类的写法一样。语言之间的语法糖趋于统一,【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】从某种角度讲是编程世界里面一种默认甚至公【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。认的原则。我想,如果让每一门语言的创始人【作者:唐霜】本文版权归作者所有,未经授权不得转载。重新开发这门语言,他们写出的语法糖可能会未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。非常接近,甚至连语法也会接近,只不过由于本文作者:唐霜,转载请注明出处。【未经授权禁止转载】历史的原因,你不可能让php里面的对象采本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net用.点操作符来调用方法,也不可能让Jav【未经授权禁止转载】【未经授权禁止转载】ascript中的遍历临时变量前加一个&本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】amp;来表示地址引用。
【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】【原创内容,转载请注明出处】但是,如果世界上只有一门语言,这个世界将转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net黯淡无光。
【原创不易,请尊重版权】【原创不易,请尊重版权】

