关于web前端 - Javascript的六大变量声明方式，你都知道吗？

左手的ㄟ右手 2021-09-09 05:42 359阅读 0赞

随着js的发展，目前共6种声明变量的方式，分别为var、let、const、function、class、import，下面分别阐述一下这六种方式。

**1 var**

在ES5阶段，用var定义变量，此阶段具有以下特点：

没有块的概念，可以跨块访问，不能跨函数访问；

存在变量提升。

// 代码没报错，而是打印出来了undefined，侧面说明了val变量存在变量提升

console.log(val); // undefined

var val = 1;

console.log(val); // 1

**2 let**

在ES6阶段，出现了块的概念，新增了块级作用域，同时新增了let命令，let声明的变量具有以下特点：

let声明的变量只在它所在的代码块有效；

不存在变量提升。let不会像var那样会发生‘变量提升’现象，因此，变量需要先声明后再使用，否则会报错；

暂时性死区。在代码块内，使用let命令声明变量之前，该变量都是不可用的；

不允许重复声明。

// 实验一——只在所在的代码块有效

// 1

let val = 2;

console.log(val); // 2

// 2

let val = 2;

console.log(val); // ReferenceError: val is not defined

// 实验2——不存在变量提升 + 暂时性死区

console.log(val); // 报错

let val = 2;

// 实验三——不允许重复声明

let val = 1;

let val = 2; // SyntaxError: Identifier ‘val’ has already been declared

**3 const**

在let命令出现的同时，出现了const命令，其用于声明一个只读的常量，具有以下特点：

一旦声明就必须立即初始化；

一旦声明，常量值就不能改变了（指的是内存地址不能改变）；

块作用域内有效；

不存在变量提升；

存在暂时性死区。

对于上述的验证代码可以用参考let的。

对于const，还有一点比较有意思的指的详细阐述一下：const实际上保证的并不是变量的值不能改动，而是变量指向的那个内存地址不能改动。对于简单类型的数据而言，值就保存在变量指向的内存地址中，因此等同于常量。但对于复合类型的数据而言，变量指向的内存地址保存的只是一个指针，const只能保证这个指针是固定的，至于指向的数据结构不受控制。那么如何保证复合类型的值如何保证呢？可以使用Object.freeze()方法,该方法使对象的原始属性不可变，但仍然可以更改嵌套对象。为了使对象完全不可变，通过将嵌套对象上的所有属性冻结达到效果。

const constantize = obj => \{

Object.freeze(obj);

Object.keys(obj).forEach( key => \{

if ( typeof obj\[key\] === ‘object’ ) \{

constantize( obj\[key\] );

\});

\};

**4 function**

function命令用于定义一个函数，具有以下特点：

函数声明后不会立即执行，需要调用的时候才执行；

对支持ES5和ES6浏览器环境在块作用域内有一定区别，所以应避免在块级作用域内声明函数。

function test() \{

// ……

**5 class**

ES6语法引入了class关键字，用来定义类，该写法相比于对象原型的方式具有以下特点：

相比于对象原型的方式写法更清晰；

更像面向对象编程的语法（对有面向对象编程经验的同学更友好）。

class Calculate \{

constructor(x, y) \{

this.x = x;

this.y = y;

add() \{

return this.x + this.y;

**6 import**

ES6在语言标准的层面上实现了模块功能，其中import命令就是用于加载模块，然后输出变量，其具有以下特点：

import命令接受一对大括号，其里面的变量名必须与被导入的模块对外接口的名称相同；

用as关键字可将输入的变量名重命名；

import命令输入的变零都是只读的；

import命令具有提升效果，会提升到整个模块的头部，首先执行（因为import命令是在编译阶段执行的，在代码运行之前）；

import是静态执行，不能使用表达式和变量；

import会执行所加载的模块。

// 随便举个例子

import \{add\} from ‘./calcluate’;

今天爱创小编分享就到这里了，有想学习前端，咨询前端课程，掌握更多前端知识，欢迎大家关注，点赞，私信我！！！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/6dedb24b9b294e3abf4677a9ddaf3c4e.png