首页 > 其他 > 详细

es6 let与var的区别详解

时间:2019-03-23 00:32:36      阅读:222      评论:0      收藏:0      [点我收藏+]
一、前言
说到做到,现在暂时放了放JS模式的读书笔记,打算好好看看ES6,毕竟出了这么久了,还是靠JS吃饭的,都不好好学JS新特性,确实说不过去,我本来是想当读书笔记去记录ES6,但是这个确实是属于边看边用边记忆的,所以还是零散的挑重点去记录吧。
二、let与var的区别
1.let 不能重复申明,var可以
这是最为简单最容易记忆的一点,当我们使用var申明,是可以反复申明同一个变量的,但并不推荐这个做,因为同名变量的创建对站在内存角度是无意义的,所以let的出现也是为了解决早期JS设计缺陷。
var a = 1;
var a = 2;//不会报错
let b = 1;
let b = 2;//报错

2.let会产生块级作用域,且只在自己的作用域内生效,var不受限制

什么是块级作用域?当我们在{}中使用了let或者const时,{}的范围就是一个块级作用域,此时let只能在{}中使用,外部无法访问。像这样:

{
  let a = 1;
  var b = 2;
}
console.log(a);//报错
console.log(a);//2

或者这样:

if(true){
  let a = 1;
  var b = 1;
}
console.log(a);
console.log(b);
2.1let与var在for循环中的不同表现
//for循环用var
var a = [];
for (var i = 0; i < 5; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[1]();//5
a[2]();//5
a[3]();//5
//for循环用let
var b = [];
for (let i = 0; i < 5; i++) {
  b[i] = function () {
    console.log(i);
  };
}
b[1]();//1
b[2]();//2
b[3]();//3

在明白上面2个循环的区别之前,我们先来理一理知识点,我们要知道,for循环中设置循环变量的部位其实是一个父作用域,循环体内部是个子作用域。

在父子作用域中同时使用let的情况下,两个作用域就是互不干扰的两个块级作用域:

{
  let a = 1;
  {
    console.log(a);//报错
    let a = 2;
    console.log(a);//2
  }
  console.log(a);//1
}

子作用域不使用let,还是可以正常继承父作用域,父也能读取子。

{
  let a = 1;
  {
    var b = 2;
    console.log(a);//1
  }
  console.log(a);//1
  console.log(b);//2
}

所以下面这个循环输出了三次echo,因为在子作用域中申明的i跟父作用域中的i可以说是完全不同的两个i;

for(let i = 0;i<3;i++){
  let i = ‘echo‘;
  console.log(i);
};//输出三次echo

但如果你将let改为var,你会发现只输出一次,因为没有了块级作用域,父子作用域共用了一个变量i,第一次循环后,子作用域的i被改为了echo,父作用域中i<3的判断无法通过,所以只输出了一次。

那么回头再看看最初的两个循环,为什么var申明输出了3个5,而let输出了1,2,3呢,尝试去理解,说到底还是块级作用域搞的鬼。

3.let不存在变量提升
变量提升可以说是var申明设计不严谨的一点,可能我们在开发中已经习惯申明一个全局变量,然后可以在申明前后都可以使用它,这很方便,但是不符合规范。
console.log(a);//undefined
var a = 1;
console.log(b);//报错
let b = 1;
4.let存在暂时性死域
当一个区域存在let申明时,这个区域就形成了一个封闭的作用域,在let申明前使用这个变量就会报错,也就是只能先申明再使用,这种语法也称为暂时性死域。
{
  let a = 1;
  {
    console.log(a);//报错
    let a =2;
  }
}

三、const申明的特点

可以理解为,let的特性const都有,不能反复申明,存在块级作用域,不存在变量提升,也有暂时性死域的特点。

与let区别在于,const申明的是一个常量,一旦申明就无法修改,let可以,var就更不用说了。

就这样去记忆吧。

es6 let与var的区别详解

原文:https://www.cnblogs.com/echolun/p/10575676.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!