今天来说说es6的语法,最基础的也就是var,let,const 的用法与区别了,我们来看看他们之间的恩怨情仇。
首先来说说var,这个只要是学过js的都知道,它是用来声明一个变量的,但是它在开发中也会遇到一些问题,比较难解决。先来看看下面的代码:

 
var str="hello world"; ​ function testVar(){   var str="hello"; } testVar();
console.log(str);
这段代码的结果是 "hello world",这说明在var
申明的变量,即使是同样的名字,在不同的块中,在外层块中的变量优先级更高,也就是说,在外层优先使用并且只能使用当前块中的变量;而在他的内部块中的变量,比如说这个函数里面的str,他其实也是优先使用块内的str变量,会屏蔽掉外面的str变量,这是一点。再来看看下面一段代码
function variableHoisting(){   if(condition){     var test="hello javaScript";
  }else{     console.log(test)     //
这里可以访问到test,但是它是undefined,因为初始化为它赋值成了undefined   }   //这里也可以访问到test }
可能你会感到奇怪,我的var 申明的变量在if 代码块里面,为什么我的else里面也能访问呢,其实上面这段代码相当于下面这段代码

 
function variableHoisting(){   var test;   if(condition){     test="hello
javaScript";   }else{     console.log(test)     //
这里可以访问到test,但是它是undefined,因为初始化为它赋值成了undefined   }     //这里也可以访问到test }
现在知道了吧?这就是所谓的变量提升,我在if里面申明的变量,其实浏览器在预解析的时候就对var
,以及function关键字的变量或者方法进行了处理,处理后的代码就是上面这段代码(当然,我之前讲过一篇函数声明与函数表达式的区别,你可以看看,你会知道更多。)看到这里,也许你不会感觉var
有什么不好的地方,再往下看看:

```javascript
var funcs = []; for (var i = 0; i < 10; i++) {   funcs.push(function() {
    console.log(i);   }); } funcs.forEach(function(func) {   func(); // 输出数值
"10" 十次 });

可能你想的是输出0,1,2,3,4,5,6,7,8,9但是这不是正确答案,这只能输出10个10,为什么呢?因为循环完成过后,i已经是10了,再次调用的时候,这个i值在每次迭代过程中共享了。
下面我们就来引入一下let,以及const。let 也是用来申明变量的,但是他申明的变量是块级作用域,什么意思呢,看下面
function testLet(){   if(condition){     let str="hello let"   }else{     //
这里访问不到str   }     //这里也访问不到str }
 






看了上面,你也许就知道了什么是块级作用域,也就是一个大括号嘛,括号里面就是一块。用let申明的变量是没有之前所说的变量提升这一说的,所以在外部块里面是访问不到let申明的变量的。这样,之前说var缺陷的哪一块代码经过小小的改变就能正常输出0..9了,你看看
var funcs = []; for (let i = 0; i < 10; i++) { funcs.push(function () {
console.log(i); }); } funcs.forEach(function (func) { func(); // 输出数值 0-9 });
 

这就是let,与var的一个小区别,当然如果说你申明变量的时候不指名是用的var,还是let,编译的时候会将这个变量解析为var申明的变量。

不管是var,还是let,他们是不能重复申明的,比如像下面这样
var str="var"; let str="let";
这样是会报错的,编译的时候,不能重复定义。


然后就是const了,这个其实就是常量的单词的英文缩写(constant),没错,这是用来申明一个常量的。什么事常量呢,顾名思义,就是一旦赋值就不能再改变了。比如说:

 
const MAX=3.1415926; MAX=3.14;
 

这样是不行的,会报错,常量不能改变的。来看看const的循环,在最基础的for -i的循环里面,他是会报错的,运行一次过后就会报错,但是在for-in
循环里面他是不会报错的,当然在for-of循环里面也不会

 
var funcs = [], object = {   a: true,   b: true,   c: true }; // 不会导致错误 for
(const keyin object) {   funcs.push(function () {   console.log(key);   }); }
funcs.forEach(function (func) {   func(); // 依次输出 "a"、 "b"、 "c" });
 

这样是不会报错的,来看看究竟是为什么呢?

上面说了,const申明的变量是不能改变的,但是,我们试试申明一个对象呢,然后改变对象里面的属性的值。

 
const object={ name:"学习笔记", age:18 } console.log(object.name) ​ object.name
="hello world" console.log(object.name)
 

这段代码,第一个会打印出来“学习笔记”,第二个会打印出来“hello
world”,为什么呢?原因在这,其实,这段代码改变的不是object这个对象变量,而是这个变量的属性,知道了这个就不难理解为什么在for-in
,for-of循环里面,const不会报错了吧?如果对你有帮助的话,记得点个关注哦,如果你发现文中有错误,记得帮我指出来。

微信公众号




友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信