var let const关键字之间的区别及使用场景示例详解

 更新时间:2023年12月24日 10:51:57   作者:Grape  
这篇文章主要为大家介绍了var let const关键字之间的区别及使用场景示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

背景

在写js和ts代码的时候,经常会用到var、let、const关键字,虽然一直用,但是从来没有去仔细研究他们之间的区别,偶尔遇到的使用的问题,就直接换了另一个关键字,其中最明显的就是我使用const没有进行初始化发现不行,就直接换成使用let就可以了,这篇文章就是为了研究其他之间的区别

一、var变量

1、var在全局作用域的应用,使用var关键字声明的变量,都会被提升到该作用域的最顶部,这就是我们常说的变量提升

console.log(a); //undefind
var a = 1;
console.log(a); //1

等同于

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

全局变量

在函数外声明的变量作用域是全局的:

var carName = "Volvo";
  function person(){
    console.log(carName); // "Volvo"
  } 
  person();

局部变量

在函数内声明的变量作用域是局部的(函数内):

function person() {
    var carName = "Volvo";
    console.log(carName);  // "Volvo"
   }
 person();
 console.log(carName); //报错 Uncaught ReferenceError: a is not defined

使用 var 关键字在块级作用域存在的问题

var a = 10;
 console.log(a); // 10
  { 
    var a = 2;
    console.log(a); // 2
  }
 console.log(a); // 2

重置变量

使用 var 关键字声明的变量在任何地方都可以修改:

var x = 2;
console.log(x); // 2
var x = 3;
console.log(x); // 3

二、块级作用域let、const

let、const声明和var声明用法一样,不同点在于let、var声明的是变量,const声明的是常量。var存在变量提升,let、const不存在变量提升。var在全局作用域声明的变量会挂载在window对象上

1、let 声明

let声明的是变量,没有var那样的变量提升,let声明的变量只在当前作用域中有效

全局变量

console.log(x);//报错 Unexpected identifier 'Uncaught'
  let x = 1;
  console.log(x);// 1

块级作用域

let 中不存在变量提升

{
      console.log(x); //报错 Unexpected identifier 'Uncaught'
      let x = 1;
      console.log(x);
   }

重置变量

在相同的作用域或块级作用域中,不能let关键字来重置 var 关键字声明

var x = 2;       // 合法
  let x = 3;       // 不合法
  {
      var x = 4;   // 合法
      let x = 5   // 不合法
  }

在相同的作用域或块级作用域中

let x = 2;       // 合法
let x = 3;       // 不合法
{
    let x = 4;   // 合法
    let x = 5;   // 不合法
}

let 关键字在不同作用域,可以重新申明和赋值

let x = 2;       // 合法
{
    let x = 3;   // 合法
}
{
    let x = 4;   // 合法
}

2、const 声明

const声明的是常量,常量不可以修改。常量定义必须初始化值,如果不初始化值就会报错。

全局变量

{
        console.log(x); //报错 Unexpected identifier 'Uncaught'
        const x = 1;
        console.log(x); // 1
    }

局部变量

{
        const x = 1;
        console.log(x); //1;
    }
    console.log(x)// 报错 Unexpected identifier 'Uncaught'

必须初始化,不能重新赋值

const x;
  console.log(x);// Uncaught SyntaxError: Missing initializer in const declaration
  const x = 10;
  x = 20; // 报错,const 变量不可重新赋值

对象和数组,对于引用类型(对象和数组),const 保证的是变量引用的地址不变,但对象或数组本身是可以修改的。

const x = [1, 2, 3];
x.push(4); // 合法,数组本身可以修改
x = [5, 6, 7]; // 报错,变量引用地址不可变

总结

let、var声明的是变量,const声明的是常量。var存在变量提升,let、const不存在变量提升。var在全局作用域声明的变量会挂载在window对象上,而let const声明的变量则不会有这一行为。let声明的是变量,没有var那样的变量提升,let声明的变量只在当前作用域中有效,const声明的是常量,常量不可以修改。常量定义必须初始化值,如果不初始化值就会报错。

以上就是var let const关键字之间的区别及使用场景示例详解的详细内容,更多关于var let const关键字的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript中CommonJS 与 ES Modules的区别

    JavaScript中CommonJS 与 ES Modules的区别

    本文主要介绍了JavaScript中CommonJS 与 ES Modules的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2026-03-03
  • 解决微信小程序调用moveToLocation失效问题【超简单】

    解决微信小程序调用moveToLocation失效问题【超简单】

    这篇文章主要介绍了解决微信小程序调用moveToLocation失效问题,解决方法超级简单,需要的朋友可以参考下
    2019-04-04
  • layui radio性别单选框赋值方法

    layui radio性别单选框赋值方法

    今天小编就为大家分享一篇layui radio性别单选框赋值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • js实现树形数据转成扁平数据的方法示例

    js实现树形数据转成扁平数据的方法示例

    这篇文章主要介绍了js实现树形数据转成扁平数据的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • js如何将元素滚动到可见区域

    js如何将元素滚动到可见区域

    文章介绍了如何使用scrollIntoViewIfNeeded方法将元素滚动到可见区域,以及如何通过配置对象控制滚动行为,还提供了一个纯JavaScript的解决方案,可以实现类似的功能
    2024-12-12
  • js实现全选反选不选功能代码详解

    js实现全选反选不选功能代码详解

    这篇文章主要介绍了js实现全选反选不选功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • js实现Select头像选择实时预览代码

    js实现Select头像选择实时预览代码

    这篇文章主要介绍了js实现Select头像选择实时预览代码,涉及javascript动态遍历及设置select选项的技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • javascript前端实现多视频上传

    javascript前端实现多视频上传

    这篇文章主要为大家详细介绍了javascript前端实现多视频上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 原生JS实现特效留言框

    原生JS实现特效留言框

    这篇文章主要为大家详细介绍了原生JS实现特效留言框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 使用UniApp框架来阻止事件冒泡

    使用UniApp框架来阻止事件冒泡

    在开发移动应用程序时,我们经常需要处理用户交互事件,然而,有时候这些事件会冒泡,导致意外的行为和不良用户体验,在本文中,我们将探讨如何使用UniApp框架来阻止事件冒泡,并提供一些示例代码来帮助您理解如何实现这一功能,需要的朋友可以参考下
    2023-11-11

最新评论