初识Es6

Posted 2021-05-17 LeYi

1. let 和 const 是什么

声明变量或者声明常量

let 代替var，声明变量

const 声明常量 （constant的缩写）

2. let 和 const 的用法

var username = \'LiHao\';
let age = 18;
const sex =\'male\';
console.log(username, age, sex); // LiHao 18 male
 // 为上面的变量赋值
 username = \'LeYi\';  //可以赋值
 age = 20; //可以赋值
 sex = \'female\'; //报错 不可以给一个常量重新赋值

var 、let声明的就是变量，变量一旦初始化之后，还可以重新赋值

const声明的就是常量，常量一旦初始化，就不能重新赋值，否则就会报错

3.为什么需要const

const 就是为了那些一旦初始化就不希望重新赋值的情况设计的

4.const 的注意事项

4.1 使用const声明常量，一旦声明，就必须立即初始化，不能留到以后赋值

const sex;
sex = \'male\';  //报错  一旦初始化就必须赋值


const sex = \'male\'; // 正确操作

4.2 const 声明的常量，允许在不重新赋值的情况下修改它的值

基本数据类型中不可重新修改值

const sex = \'male\';
sex = \'female\'; //报错 

引用数据类型中可以修改值

const person = {username:\'LiHao\'};
person.username = \'LeYi\'; //可以修改值

5. let、const 与 var 的区别

5.1 重复声明

已经存在的变量或者常量，又声明了一遍

var 允许重复声明， let、const 不允许

var a = 1;
//………………
var a = 2; //并不会报错

const a = 1;
const a = 2; //报错（let和const一样，不能重复声明）

function func(a){
    let a = 1; //也会报错，只要变量或者常量存在，然后又声明，就会报错
}
func();

5.2变量提升

var 会提升变量的声明到当前作用域的顶部

console.log(a); // 报错
---------------------------
console.log(a);  //undefined
var a = 1;  
	// ⬇⬇⬇⬇⬇⬇⬇⬇ 相当于
var a ;
console.log(a); //undefined
a = 1;
    
// let 、const 不存在变量提升 养成良好的编程习惯  对于所有的变量或常量，做到先声明，后使用

5.3 暂时性死区

只要作用域存在let、const，它们所声明的变量或常量就自动“绑定”这个区域，不再受到外部作用域的影响

let a = 2;
let b = 1;
//函数只有被调用的时候才会形成函数作用域
function func(){
    console.log(b);// 1 不会报错
	console.log(a); //报错
    let a = 1; // a绑定了函数作用域，所以当前作用域找不到变量a，也不会向外部去找
}
func();

5.4 windows 对象的属性和方法

全局作用域中，var 声明的变量，通过function 声明的函数，会自动变成windows 对象的属性或方法 let const 不会

var age = 18;
function add(){
	console.log(window.age); // 18
	console.log(window.add === add); //true
}


let age = 18;
const add = function (){
    console.log(window.age); //undefined 
    console.log(window.add === add); // false
}

5.5 块级作用域

5.5.1 什么是块级作用域

var 没有块级作用域

for (var i = 0; i< 3; i++){	}console.log(i);  // 3  这里之所以可以打印i  是因为var没有块级作用域

let 、const 是有块级作用域的

for (let i = 0; i< 3; i++){	}console.log(i);  // 报错  i 未定义 这个i只是for循环的块级作用域中的变量

5.5.2作用域链

作用域链：内层作用域=>外层作用域=>.....=>全局作用域

5.5.3 有哪些块级作用域

{	let age = 18;	console.log(age); // 18}	console.log(age); //报错 //下面是块级作用域{}for(){}while(){}do{}while()if(){}switch(){}//必须配合let 和const使用function(){} //函数作用域const person = {} //对象不构成作用域

6.let和const的应用

1.有三个按钮，点击之后显示对应的index值

var btns = document.querySelectorAll(\'.btn\');for(var i =0; i < btns.length; i++){	btns[i].addEventListener(\'click\',function(){      console.log(i); // 无论点击那个都是打印的3      },flase)}//闭包var btns =     for(var i =0; i < btns.length; i++){	(function(index){  btns[index].addEventListener(\'click\',function({      console.log(index); // 点击按钮打印对应的index 0 1 2     },flase)    })(i);}//使用 let/constlet btns = document.querySelectorAll(\'.btn\');for(let i =0; i < btns.length; i++){ //这个时候就是三个块级作用域，分别是 i = 0 、i = 1 、i = 2	btns[i].addEventListener(\'click\',function(){      console.log(i); // 点击按钮打印对应的index 0 1 2       },flase)}