当前位置:网站首页>let和const、let、const和var的区别
let和const、let、const和var的区别
2022-07-17 00:07:00 【禾木白】
文章目录
一、let命令
1. 基本用法
es6新增了let命令,是用来声明变量。用法与var类似,但是所声明的变量只在let命令所在的代码块内有效。

上图中,在代码块{}之中,分别用let和var声明了两个变量。然后再代码块之外调用这两个变量,let声明的变量报错,var声明的变量返回正确。表明,let声明的变量只在它所在的代码块有效。
for(let i = 0;i<10;i++){};
console.log(i); // ReferenceError: i is not defined
//上面代码中,let声明的i只在for循环体内有效,在循环体外使用会报错。
下面代码中分别用 let 和 var 去声明计数器 i,最后的输出结果是不同的。
var arr = [];
for (let i = 0; i < 10; i++) {
arr[i] = function () {
console.log(i);
};
}
arr[4](); // 4
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = function () {
console.log(i);
};
}
arr[4](); // 10变量 i 是用 var 命令声明的,在全局范围内有效,每次循环,全局的变量 i 都会发生变化。也就是说,数组arr中的每个成员里的 i 都指向了同一个 i(即为最后一轮的i的值),也就是10。
变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。

另外,for循环设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
上面代码正确运行,输出了 5次abc。这表明函数内部的变量i与循环变量i不在同一个作用域,有各自单独的作用域(同一个作用域不可使用 let重复声明同一个变量)。
即let声明的变量存在块级作用域,只在当前作用域内有效。
2. 不允许重复声明
let不允许在相同作用域内,重复声明同一个变量。var可以在相同作用域内重复声明。
{
let a = 10;
let a = 20;
}
//报错 Uncaught SyntaxError: Identifier 'a' has already been declared
{
var b = 10;
var b = 20;
} //不报错3.不存在变量提升
变量提升是指变量可以在声明之前使用,值为undefined。var声明的变量是存在变量提升的,在声明之前可以使用,不会报错。
{
console.log(str); //输出underfined
var str = 'var声明';
}
{
console.log(bar); // 报错ReferenceError
let bar = 'let声明';
}上面代码中,变量str用var命令声明,会发生变量提升,即脚本开始运行时,变量str已经存在了,但是没有值,所以会输出undefined。变量bar用let命令声明,不会发生变量提升。这表示在声明它之前,变量bar是不存在的,这时如果用到它,就会抛出一个错误。
即let声明的变量不存在变量提升,声明之后才可以使用,var存在变量 提升
二、const命令
1.基本用法
const声明一个只读的常量。一旦声明,常量的值就不能改变。
const str = '123';
str = '456';
//TypeError: Assignment to constant variable.
const name;
//SyntaxError: Missing initializer in const declaration
如上面代码所示,改变常量的值会报错。 const一旦声明变量,就必须立即初始化,不能留到以后赋值。只声明不赋值,就会报错。
即const用来声明一个常量,必须立即赋值。不可以改变它的值
如果const声明的是复合类型的数据(主要是对象和数组),变量指向的是所对应的内存地址 ,只能保证这个指针所对应得地址不变,至于它的内部元素是可变的。
const obj = {name:'小明'}
obj.age = 20;
obj = {name:'小小'}
// Uncaught TypeError: Assignment to constant variable.
obj;//{name:'小明',age:20}即const声明复合型常量,指向的地址不改变,其内部属性是可以更改的。
2.块级作用域
const的作用域与let命令相同:只在声明所在的块级作用域内有效。
{
const value= '123';
}
value; //VM2767:1 Uncaught ReferenceError: value is not defined即const声明的变量存在块级作用域,只在当前作用域内有效
3.不允许重复声明
const与let命令相同:同一作用域内不可以重复声明。
var message = 'hello';
const message = '1';
//SyntaxError: Identifier 'message' has already been declared即const不允许在相同作用域内,重复声明同一个变量
4.不存在变量提升
const与let命令相同:变量不可以在声明之前使用,会报错。
{
console.log(name);
const name="孝丽";
//Uncaught ReferenceError: Cannot access 'name' before initialization
}即const声明的变量不存在变量提升,声明之后才可以使用。
总结
let、const 和var有什么区别?
- let和var都是用来声明变量的。const是用来声明常量的。
- const声明时必须赋值,后面不可以改变它的值。声明的是复合型变量可以改变其内部子元素的值。
- let和const声明的变量存在块级作用域,只在当前作用域内有效。var不存在块级作用域。
let和const不允许在相同作用域内,重复声明同一个变量。var可以在相同作用域内重复声明。- let和const声明的变量不存在变量提升,声明之后才可以使用,否则会报错。var存在变量 提升,声明之前可以使用值为undefined。
边栏推荐
- Cve-2022-34265 Django extract & TRUNC SQL injection vulnerability recurrence
- (六)test命令
- Array Operations - judgment, de duplication, consolidation, expansion
- Uni app wechat applet - Mall (7) - Product Details
- MoveIt2——5.场景规划
- Understand PHP from [Fifth space 2021] easycleanup_ session
- Codeforces round #664C
- uni-app微信公众号(1)——网页授权登录
- Uni app wechat applet - Mall (3) - Mall Homepage
- Collection and summary of penetration test information
猜你喜欢
![[elementui El date picker date selector, the end time must not be earlier than the start time, and only the date of the specified number of days from the start time can be selected]](/img/73/af7ca3f670ffee18081b9ca6a9ccf6.png)
[elementui El date picker date selector, the end time must not be earlier than the start time, and only the date of the specified number of days from the start time can be selected]

Express中间件的分类及使用

uni-app微信小程序——商城(8)——订单详情

uni-app微信公众号(5)——新增、修改地址
![Understand PHP from [Fifth space 2021] easycleanup_ session](/img/fc/95332d488dd6096f3a3f6a9fb11644.png)
Understand PHP from [Fifth space 2021] easycleanup_ session

Assemblage stylisé de cartes de commutation auto - encapsulées

uni-app微信小程序——商城(6)——我的主页

Express项目创建以及其路由介绍

uniapp中text-indent不起作用,uniapp首行缩进不管用如何解决?

记一次用canvas做出腾讯云首页banner流光效果的经历
随机推荐
js替换字符串某个字符,js修改字符串中指定字符
列表懒加载和图片懒加载
Vue project deployment, cleaning cache
PCRE bypasses regular
The C Programming Language (2nd)--笔记--1.6
let和var的区别
uni-app微信小程序——商城(8)——订单详情
使用redis - zset做排行榜
Collection and summary of penetration test information
Express的使用方法,路由的匹配与使用
Promise的基本使用
使用leaflet仿原神提瓦特大地图制作日记
Day15 paging, filtering
“我的”Bug大全(转载)
(6) Test command
Uni app wechat official account (4) - address management page
JS get the suffix format of a file name
Single page application spa and multi page application MPa
JSX syntax
The C Programing Language-2nd--笔记--4.11.3