ES6 let 和const 区别以及var和let 区别

一、let 和const

1、相同点:

 只在声明所在的块级作用域内有效。

   声明不提升 只能在声明的位置后面使用。

 不可重复声明。

2、不同点:关于基本类型组成的变量和常量

let声明的变量可以改变,值和类型都可以改变;const声明的常量不可以改变,这意味着,const一旦声明,就必须立即初始化,不能以后再赋值。


const i ; // 报错,一旦声明,就必须立即初始化
const j = 15;
j = 20; // 报错,常量不可以改变

数组和对象等复合类型的变量,变量名不指向数据,而是指向数据所在的引用地址。const只保证变量名指向的引用地址不变,但是并不保证该地址的源数据不变。所以引用类型的常量可以改变,切只能修改源数据。

const arr = [];
arr = [1,2,3];
// 报错,[1,2,3]与[]不是同一个地址  这就是为什么声明后要立即赋值,否则地址发生了变化

const arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
// 不报错,变量名arr指向的地址不变,只是数据改变
console.log(arr.length); // 输出:3

若想让定义的对象或数组的数据也不能改变,可以使用object.freeze(arr)进行冻结。冻结指的是不能向这个对象或数组添加新的属性,不能修改已有属性的值,不能删除已有属性。

const arr = [];
Object.freeze(arr);
// 不报错,但数据改变无效
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
console.log(arr.length); // 输出:0

二 var和let 区别:

在es5中var定义的变量存在变量声明提升,es6中使用的let不存在变量提升:

1 console.log(i);
2 var i = 10;  //undefined 为什么不是10 因为只是声明提升而已
3 
4 console.log(s);
5 let s = 20;  //ReferenceError: can't access lexical declaration `s' before initialization

es5中无论if语句是否执行,在if语句内的函数声明都会提升到当前的作用域的顶部而得到执行,es6支持块级作用域,无论是否进入if,内部的函数都不会影响到外部的函数

//es5环境
 2 function f(){
 3   console.log('outside');
 4 }
 5 if(true){                提升到当前的作用域的顶部而得到执行
 6   function f(){
 7     console.log('inside');
 8   }
 9 }
10 
11 f(); //inside
12 
13 
14 //es6环境
15 function d(){
16   console.log('outside');
17 }
18 if(true){
19   function d(){
20     console.log('inside');
21   }
22 }
23 
24 d(); //outside

我们最常遇到的循环事件绑定i产生的闭包问题,是因为i绑定在全局,每次访问都会取到全局的i的值,所以访问哪个元素,得到的i都是循环体最后一轮的i。我们通常的解决办法是借助IIFE。在es6中let定义的i只在循环体内有效,所以每次循环i都是一个新的变量,于是会产生正常的输出:

 1  //使用var
 2 var arr1 = [];
 3 for (var i = 0; i < 10; i++) {
 4     arr1[i] = function() {
 5         console.log(i);
 6     }

      //  (function(i){   //这里的i类似形参  可以使用IIFE来执行
      //         arr[i].onclick = function (){  
      //           console.log(i); 
      //     } 
      //   })(i);  
 7 }
 8 
 9 arr1[5](); //10
10 arr1[8](); //10
11 
12 //使用let
13 var arr2 = [];
14 for (let i = 0; i < 10; i++) {
15     arr2[i] = function() {
16         console.log(i);
17     }
18 }
19 
20 arr2[5]();  //5
21 arr2[8]();  //8

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值