初识Es6

前端 专栏收录该内容
2 篇文章 0 订阅

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)}
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值