javascript的var与let,const之间的区别详解

 更新时间:2022-01-27 14:11:52   作者:佚名   我要评论(0)

目录作为全局变量时变量提升暂时性死区块级作用域重复声明修改声明的变量(常量与变量声明)总结说到JavaScript中声明变量的几种方法也就是v

说到JavaScript中声明变量的几种方法也就是varletconst了,letconstes6中新增的命令。那么它们之间有什么区别呢?

我们先整体说一下三者的区别,在详细介绍,var、let、const的区别主要从以下几点分析:

  • 作为全局变量时的不同
  • 变量提升
  • 暂时性死区
  • 块级作用域
  • 重复声明
  • 修改声明的变量

作为全局变量时

ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量的属性

但是ES6中用let声明的变量可以在全局访问到,但是并没有在顶层变量的属性上,const声明的常量同样也不会在顶层变量上

请添加图片描述

变量提升

var声明的变量存在变量提升,及变量可以在声明之前调用,值为undefined

letconst不存在变量提升,即它们所声明的变量一定要在声明后使用,否则会报错

console.log(a)  // undefinedvar a = 1console.log(b)  // Cannot access 'b' before initializationlet b = 2console.log(c)  // Cannot access 'c' before initializationconst c = 3console.log(a)  // undefined
var a = 1

console.log(b)  // Cannot access 'b' before initialization
let b = 2

console.log(c)  // Cannot access 'c' before initialization
const c = 3

暂时性死区

var不存在暂时性死区

letconst存在暂时性死区,只有等到声明变量的那一行代码被执行后,才可以获取和使用该变量

其实这一点就是有上一点变量提升延伸而来的区别。因为var声明的变量存在变量提升,在声明之前使用该变量值为undefined,不会报错,所有没有暂时性死区。letconst在该作用域开始前后,变量或常量声明之前使用会报错,这一块区域也就被称为暂时性死区

例同上文:

console.log(a)  // undefined
var a = 1

console.log(b)  // Cannot access 'b' before initialization
let b = 2

console.log(c)  // Cannot access 'c' before initialization
const c = 3

块级作用域

var不存在块级作用域

letconst存在块级作用域

{    var a = 2}console.log(a)  // 2{    let b = 2}console.log(b)  // Uncaught ReferenceError: b is not defined{    const c = 2}console.log(c)  // Uncaught ReferenceError: c is not defined

重复声明

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

letconst在相同作用域下不允许重复声明

var a = 10
var a = 20 // 20

let b = 10
let b = 20 // Identifier 'b' has already been declared

const c = 10
const c = 20 // Identifier 'c' has already been declared

修改声明的变量(常量与变量声明)

varlet声明的是变量,声明后的变量可被修改

const声明得失常量,只读。一旦声明,常量的值就不能改变。但是需要注意的是,对于引用数据类型,JavaScript中的变量或者常量存储的是该数据的存储地址,只要不直接修改该常量的引用,修改其指向的对象的属性是可以的。

var a = 10
a = 20
console.log(a)  // 20

let b = 10
b = 20
console.log(b)  // 20

const c = 10
c = 20 // Uncaught TypeError: Assignment to constant variable

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:
  • JavaScript中var let const的用法有哪些区别
  • JavaScript es6中var、let以及const三者区别案例详解
  • 详解javascript中var与ES6规范中let、const区别与用法
  • 了解javascript中let和var及const关键字的区别
  • JavaScript ES6语法中let,const ,var 的区别

您可能感兴趣的文章:

相关文章

  • javascript的var与let,const之间的区别详解

    javascript的var与let,const之间的区别详解

    目录作为全局变量时变量提升暂时性死区块级作用域重复声明修改声明的变量(常量与变量声明)总结说到JavaScript中声明变量的几种方法也就是v
    2022-01-27
  • 交互式可视化js库gojs使用介绍及技巧

    交互式可视化js库gojs使用介绍及技巧

    目录1. gojs 简介2. gojs 应用场景3. 为什么选用 gojs:4. gojs 上手指南5. 小技巧(非常实用哦)6. 实践:实现节点分组关系可视化交互图最后
    2022-01-27
  • JavaScript事件的委托(代理)的用法示例详解

    JavaScript事件的委托(代理)的用法示例详解

    目录简介示例:事件委托写法1:事件委托写法2:每个子元素都绑定事件示例:新增元素写法1:事件委托写法2:每个子元素都绑定事件简介 说明 本
    2022-01-27
  • gojs实现蚂蚁线动画效果

    gojs实现蚂蚁线动画效果

    目录一、gojs 实现1. 绘图2. 虚线实现3. 让虚线动起来二、虚线及虚线动画背后的原理三、虚线的一些概念四、css 绘制边框虚线在绘制 dag 图时
    2022-01-27
  • Vue?elementUI实现树形结构表格与懒加载

    Vue?elementUI实现树形结构表格与懒加载

    目录1、实现效果2、后端实现2.1 实体类2.2 数据库中的数据结构2.3 后端接口2.4 swagger测试后端结构功能是否正常3、前端实现3.1 页面中引入e
    2022-01-27
  • vue3+TypeScript+vue-router的使用方法

    vue3+TypeScript+vue-router的使用方法

    目录简单使用创建项目vue-cli创建vite创建安装vue-router创建/修改组件修改入口ts启动vue在浏览器中访问文件结构图片综合使用动态参数使用wa
    2022-01-27
  • JSscript标签有哪些属性

    JSscript标签有哪些属性

    JS script标签有哪些属性: charset:可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值因此这个属性很少有人用。def
    2022-01-27
  • 使用vue-video-player实现直播的方式

    使用vue-video-player实现直播的方式

    目录一、安装vue-video-player二、使用 vue-video-player课前准备:直播流协议https://www.cnblogs.com/yangchin9/p/14930874.html 摘要:在
    2022-01-27
  • vue3获取当前路由地址

    vue3获取当前路由地址

    正解 使用useRouter: // router的 path: "/user/:uid" <template> <div>user</div> <p>uid: {{ uid }}</p> </template> <script lang=
    2022-01-27
  • vue?请求拦截器的配置方法详解

    vue?请求拦截器的配置方法详解

    按如下步骤进行 1.request.js内容:http request请求拦截器和http response服务器响应拦截器配置 2.http.js内容:请求数据方式封装 3.utils.
    2022-01-27

最新评论