【vue-小知识】var、let 和 const之间的区别

文章目录

结论

  • 根据实际场景使用: 最小粒度使用命令
重复定义 修改值 变量提升(先使用后定义) 作用域
var 允许 允许 允许 全局
let - 允许 - 局部
const (常量) - - -

主要从

  • 是否可以重复定义变量名
  • 是否允许修改值
  • 是否具有变量提升
  • 作用域

这四个方面来进行介绍。

1、重复定义变量名

var:允许重复定义变量名

我先定义一个变量a,给它附上一个初始值,我们打印一下结果

之后我们对这个变量进行重复的定义,再打印一下结果
发现初始值被覆盖了
所以说var是可以重复定义变量名的。

let和const:不可以重复定义变量名

直接就报错了

2、修改值

var:允许修改值

首先我们定义一个变量给它附上一个初始值,然后对这个变量附上一个新的值。

我们打印一下这个变量的值,发现这个变量的值的确被修改了

let:允许修改值

const:不允许修改值,会报错

这是因为const所定义的变量是常量,是不允许被修改的。

3、变量提升

  • 通常:先定义变量,然后再去使用变量

  • 变量提升:可以让你先使用变量,之后再去定义变量

var : 支持变量提升

在使用a变量之前并没有定义这个变量.

是在使用之后才进行定义的。

但是整个代码依然能够运行。

但是它的结果似乎和我们的预期不太一样,它的结果是undefined。

  • 可以理解为做了如下的处理

这就是变量提升,是var所定义的变量特有的。

let和const:不支持,会报错

4、作用域

var : 全局变量

  • 默认全局变量
  • 缺省的定义是全局变量
js 复制代码
var hw = 'hello word';
console.log("hw=" + hw);
hwAll = "hello All";
console.log("hw=" + hw);
for (var index = 0; index < 1; index++) {
 var inCon = "inCon";
 console.log("index" + index+",hw=" + hw + ",inCon="+inCon);
}
console.log(",inCon="+inCon);

let: 局部变量

  • 仅在方法内有效
js 复制代码
for (let index = 0; index < 1; index++) {
    let inConLet = "inConLet";
    console.log("index" + index+",hw=" + hw + ",inConLet="+inConLet);
}
  • 如果不在作用域会报异常
js 复制代码
D:\vuecode\es6\hw.js:20
console.log(",inConLet="+inConLet);
                         ^

ReferenceError: inConLet is not defined
    at Object.<anonymous> (D:\vuecode\es6\hw.js:20:26)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47

const: 声明常量不能进行修改

  • 声明常量不能进行修改
js 复制代码
for (let index = 0; index < 1; index++) {
    let inConLet = "inConLet";
    console.log("index" + index+",hw=" + hw + ",inConLet="+inConLet);
}
  • 如果不在作用域会报异常
js 复制代码
TypeError: Assignment to constant variable.
    at Object.<anonymous> (D:\vuecode\es6\hw.js:25:5)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47
相关推荐
dr李四维4 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_18 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~25 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ28 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z34 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴37 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue