JavaScript三大变量声明详析

JavaScript三大变量声明详析

在JavaScript中,我们经常需要声明变量来存储和操作数据。常见的变量声明有三种:varletconst。本文将详细讲解这三种变量声明的特点和使用方法。

var

var是ES5标准引入的变量声明关键字。使用var声明的变量拥有函数作用域(function scope),即在函数中声明的变量只在该函数内部有效。如果在函数外部调用var声明的变量,会得到undefined的结果。

function foo() {
  var a = 1;
}
foo();
console.log(a); // 报错:a未定义

var的特性还包括声明提升(hoisting),即在函数内部无论在哪里声明var变量,该变量都会被视为在函数作用域顶部声明,因此可以在声明前使用该变量。

function foo() {
  console.log(a); // 输出undefined
  var a = 1;
}
foo();

值得注意的是,在var声明的变量在声明前访问时,会返回undefined,这是因为在声明前该变量已经存在,但是还未被赋值。所以,虽然变量声明会被提升,但是赋值操作仍然是按照代码中出现的先后顺序执行的。

let

let是ES6标准引入的块级作用域(block scope)变量声明关键字。块级作用域指的是在代码块(由花括号包裹的语句序列)内部声明的变量,只在该代码块内有效。与var不同的是,let不存在声明提升,所以必须先声明再使用,否则会抛出ReferenceError错误。

function foo() {
  console.log(a); // 报错:a未定义
  let a = 1;
}
foo();

let变量还有一个非常重要的特性,就是允许在同一作用域内重复声明变量。这是因为每次声明的let变量都是一个新的变量,不会影响前面已经声明的同名变量。

function foo() {
  let a = 1;
  let a = 2; // 合法
  console.log(a); // 输出2
}
foo();

但是,在let声明变量前访问该变量,同样会抛出ReferenceError错误,这与var是一致的。

const

const也是ES6标准引入的块级作用域变量声明关键字。与let类似,const声明的变量也是块级作用域的,不存在声明提升的情况。但是,与letvar不同的是,const是一个常量,一旦声明就不能更改其值。

function foo() {
  const a = 1;
  a = 2; // 报错:Assignment to constant variable.
}
foo();

但是,如果使用const声明的变量是一个对象或数组,虽然不能对该变量重新赋值,但是可以修改该变量所引用的对象或数组的属性或元素。

function foo() {
  const obj = { a: 1 };
  obj.b = 2; // 合法
  console.log(obj); // 输出{ a: 1, b: 2 }
}
foo();

示例1

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

在上面的示例中,使用var声明的i变量拥有函数作用域,即在整个for循环中只有一个变量i,循环中定义的多个setTimeout共享同一个i变量。由于setTimeout是一个异步函数,代码执行到setTimeout时,for循环已经结束,此时i的值为5。因此,无论循环执行了多少次,最终输出的结果都是5。

for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

在上面的示例中,使用let声明的i变量拥有块级作用域,循环中定义的多个setTimeout都有各自的i变量。同时,由于let不存在声明提升,所以各个setTimeout函数在执行时,所引用的i变量都能正确地取到循环迭代中的当前值。因此,输出的结果是0、1、2、3、4。

示例2

const obj = { a: 1 };
obj.b = 2;
console.log(obj); // 输出{ a: 1, b: 2 }
obj = { c: 3 }; // 报错:Assignment to constant variable.

在上面的示例中,首先使用const声明了一个对象obj,然后修改了该对象的属性值,但是并没有对该变量重新赋值。这是合法的,因为const只是保证变量所引用的对象不会改变,而不是保证该对象的属性不能被修改。

然后,尝试对obj重新赋值,会得到一个Assignment to constant variable错误。这是因为const声明的变量是一个常量,一旦声明就不能更改其值。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript三大变量声明详析 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vue3获取当前路由地址的两种方法

    下面是具体的攻略: Vue3获取当前路由地址的两种方法 在Vue3中,我们可以使用两种方法来获取当前路由地址,分别是使用$route对象和使用useRoute函数。下面我们将介绍这两种方法,以及如何使用它们来获取当前路由地址。 使用$route对象获取当前路由地址 在Vue3中,我们可以使用$route对象来获取当前路由地址。$route对象是Vue Rou…

    JavaScript 2023年6月11日
    00
  • vscode录音及语音实时转写插件开发并在工作区生成本地mp3文件附踩坑日记!

    vscode录音及语音实时转写插件开发并在工作区生成本地mp3文件附踩坑日记! 背景 语音识别技术的普及使得语音转写逐渐成为电脑输入的重要方式之一,而实时语音转写更是越来越多的应用场景。本文介绍如何在VS Code中开发一个语音实时转写插件,并将实时转写的结果保存到本地mp3文件中。 准备 在进行实时语音转写插件的开发之前,需要准备以下工具和环境: 麦克风及…

    JavaScript 2023年6月11日
    00
  • HTML减肥 精简HTML标记制作网页

    下面是关于”HTML减肥 精简HTML标记制作网页”的完整攻略: 前言 在现代互联网时代,网络速度已经得到了很大的提升,但仍有很多人面临着网络速度慢的问题。因此,为了优化网站的加载速度,我们需要减肥和简化HTML代码,以便达到更快的加载速度和更好的用户体验。 精简HTML标记的方法 1. 优化HTML结构 通过简化HTML的结构,可以减少标记的数量和代码的大…

    JavaScript 2023年5月19日
    00
  • JavaScript实现文件下载并重命名代码实例

    接下来我会详细讲解如何使用JavaScript实现文件下载并重命名的完整攻略。 1. 使用XMLHttpRequest下载文件 使用XMLHttpRequest可以更加灵活地控制文件下载过程,并且可以同时下载多个文件。 function downloadFile(url, filename) { return new Promise((resolve, re…

    JavaScript 2023年5月27日
    00
  • JavaScript实现一键复制文本功能的示例代码

    下面是实现一键复制文本功能的示例代码的攻略: 第一步:引入clipboard.js clipboard.js是一个轻量级的JavaScript库,可以帮助我们实现粘贴板相关的功能。首先,我们需要将它的代码引入我们的HTML页面中,可以通过npm进行安装或者直接下载官方发布的脚本文件。 <script src="path/to/clipboar…

    JavaScript 2023年6月11日
    00
  • JS原型prototype和__proto__用法实例分析

    来讲一下JS原型prototype和__proto__用法的攻略。 1. 前置知识 在开始之前,需要了解一些前置知识: JavaScript中所有对象的原型都是 Object.prototype,它包含了常用的方法如 toString()、valueOf() 等。 每个 JavaScript 对象都有一个 __proto__ 属性,指向它的原型对象。这个属性…

    JavaScript 2023年6月10日
    00
  • javascript自定义加载loading效果

    下面我将详细讲解“JavaScript自定义加载loading效果”的完整攻略,主要分为以下几个部分: 一、理解loading效果 1.1 什么是loading效果 loading效果是指在页面或某个模块正在进行加载操作时,为了提高用户体验而展示的一种动态效果。 1.2 loading效果的重要性 loading效果是提升用户体验的关键环节。当用户在浏览网页…

    JavaScript 2023年5月27日
    00
  • c#后台输出javascript语句示例程序

    针对“c#后台输出javascript语句示例程序”的完整攻略,我们可以按照以下步骤进行: 1. 建立ASP.NET网站 首先需要建立ASP.NET网站,可采用Visual Studio等工具进行开发。在新建Web Form时,记得选用ASP.NET Web Application类型。 2. 编写C#后台代码 在网站中,找到需要输出JavaScript语句…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部