ES6语法:var、let、const的区别详解

更新日期: 2020-02-10阅读: 1.6k标签: 区别

今天来说说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 key in 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不会报错了吧?


链接: https://www.fly63.com/article/detial/8170

AR / MR / VR / XR有什么区别?

VR能让人完全沉浸在虚拟环境中;AR能创建一个叠加在虚拟内容的世界,但不能与真实环境交互; MR则是虚拟与现实的混合体,它能创造出可以与真实环境交互的虚拟物体。最后,XR则是包括三种“现实”(AR,VR,MR)的术语。

详解call bind apply区别/使用场景/es6实现/es3实现

call,apply,bind的区别:apply接收数组 func.apply(obj, [arus]),call一连串参数 func.call(obj, param1, param2....),bind返回一个函数 func.bind(obj,param...)(parms...)

理解screenX,clientX,pageX,offsetX,pageXoffset的区别

event.screenX、event.screenY鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性,event.clientX、event.clientY鼠标相对于浏览器可视区域的X,Y坐标

css之word-wrap和word-break的区别

对于英文单词,如果有一个连写且长度很长的英文单词,在第一行显示不下的情况下,浏览器默认不会截断显示,而是把这个单词整体挪到下一行。但是当整体挪到下一行还是显示不完全该肿么办呢?

url 、src 、href 的区别

URL统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL

Js插件、 组件、类库、框架的区别

框架和类库等概念的出现都是源于人们对复用的渴望。“不要重复发明轮子”,成了软件界的一句经典名言。从最初的单个函数源代码的复用,到面向对象中类的复用(通常以类库的形式体现)

*.min.js跟*.js的区别

js是JavaScript 源码文件, .min.js是压缩版的js文件。减小体积 .min.js文件经过压缩,相对编译前的js文件体积较小,传输效率快。防止窥视和窃取源代码

PTN与SDH的区别?

SDH是基于TDM技术,主要用于传输语音,此外采用GFP封装来传输IP包,物理介质为光纤。PTN是采用DWDM技术,主要用于传输IP包、以太网帧,此外采用MPLS-TP技术来实现PWE3伪线

html中src与href的区别

写代码的时候就经常把这两个属性弄混淆,到底是href还是src,href表示超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系,src表示引用资源,表示替换当前元素,用在img,script,iframe上

Js绑定事件的两种方式的区别

运行后发现,点击后src没有变化,调试发现,这里this是window对象,而不是img标签对象。顿时感觉有点迷惑,因为以前绑定事件中,拿标签属性都是用的this,怎么这里不对了?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!