var和const和let的区别

简述:

1.前端的变量申明,可以用到var,ES6的const(衡量)/let(变量) 

2.在ES5用的都是var,到ES6之后,也就是2015年开始出现const/let.

var 不会报错,有声明提升,会显示undefined(一个变量未初始化);

     function show(falg){
 //	    var a;//**声明提升,初始化为undefined,函数体(作用域)的最前排
     	console.log(a);//undefined
    	if(falg){
    		var a ="111";
    		console.log(a);	//111
    	}else{
    		console.log(a);//undefined
    	}
    	
    }
    show(true);
    show(false);
    var a = "123";
    var a = "456";//覆盖,同名,let不会,要报错Identifier 'a' has already been declared(已被声明)。
    console.log(a);

const/let访问范围

    function show(falg){                          // JavaScript引擎在扫描代码发现变量               TDZ暂时性死区(有let申明)
  	console.log(a);//报错: a is not defined              //a                              放入(未申明引用报错)       
    	if(falg){//在第134行和第137行的大括号之间,
    		let a="111";
    		console.log(a);	// 111                      //a                               移除(已申明引用移除)
    	}else{
    		console.log(a);//报错: a is not defined     //a                               放入(未申明引用报错)
    	}
    	
    }
    show(true);
    show(false);

const/let不同作用于可同名,同一作用于不可同名;

    function show(falg){
    		let a="222";
//    		let a="333";//Identifier 'a' has already been declared
  	console.log(a);// 222
    	if(falg){
    		let a="111";
    		console.log(a);	// 111
    	}else{
    		console.log(a);// a is not defined
    	}
    	
    }
    show(true);
//    show(false);

二.var 和 const/let 的区别

1.const/let:声明变量,声明的是局部变量

用途及区别:ES6新增了let命令,用来声明变量,类似于var ,但是声明的变量只在let所在的代码块的内部有效

let不存在变量提升,这个要注意哟

  • 暂时性的死区(Temporal Dead Zone),简写为 TDZ:

只要块级作用域里存在let命令,它所声明的变量就绑定这个区域,不在受外部的影响

let 和 const 声明的变量不会被提升到作用域顶部,如果在声明之前访问这些变量,会导致报错:

console.log(typeof value); // Uncaught ReferenceError: value is not defined
let value = 1;

复制代码这是因为 JavaScript 引擎在扫描代码发现变量声明时,要么将它们提升到作用域顶部(遇到 var 声明),要么将声明放在 TDZ 中(遇到 let 和 const 声明)。访问 TDZ 中的变量会触发运行时错误。只有执行过变量声明语句后,变量才会从 TDZ 中移出,然后方可访问。

  • 不允许重复声明

内部的数据有了let声明过之后不允许重复声明

for循环的处理

var funcs = [];
for (var i = 0; i < 3; i++) {
//for (let i = 0; i < 3; i++) {
	console.log(i);
  funcs[i] = (function(i){
      return function() {
          console.log(i);
      }
  }(i))
}
funcs[0](); // let输出的结果是0;var输出的结果是3

for (var i = 0; i < 3; i++) {
     var c = "123";//一次123
//   let c = "123";//三次123

     console.log(c);
}

使用let

var funcs = [];
for (let i = 0; i < 3; i++) {
  funcs[i] = function () {
      console.log(i);
  };
}
funcs[0](); // 0
funcs[1](); // 1
funcs[2](); // 2

分解:

(let i = 0) {
  funcs[0] = function() {
      console.log(i)
  };
}

(let i = 1) {
  funcs[1] = function() {
      console.log(i)
  };
}

(let i = 2) {
  funcs[2] = function() {
      console.log(i)
  };
};

let value = 1;
console.log(window.value); //undefined

再比较const和let的区别:

1.const定义衡量:
不可以重新赋值,但是可以给对象的属相重新赋值.

const data = {
  value: 1
}
// 没有问题
data.value = 2;
data.num = 3;
 报错
data = {}; // X   Uncaught TypeError: Assignment to constant variable.(分配恒定的变量)

优点:const 意味着该标识符不能被重新赋值。
让它在代码中的使用尽可能的清晰。使用一个变量对应代表一个东西.

2.let 在定义后可能还会修改,可变,越来越多的被使用在循环和算法上面。

ES6兼容性问题?bable转义成ES5,用例:

需要安装 ES5的bable: npm install babel-core@5

C:\Users\Administrator\node_modules\babel-core

目录里面我们找到babel的浏览器版本browser.js(未压缩版)和browser.min.js(压缩版)
我们把browser.min.js引入(文件位置的路径要确保正确)。并且设置第二个script标签的type为”text/babel”。

babel转义具体实现:

if (false) {
  let a = 1;
//  var a=1;//如果直接将let改成var,直接编译成 var,打印的结果肯定是 undefined
  var _a = 1;//然而 Babel 很聪明,它编译成了内层变量名不一致
}
console.log(a); // Uncaught ReferenceError: a is not defined

// const 的修改值时报错,以及重复声明报错怎么实现的呢?
// 其实就是在编译的时候直接给你报错
posted @ 2018-12-28 17:14  missme_lina  阅读(726)  评论(0编辑  收藏  举报
喜欢就“全力以赴”,不对盘就“在下告辞”,原则是“可以辛苦,但不能委屈”。