1. js中let、var、const定义变量区别与方式

1 声明语法

var upperA = 'A';

let upperB = 'B';

const upperC = 'C';

只声明不初始化的结果,【 const定义的常量不可以修改,而且必须初始化

// var 声明变量

var upperA;

console.log('打印大写的A:%s', upperA);

// 结果:打印大写的A:undefined

// let 声明变量

var upperB;

console.log('打印大写的B:%s', upperB);

// 结果:打印大写的B:undefined

// const 声明常量

const upperC;

console.log('打印大写的C:%s', upperC);

// 错误:SyntaxError: Missing initializer in const declaration

声明后值是否可修改,【 const定义的常量不可以修改,而且必须初始化

// var 声明变量初始化并修改值

var upperA = 'A';

console.log('打印upperA:%s', upperA);

// 结果:打印upperA:A

upperA = 'LetterA';

console.log('打印upperA:%s', upperA);

// 结果:打印upperA:LetterA

// let 声明变量初始化并修改值

var upperB = 'B';

console.log('打印大写的B:%s', upperB);

// 结果:打印upperB:B

upperB = 'LetterB';

console.log('打印大写的B:%s', upperB);

// 结果:打印upperB:LetterB

// const 声明常量初始化并修改值

const upperC = 'C';

console.log('打印upperC:%s', upperC);

// 结果:打印upperC:C

upperC = 'LetterC';

console.log('打印upperC:%s', upperC);

// 错误:TypeError: Assignment to constant variable.

2 变量提升

浏览器在运行代码之前会进行预解析,首先解析函数声明,定义变量,解析完之后再对函数、变量进行运行、赋值等

不论var声明的变量处于当前作用域的第几行,都会提升到作用域的头部

var 声明的变量会被提升到作用域的顶部并初始化为undefined,而let声明的变量不会被提升到作用域的顶部

console.log('打印upperA:%s', upperA);

// 结果:打印upperA:undefined

console.log('打印upperB:%s', upperB);

// 错误:ReferenceError: upperB is not defined

var upperA = 'A';

let upperB = 'B';

3 是否允许重复声明同一个变量

var允许在相同作用域内,重复声明同一个变量,后面声明的变量会覆盖前面声明的变量

let不允许在相同作用域内,重复声明同一个变量

var upperA = 'A';

let upperB = 'B';

// 重复声明

var upperA = 'LetterA';

let upperB = 'LetterB';

console.log('打印upperA:%s', upperA);

console.log('打印upperB:%s', upperB)

// 错误:SyntaxError: Identifier 'upperB' has already been declared

4 作用域

在ES6之前,我们都是用var来声明变量,而且JS只有函数作用域和全局作用域,没有块级作用域,所以{}限定不了var声明变量的访问范围

{

var upperA = 'A';

}

console.log('打印upperA:%s', upperA);

结果: 打印upperA:A

// ---------- ES6新增的let,可以声明块级作用域的变量。----------

{

let upperB = 'B';

}

console.log('打印upperB:%s', upperB);

// 错误: ReferenceError: upperB is not defined

5 let配合for循环的独特应用

let非常适合用于 for循环内部的块级作用域。

JS中的for循环体比较特殊,每次执行都是一个全新的独立的块作用域,用let声明的变量传入到 for循环体的作用域后,不会发生改变,不受外界的影响。

for (var i = 0; i <10; i++) {

setTimeout(function() { // 同步注册回调函数到 异步的 宏任务队列。

console.log(i); // 执行此代码时,同步代码for循环已经执行完成

}, 0);

}

// 输出结果:10 共10个

// 这里面的知识点: JS的事件循环机制,setTimeout的机制等

// ---------- 如果把 var改成 let声明:----------

// i虽然在全局作用域声明,但是在for循环体局部作用域中使用的时候,变量会被固定,不受外界干扰。

for (let i = 0; i < 10; i++) {

setTimeout(function() {

console.log(i); // i 是循环体内局部作用域,不受外界影响。

}, 0);

}

// 输出结果:0 1 2 3 4 5 6 7 8 9

相关推荐
dangdang___go14 分钟前
文件操作c语言
c语言·开发语言
卓码软件测评14 分钟前
第三方软件检测机构:【利用测试工具Postman测试沙箱:在Tests标签中编写健壮的质量检查逻辑测试脚本】
javascript·node.js·postman
塔能物联运维17 分钟前
设备断网时数据丢失,后来启用本地缓存+异步重传队列
java·开发语言·缓存
魂祈梦26 分钟前
前端下载多个文件/浏览器批量下载文件
前端·浏览器
天涯路s31 分钟前
qt怎么自定义日志
开发语言·qt
谎言西西里32 分钟前
彻底搞懂 JavaScript 的 this:从陷阱到解决方案
javascript
小明记账簿_微信小程序33 分钟前
手写一个webpack插件(plugin)
前端
Evand J36 分钟前
【自适应IMM】MATLAB编写的创新多模型,基于CA/CT双模型和观测自适应。二维平面目标位置估计,带误差统计特性输出,附代码下载链接
开发语言·matlab·ekf·imm·交互式多模型
我命由我1234539 分钟前
微信小程序 - scroll-view 的一些要点(scroll-view 需要设置滚动方向、scroll-view 需要设置高度)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
7哥♡ۣۖᝰꫛꫀꪝۣℋ41 分钟前
Spring IoC&DI
java·开发语言·mysql