javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript变量声明

JavaScript常用变量声明方式总结

作者：POGF

JavaScript中有几种常用的变量声明，例如：var、let、直接赋值和const 属性，本文将为大家详细介绍一下这四种方式的具体使用，需要的可以参考一下

1. var

var 语句 用于声明一个函数范围或全局范围的变量，并可将其初始化为一个值（可选）。

var是在ES5及之前的JavaScript版本中用于声明变量的关键字。下面是对var的详细解释：

1.变量提升（Variable Hoisting）：

2.函数作用域（Function Scope）：

3.全局作用域（Global Scope）：

4.变量重复声明：

5.没有块级作用域：

 console.log(x); // 输出 undefined，变量提升
 var x = 10;
 ​
 function example() {
   var y = 20;
   if (true) {
     var z = 30;
     console.log(y); // 输出 20，y 在函数作用域内可见
   }
   console.log(z); // 输出 30，z 在函数作用域内可见
 }
 ​
 example();
 ​
 console.log(x); // 输出 10，全局作用域中的变量
 console.log(window.x); // 输出 10，全局变量是 window 对象的属性
 console.log(y); // 报错，y is not defined，y 在函数作用域外不可见
 console.log(window.y); // 输出 undefined，函数作用域中的变量不是全局变量

2. let

let是ES6（ECMAScript 2015）引入的关键字，用于声明块级作用域的变量。下面是对let的详细解释：

1.块级作用域（Block Scope）：

2.不存在变量提升（No Variable Hoisting）：

3.重复声明错误（Redeclaration Error）：

4.循环中的块级作用域：

以下是一个示例代码，展示了let的特性：

 function example() {
   let x = 10; // 块级作用域变量
   if (true) {
     let y = 20; // 块级作用域变量
     console.log(x); // 输出 10
     console.log(y); // 输出 20
   }
   // console.log(y); // 报错，y is not defined，y 不在作用域内
 }
 ​
 example();
 ​
 // console.log(x); // 报错，x is not defined，x 不在作用域内
 ​
 // 重复声明错误
 // let z = 30;
 // let z = 40; // 报错，Identifier 'z' has already been declared
 ​
 // 循环中的块级作用域
 for (let i = 0; i < 3; i++) {
   setTimeout(function () {
     console.log(i); // 输出 0, 1, 2
   }, 1000);
 }
 ​

3. 直接赋值

在JavaScript中，直接赋值是指将一个值直接赋给一个变量，而无需使用关键字进行声明。直接赋值可以用于创建新的变量或更新已存在的变量。下面是对直接赋值的详细解释：

1.创建新变量：

2.更新已存在的变量：

需要注意以下几点：

以下是一些示例代码，演示了直接赋值的用法：

 myVariable = 10; // 创建一个全局变量 myVariable，并赋值为 10
 console.log(myVariable); // 输出 10
 ​
 myVariable = 20; // 更新 myVariable 的值为 20
 console.log(myVariable); // 输出 20
 ​
 function example() {
   anotherVariable = 30; // 创建一个全局变量 anotherVariable，并赋值为 30
   console.log(anotherVariable); // 输出 30
 }
 ​
 example();
 console.log(anotherVariable); // 输出 30，在全局作用域内可见
 ​

4. const 属性

const是ES6（ECMAScript 2015）引入的关键字，用于声明一个常量（不可变的值）。下面是对const的详细解释：

1.常量的赋值：

2.块级作用域：

3.保留其值：

4.对象和数组的注意事项：

以下是一些示例代码，展示了const的特性：

 const PI = 3.14159; // 声明常量 PI，并赋值为 3.14159
 console.log(PI); // 输出 3.14159
 ​
 // PI = 3.14; // 报错，Assignment to constant variable
 ​
 function example() {
   const x = 10; // 声明块级作用域的常量 x，并赋值为 10
   console.log(x); // 输出 10
   // x = 20; // 报错，Assignment to constant variable
 }
 ​
 example();
 ​
 // console.log(x); // 报错，x is not defined
 ​
 const person = {
   name: "John",
   age: 30,
 };
 ​
 person.age = 40; // 可以修改对象的属性
 console.log(person); // 输出 { name: 'John', age: 40 }
 ​
 const numbers = [1, 2, 3];
 numbers.push(4); // 可以修改数组的元素
 console.log(numbers); // 输出 [1, 2, 3, 4]
 ​

需要注意以下几点：

总结：const关键字用于声明常量，它的值在声明后不可修改。常量具有块级作用域，并且保留其绑定（引用）。对于引用类型的常量，其属性或元素是可以修改的。使用const可以提高代码的可读性、减少错误，并明确表达变量的不可变性。

const关键字确实保护的是常量的绑定（引用），而不是绑定的值本身。这是由于JavaScript中的对象和数组是引用类型。

当使用const声明一个对象或数组时，实际上创建的是一个指向该对象或数组的引用。这个引用是不可变的，也就是说不能将它指向另一个对象或数组。但是，通过这个引用，仍然可以访问和修改对象或数组的属性或元素。

这是因为对象和数组本身是可变的数据结构。const只限制了对变量的重新赋值，但并不限制对对象或数组内部的属性或元素进行修改。因此，可以通过const声明的常量引用对象或数组，并在引用上进行属性或元素的修改。

这种设计是为了在保护常量的引用不被修改的同时，允许对对象或数组进行更改，以便在程序的不同部分共享和修改数据。

5. 变量提升

变量提升是JavaScript中的一种行为，它使得可以在变量声明之前访问这些变量。这意味着无论变量声明在哪个作用域内，它们都会在代码执行之前被“提升”到作用域的顶部。

在JavaScript中，变量提升只适用于使用var关键字声明的变量，而不适用于使用let和const声明的变量。下面是关于变量提升的一些重要概念和规则：

下面是一个示例，演示了变量提升的行为：

 console.log(x); // 输出 undefined，变量声明被提升，但未初始化
 var x = 10;
 ​
 console.log(y); // 报错，y is not defined，let声明的变量不会提升
 let y = 20;

在上述示例中，使用var声明的变量x会被提升到作用域的顶部，因此在变量声明之前就可以访问它。但是，由于变量初始化的位置在声明之后，所以在第一个console.log语句中，变量x的值为undefined。

另一方面，使用let声明的变量y不会被提升，因此在第二个console.log语句中，尝试访问y会导致ReferenceError。

需要注意的是，尽管变量提升使得在变量声明之前可以访问变量，但最佳实践是在使用变量之前显式地声明和初始化它们，以提高代码的可读性和可维护性。

总结：变量提升是JavaScript中的一种行为，使得使用var声明的变量在作用域的顶部被提升，可以在声明之前访问。但是变量的赋值操作不会被提升，变量的初始化仍然发生在代码中的实际位置。变量提升不适用于使用let和const声明的变量。

到此这篇关于JavaScript常用变量声明方式总结的文章就介绍到这了,更多相关JavaScript变量声明内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文