ES6基本语法之let和const

ES6基本语法之let和const

  1. var可以重复声明
	var a = 12;
	var a = 5;
	alert(a) //5
  1. var无法限制修改
    如:PI = 3.1415;
  2. var没有块级作用域
{
 
}

像:

 if(){

}
for(){

}

这都是块级作用域,在这里面定义的变量则在块级域外面是没法使用的。

  1. let和const不能重复声明
let a =12;
let a=5;
alert(a)//报错
const a =12;
const a=5;
alert(a)//报错

5.let是可以重复修改的,但是const是常量,是不能重复修改的。

let a = 12;
a = 5;
alert(a); //5
const a = 12;
a = 5;
alert(a);//报错

6.块级作用域

if(true){
let a = 12;
}
alert(a);//报错,a is not defined

if(true){
const a = 12;
}
alert(a);//报错,a is not defined

语法快不仅仅是iffor等这些,如下面的也是块级作用域:

{
let a = 5;
console.log(a) //5
}
console.log(a); //报错,a is not defined

7.块级作用域的用法:
现在有三个button,分别点击,传统的写法是:

window.onload = function(){
var aBtn = document.getElementByTagName("input");
   for(var i=0;i<aBtn.length;i++){
    	aBtn[i].onclick = function(){
        alert(i) 
      }
   }
}

结果每次弹出的都是3,然后我们采用函数作为块级作用域的方式在外边增加一层,如下:

window.onload = function(){
var aBtn = document.getElementByTagName("input");
   for(var i=0;i<aBtn.length;i++){
		(function(i){
			aBtn[i].onclick = function(){
             alert(i) 
         }
		})(i)
   }
}

虽然问题解决了,但是如果用现在ES6的let,本身就是在块级作用域中有效,更加方便;

window.onload = function(){
var aBtn = document.getElementByTagName("input");
   for(let i=0;i<aBtn.length;i++){
			aBtn[i].onclick = function(){
             alert(i) 
         }
   }
}

let命令

1、let用法类似var,用于声明变量。但是所声明的变量只在let命令所在的代码块内有效。
2、不存在变量提升,所以变量一定要在声明后使用,否则报错。
3、暂时性死区。只要块级作用域内存在let命令,它所声明的变量就“绑定”在这个区域,不再受外部的影响。比如 :

var a = 1;

if(true){

a = 2; //报错

​let a;

}

​上面的代码中存在全局变量a,但是块级作用域中let又声明了一个局部变量a,导致后者绑定这个块级作用域,所以在let声明变量前,对a赋值会报错。

4、不允许重复声明。let不允许在相同的作用域内声明同一变量。

function​( ){

let a = 1;

var a =2;

}   //报错​

const命令​

1、const用来声明常量。一旦声明其值不能改变。这就意味着const一旦声明常量,就必须初始化,不能留到以后赋值。
2、与let命令相同,只在声明所在的块级作用域内有效。
3、const命令声明的变量也不提升,同样存在暂时性死区,只能在声明后使用。同样不可重复声明变量。
4、对于复合类型的变量,变量名不指向数据,而是指向数据所在的地址。const命令只是指向的地址不变,并不保证改地址的数据不变,所以将一个地址声明为变量需要非常小心。

const foo = {};

foo.prop = 123;

foo= { };// 报错

上面的代码,常量foo存储的是一个地址,指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加属性。如果想使对象不可变,可以将对象冻结,使用object.freeze方法。

5、跨模块常量的写法。

//constants.js模块

export const A = 1;

export const B = 2;

export const C = 3;

//text1.js模块

import* as constants from './constants';

console.log(constants.A ); // 1​

console.log(constants.B ); // 2

//text2.js模块

import{A, B} from './constants';

console.log(constants.A ); // 1​

console.log(constants.B ); // 2

 

ES5只有两种声明变量的方式:var命令和function命令。ES6为其添加了let命令和const命令。后面还会​提到另外两种声明方法:import命令和class命令。所以ES6一共有六种声明变量的方法。

猜你喜欢

转载自blog.csdn.net/weixin_42535010/article/details/106504228