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)}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。