设为首页 收藏本站
查看: 1467|回复: 0

[经验分享] ES6 — 新增关键字let、const

[复制链接]

尚未签到

发表于 2017-2-25 10:34:14 | 显示全部楼层 |阅读模式
ECMAScript 是什么?
首先,我们都知道JavaScript由三部分组成:ECMAScript,DOM,BOM;
其中的ECMAScript是Javascript的语法规范。
ECMAScript定义了很多东西,如:

  • 语法-----解析规则,关键字,语句,声明,操作等
  • 类型-----布尔型,数字,字符串,对象等
  • 原型和继承
  • 内置对象,函数的标准库----------JSON, Math, 数组方法,对象方法等


浏览器兼容:
  目前Google和Firefox浏览器对ES6新特性的兼容最友好。而IE9则有问题。对于不兼容的浏览器,我们可以只用转换工具如,babel。我们使用nodejs的包管理工具npm来安装babel。在我们的js文件前先引入 browser.min.js 。


(1)ES6中新增的let关键字
之前我们声明一个变量时,都是使用关键字var,那新增加的let和var有什么不同呢?

var的不足之处一:
var arr=[];
for (var i=0;i<10;i++){
     arr=function(){
         console.log(i);
     };
}
arr[8]();   // console.log(i);  的结果为 10

同样的换成 let之后就没问题:

var arr=[];
for (let i=0;i<10;i++){
     arr=function(){
         console.log(i);
     };
}
arr[8]();   // console.log(i);  的结果为 8

这是由于,本来的js是没有块级作用域的,用var定义i时,虽然在for循环中定义,但在执行时,依然会被提升。当执行arr[8]()时,循环已经完成,这时的i=10;所以再去执行 arr[8]()时,console.log(i),i=10;

而是用let定义i,i就只能存在与for循环的块级作用域,不会被提升。
(块,只的是 一组{}之间的部分。)

var的不足之处二:
也就是变量提升。var 会被提升定义;let不会。
var a=1;
(function(){
     alert(a);
     var a=2;
})();   //undefined 表示只声明,为赋值;

同样的换做let之后:

var a=1;
(function(){
     alert(a);
    let a=2;
})();   //报错: Uncaught ReferenceError: a is not defined(…)

这是因为,用let定义后,变量a的定义不会被提升。且在块级作用域内封闭,不会受到外界a的影响。在使用a(alert(a))时,a尚未定义,所以报错。因此,在使用let时,一定注意,变量要先声明后使用。

使用let时注意:
注意一: 在同一块级作用域下,不能重复声明同一个变量。
{
     var a=1;
     let a=2;
}   //报错
{
     let a=1;
     let a=2;
}  //报错

注意二:在函数内,不能用let重新声明函数的参数。
function say(word){
     let word='hello';
     alert(word);
}
say('hi');  //报错

(2)ES6中新增的const关键字
const是常量(contsant)的缩写,与let相比,const专门用来声明一个常量。
特点:

  • 不可修改

     const name='a';
     name='b';   //报错

  • 块级作用域

     if(1){
          const name='a';
     }
     alert(name);  //报错

  • 不存在变量提升,必须先声明后使用

     if(1){
   alert(name);  //报错

          const name='a';
     }  

  • 不可重复声明同一个变量

     var name='a';
     const name='b';  //报错

  • 声明后必须赋值

     const name;   //报错

注意:当常量为一个对象时:
  const Person={'name':'a'};
  Person.name='b';
  Person.age='13';
  console.log(Person)  // {'name':b,'age':'13'};  输出正常。
这是由于const声明了一个引用类型的常量,使用的是传址赋值。也就是不修改地址,只修改地址中的值。






———————————————————————
参考公众号 :web前端教程

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-346940-1-1.html 上篇帖子: 聊聊asp.net中Web Api的使用 下篇帖子: windows 7下React Native环境配置
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表