var与let的区别

var与let的区别

前言:
  在没接触Es6之前,我们在js中声明都是通过var来声明变量的,var声明变量虽说方便,但是,又有一些自己的诟病,下边来说一说,这三个的区别!

var

  var相信大家都不陌生,前端在日常编程中,谁也离不开他,他的合理运用,让我们编写出适合自己的,适合浏览器的程序!

console.log(a)//undefind
var a=2;

  都知道我们前端程序都是自上而下执行,为什么他没发现a这个变量他的值变成了undefind,这就说到了我们var自带的变量提升,在没有声明这个变量之前,你这个变量具有全局的属性,都会进行变量提升!
它的实际样子是这样的

var a;
console.log(a)//undefind
var a=2;

大家这个样子就看懂了吧!

var与let
{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

  大家都看到了,var声明的b在花括号外边打印出来,而let却报了一个错误!这就是let与咱们var 的区别,它的变量是区域的,也就是区域变量!

//在来看一个例子
if (true) {
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp;
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

上面代码中,在let命令声明变量tmp之前,都属于变量tmp的“死区”

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。

为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上边这个变量如果用var声明的话会打印出10,而let声明的还是5,这就是块级作用域吧!都知道咱们的var有函数作用域域全局全用域,来咱们的let是块级作用域!他带来了很多好处!

var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i);//5

函数在执行完之后泄露成了全局变量,而用let声明的则没有这一点

let s = 'hello';

for (let i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i);//Uncaught TypeError: i is not a function

es6新增的let变成了块级可以防止内存泄露。。。好处还是很多的,这就是let与var的一些区别!

原文地址:https://www.cnblogs.com/chenxua/p/7149121.html