JavaScript 变量声明详解const 、let、 var

简介: JavaScript 变量声明详解const 、let、 var

       前端必不可少的学习就是JavaScript,到后面出现的ES6,都是其中的关键。那么,js学习最基础的是什么呢?当然是js的语法规则等内容啦,而其中的变量命名则是开端。js命名有三个:var、let、const。现在就让我们来看看,这三个命名方式有些什么奥秘?


一、var

       使用 var 定义变量,可以保存任何类型的值。若不初始化变量,变量会保存 undefined。

       1. 函数级作用域

       使用 var 定义的变量会成为包含它的函数的局部变量。变量 a 在函数内部使用 var 定义,调用函数 func,会创建这个变量并给它赋值。函数执行结束后,变量就会被销毁,所以上述代码最后一行会报错,显示变量 a 未定义。

function func() {
    var a = 'hi' // 局部变量
}
func()
console.log(a)

       若在函数内部,不使用 var 操作符,直接给变量 a 赋值,那么 a 就成为了全局变量,可以在函数外部访问到。在浏览器环境下,a 成为window对象的属性。

       2. 变量提升

       使用var声明变量,会自动提升到函数作用域顶部;如下这样会输出undefined:

function func() {
    var a
    console.log(a)
    a = 1
}
func()

       3. 重复声明

       使用 var 重复声明同一个变量,后者会覆盖前者。

function func() {
    var a = 1
    var a = 2
    console.log(a)
}
func()

      4. 全局变量挂载到 window

       浏览器环境中,全局作用域下,使用 var 声明的变量,会挂载到 window 对象上。

var a = 1
console.log(window.a === a) // true

二、let

       let也可以声明变量,只不过是块级作用域变量,和var操作符有很大的区别。

       1. 块级作用域

       let声明的作用域,具有块级作用域,即被{}包裹的部分,超出此包裹便失效。

if (true) {
    let a = 10
}
console.log(a) // undefined

       2. 不可重复声明

       变量在当前作用域内不可重复声明,否则会报错(Uncaught SyntaxError: Identifier 'a' has already been declared)。

if (true) {
    let a = 1
    let a = 2
}
// 混合声明同一变量也会报错
let a
var a // 报错

       3. 不存在变量提升(暂时性锁区)

       使用let声明的变量,不能在声明之前访问它。JavaScript 也会注意出现在块后面的 let 声明,只不过在此之前不能以任何方式来引用未声明的变量。在let声明之前的执行瞬间被称为暂时性死区。

if (true) {
    console.log(a)
    let a = 1
}

       4. 全局变量不会挂载到 window

       和 var 不同,即使在全局作用域下,使用let声明的变量也不会挂载到window对象。

var a = 1
let b = 2
console.log(window.a === a) // true
console.log(window.b === b) // false


       5. 不同的作用域互不影响

       变量处在不同的{}时,也就是处于不同的作用域,它们的使用互相不受影响。

function func() {
  let a = 'hello'
  if (true) {
    let a = 'world'
    console.log(a)
  }
  console.log(a)
}
func()

       6. 变量的类型

       js中的变量是松散类型的,可以保存任何类型数据,变量只不过是一个名称。

let a = 1
a = "hello"
a = [1, 2, 3]
a = {age: 32}


三、const

       const 变量只能在声明的时候赋值,后面不能再被赋值。

       1. 声明变量时必须同时初始化

       声明的同时没有初始化变量,会导致报错

const a // 报错

       2. const 修饰的变量具有内部可变性

       使用 const 定义了一个变量后,不能再更改它的值,这里的值针对的是基本类型的值;还有引用类型的指针,而不包括引用类型的值,可以通过其属性进行数据修改。

说明:基本数据类型的值就保存在内存地址中,所以 const 定义的基础数据类型不可被改变。 而引用数据类型指向的内存地址只是一个指针,通过指针来指向实际数据,也就是说,不可被改变的是指针,而不是数据,所以const定义的引用数据类型的常量可以通过属性来修改其数据。


四、总结及建议

1fbef0add3f540a491da665725e7d5b4.png

   建议:    1)先声明,后使用

       2)建议优先使用:const > let > var


相关文章
|
2月前
|
JavaScript 前端开发
JavaScript如何判断变量undefined
JavaScript如何判断变量undefined
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-变量的声明提前
关于JavaScript变量声明提前特性的基础知识介绍。
44 0
JavaScript基础知识-变量的声明提前
|
13天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
13天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
13天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
2月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
43 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
1月前
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
32 3
|
25天前
|
JavaScript 前端开发
局部 JavaScript 变量
JavaScript 中,函数内部使用 `var` 声明的变量为局部变量,仅在函数内可见,函数执行完毕后被删除。全局变量则在函数外部声明,整个页面的脚本和函数均可访问,页面关闭后才被删除。未声明的变量赋值会自动成为 `window` 对象的属性,且在非严格模式下可被删除。
|
2月前
|
存储 JavaScript 前端开发
JavaScript变量声明:深入理解与最佳实践
JavaScript变量声明:深入理解与最佳实践
|
2月前
|
JavaScript 前端开发
js 变量作用域与解构赋值| 22
js 变量作用域与解构赋值| 22