javascrip基础:var,let和const区别在哪里

简介: 虽然小编我主要工作时后端框架搭建,但空闲时候也经常捣鼓前端的东西,下面就分享一下入门基础知识,老鸟略过,废话也不多话,上代码之前先上概念,先理论后再实践是我一贯的学习之道。varvar定义的变量可被更改,如果不初始化而直接使用也不会报错letlet定义的变量和var类似,但作用域在当前声明的范围内constconst定义的变量只可初始化一次且作用域内不可被更改,使用前必须初始化下面通过一些例子来为大家介绍如何在Javascript中灵活使用var、let和const这些关键字来定义变量,以及这些关键字它们之间有什么区别。

虽然小编我主要工作时后端框架搭建,但空闲时候也经常捣鼓前端的东西,下面就分享一下入门基础知识,老鸟略过,废话也不多话,上代码之前先上概念,先理论后再实践是我一贯的学习之道。
var

var定义的变量可被更改,如果不初始化而直接使用也不会报错
let

let定义的变量和var类似,但作用域在当前声明的范围内
const

const定义的变量只可初始化一次且作用域内不可被更改,使用前必须初始化

下面通过一些例子来为大家介绍如何在Javascript中灵活使用var、let和const这些关键字来定义变量,以及这些关键字它们之间有什么区别。
先来说一下var

var用以声明一个变量,并且同时我们可以在声明语句中初始化所声明的变量。

例如:

var a = 10;
变量的声明,会在代码被执行之前被处理。
用var声明的JavaScript变量,其可用范围在当前执行上下文。
在函数外声明的JavaScript变量,其作用范围是全局。

考虑以下代码片段:

function nodeSimplified() {
 var a =10;
 console.log(a); // 输出 10
 if(true) {
 var a=20;
 console.log(a); // 输出 20
 }
 console.log(a); // 输出 20
}

在上面的代码中,你可以发现,当变量a在if代码段里被更新时,它的值被全局更新了,因此在经过了if代码后,被更新的值仍然被保留着。这与其他语言中的全局变量有点类似。但是,在使用这个功能时要非常小心,因为它有可能会覆盖一个已有的值。
再来说一下let

let语句在一个块级范围里声明一个局部变量。和var类似,我们可以在声明时初始化它的值。

例如:

let a = 10;

这个语句允许你创建一个变量,使它的作用范围被限制在它所在的代码块。
它和Java、C#等其他语言的变量类似。

考虑下面的代码片段:

function myFun() {
 let a =10;
 console.log(a); //输出 10
 if(true) {
 let a=20;
 console.log(a); //输出 20
 }
 console.log(a); // 输出 10
}

它和大多数语言中我们所见的表现行为是一致的。

function myFun() {
 let a =10;
 let a =20; // 抛出语法错误
 console.log(a); 
}

错误信息:"未捕获的异常:标识符'a'已经被声明过。",这个C#这类后端编程方式非常类似。

但如果使用var就没事:

function myFun() { 
 var a =10; 
 var a =20; 
 console.log(a); // 输出 20 
}

使用let语句,可以很好的维护变量的作用范围。当使用内部函数时,let语句让你的代码更整洁。

上面的例子应该能好好的帮你理解var和 let的区别了吧。
最后再说const

const语言中的变量只能被赋值一次,然后就不能在被赋值。const语句的作用范围和let语句一样。

例如:

function myFun() {
 const a =10;
 console.log(a); // 输出 10 
}

问题:如果给一个const变量重新赋值会发生什么? 考虑下面的代码:

function myFun() {
 const a =10;
 console.log(a); // 输出 10
 a =20; // 抛出类型错误
 console.log(a); 
}

当我们尝试给已有的const变量赋值时,这段代码会抛出一个错误:"未捕获的类型错误:给const变量赋值"。

介绍就到此结束,希望这篇文章能够帮助到各位更好的理解在Javascript中声明变量,时使用不同关键字时的区别。

相关文章
|
6月前
|
JavaScript 前端开发 C++
|
1月前
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
36 3
|
3月前
|
JavaScript 前端开发
var、let和const的作用及区别
这篇文章详细解释了JavaScript中`var`、`let`和`const`三种变量声明方式的作用及它们在作用域、可变性、变量提升等方面的区别,并提供了示例代码来阐明各自的特性和适用场景。
|
4月前
|
JavaScript 前端开发
|
6月前
|
JavaScript 前端开发
js的let、const、var的区别以及应用案例
【4月更文挑战第27天】ES6 中,`let` 和 `const` 是新增的变量声明关键字,与 `var` 存在显著差异。`let` 允许重新赋值,而 `const` 不可,且两者都具有块级作用域。`var` 拥有函数级作用域,并可在函数内任意位置访问。`let` 和 `const` 声明时必须初始化,而 `var` 不需。根据需求选择使用:局部作用域用 `let`/`const`,全局或函数范围用 `var`,不可变值用 `const`。
53 2
|
6月前
|
JavaScript 前端开发
var let const 的区别和使用场景
var let const 的区别和使用场景
56 3
|
6月前
|
JavaScript 前端开发
探索JavaScript中的let、const和var:区别与使用场景
探索JavaScript中的let、const和var:区别与使用场景
|
6月前
|
前端开发 JavaScript
前端 JS 经典:let、const、var 区别
前端 JS 经典:let、const、var 区别
36 0
|
6月前
|
JavaScript
JS中var、let、const的区别
JS中var、let、const的区别
|
6月前
|
JavaScript 前端开发
JavaScript基础知识:`var`、`let` 和 `const` 的区别是什么?
JavaScript基础知识:`var`、`let` 和 `const` 的区别是什么?
53 0
下一篇
无影云桌面