本篇主要介绍了Web前端Javascript入门学习之js中6种变量声明的方式，通过具体的内容展现，希望对大家web前端JavaScript的学习有一定的帮助。

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

1 var

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

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

 2. 存在变量提升。

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

console.log(val); // undefined

var val = 1;

console.log(val); // 1

2 let

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

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

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

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

4. 不允许重复声明。

// 只在所在的代码块有效

{

   let val = 1;

   console.log(val); // 2

}

{

   let val = 2;

}

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

// 不存在变量提升 

{

  console.log(val); // 报错

  let val = 2;

}

// 不允许重复声明

{

   let val = 1;

   let val = 2; // Identifier 'val' has already been declared

}

3 const

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

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

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

 3. 块作用域内有效；

 4. 不存在变量提升；

 5. 存在暂时性死去。

4 function

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

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

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

function test() {

   // ,,,

}

5 class

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

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

 2. 更像面向对象编程的语法；

class Calculate {

  constructor(x,y){

     this.x = x;

     this.y = y;

  }

}

add (){

  return this.x + this.y;

}

6 import

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

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

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

 3. import命令输入的变量都是只读的；

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

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

 6. import会执行所加载的模块

import { add } from "./calcluate";

✅  扫码免费获取基础课程·答疑解惑·职业测评