媒介
假如文章中有涌现马虎、毛病的地方，还请看到的小伙伴多多指教，先行谢过
在ES5阶段，JavaScript 运用 var 和 function 来声明变量， ES6 中又增加了let、const、import、 Class 这几种声明变量的体式格局。那末，他们各自都有什么样的特征呢？
下面，就让我们一同去探讨一下吧
以下↓
变量就是存储信息的容器。
ECMAScript的变量是松懈范例的，所谓松懈范例就是可以用来保留任何范例的数据
var 声明
一直以来，我们都是运用var关键字来声明变量
var a = 1;
var b;
console.log(a) // 1
console.log(b) // undefined
console.log(c) // undefined
var b = 2;
var c = 3;
console.log(b) // 2
console.log(c) // 3
function f() {
var c = 4;
console.log(c) // 4
c = 5;
console.log(c) // 5
}
f();
console.log(c) // 3
function fun() {
c = 6
}
fun();
console.log(c) // 6
从上面的结果我们不难看出，运用var声明的变量具有以下特征：
- 变量可以没有初始值，会保留一个特别的值
undefined - 变量可以反复定义，且可以修正值
- 变量声明语句从自动提拔到地点作用域的顶端
- 函数内反复定义对函数外无影响(局部变量)
- 函数内从新赋值对函数外有影响
function 关键字声明
在ES5中，除了运用var声明变量，我们也可以运用 function 关键字声明变量
f();
function f() {console.log(1)}
var f;
console.log(f) // function f特征：
- 运用
function声明的是函数对象，也存在声明提拔 - 函数声明要优于变量声明
let声明
由于 ES5 中运用 var 声明变量存在着一些很让人疑惑的特征（比方变量提拔，反复定义等），ES6 中新增 let 敕令，用来声明变量。它的用法类似于 var ，然则所声明的变量，只在 let 敕令地点的代码块内有用
{
var a = 1;
let b = 2;
}
console.log(a) // 1
console.log(b) // Uncaught ReferenceError: b is not defined
console.log(c) // Uncaught ReferenceError: c is not defined
let c = 3
let a = 4
console.log(a) // Identifier 'a' has already been declared经由进程以上的代码，我们很轻易发明运用 let 声明变量的特征：
- let声明的变量只在它地点的代码块有用
- 不存在变量提拔
- 不可以反复声明
由于 let 声明变量的这些特征，所以 for 轮回的计数器，就很适宜运用 let 敕令
for(let i = 0; i < 10; i++) {
//
}
console.log(i) // Uncaught ReferenceError: c is not defined
// 假如运用var声明，则在这里输出的就是10
let实际上为
JavaScript新增了块级作用域
const声明
const 也是 ES6 新增的声明变量的体式格局，const 声明一个只读的常量。一旦声明，常量的值就不能转变
const API;
console.log(API) // SyntaxError: Missing initializer in const declaration
console.log(MAX); // Uncaught ReferenceError: MAX is not defined
const MAX = 1;
const MAX = 2;
console.log(MAX); // Identifier 'MAX' has already been declared
const PI = 3.1415;
console.log(PI) // 3.1415
PI = 3; // TypeError: Assignment to constant variable.
const f = {}
f.name = 'HELLO' // 一般实行
f = {name: 'World'} // 报错所以，运用 const 声明的变量具有以下特征：
-
const一旦声明变量，就必需马上初始化，不能留到今后赋值 - 不许可反复声明
- 不存在变量提拔
-
const实际上保证的，并非变量的值不得修改，而是变量指向的谁人内存地址不得修改
假如真的想将对象凝结，应当运用
Object.freeze要领
import 声明
ES6 新增的模块的观点。
模块功用主要由两个敕令组成：
export和
import。
export敕令用于划定模块的对外接口，
import敕令用于输入其他模块供应的功用
所以在肯定水平上来讲，import 也具有声明变量的功用。只是在运用 import 的时刻，具有一些限定
export { first, last }
import { first, last } from './xxx'
first = {} // Syntax Error : 'a' is read-only;
first.name = 'Hello' // 胜利实行，然则不发起如许运用
export default function(){} // a.js
import xxx from 'a.js'
import { New as $ } from './xxx'特征：
-
import敕令接收一对大括号，大括号内里的变量名，必需与被导入模块对外接口的称号雷同 -
import敕令输入的变量都是只读的，由于它的本质是输入接口 - 当运用
export default敕令，为模块指定默许输出的时刻，import敕令可以为该匿名函数指定恣意名字 -
import敕令具有提拔结果，会提拔到全部模块的头部，起首实行 - 假如想为输入的变量从新取一个名字，
import敕令要运用as关键字，将输入的变量重命名
本质上，
export default就是输出一个叫做
default的变量或要领，然后体系许可你为它取恣意名字
class 声明
ES6 引入了类的观点，有了 class 这个关键字，作为对象的模板。经由进程 class 关键字，可以定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
ES6的
class可以看做只是一个语法糖，它的绝大部分功用，
ES5都可以做到，类的本质照样函数对象，类中的要领和对象实在都是挂在对应的函数对象的
prototype属性下
所以就可以改写成下面这类ES5的体式格局
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function() {
return '(' + this.x + ', ' + this.y + ')';
}特征：
- 一切类都有
constructor函数，假如没有显式定义，一个空的constructor要领会被默许增加。固然一切函数对象都必需有个主体 - 天生类的实例对象的写法，与
ES5经由进程组织函数天生对象完整一样，也是运用new敕令
class B {}
let b = new B();- 在类的实例上面挪用要领，实在就是挪用原型上的要领
- 与函数对象一样，
Class也可以运用表达式的情势定义 -
Class实在就是一个function，然则有一点差别，Class不存在变量提拔，也就是说Class声明定义必需在运用之前
全局变量
在浏览器环境指的是
window对象，在
Node指的是
global对象。
ES5当中，顶层对象的属性与全局变量是等价的
var敕令和function敕令声明的全局变量，依旧是顶层对象的属性；另一方面划定，let敕令、const敕令、class敕令声明的全局变量，不属于顶层对象的属性。也就是说，从ES6最先，全局变量将逐渐与顶层对象的属性脱钩
var a = 1;
window.a // 1
let b = 2;
window.b // undefined隐式声明
在 JavaScript 中还存在着隐式声明。
a = 1;
console.log(a) // 1当没有声明，直接给变量赋值时，会隐式地给变量声明，此时这个变量作为全局变量存在。这个时刻就不存在声明提早的问题了
末了
实在只需我们明白并控制了这几种声明变量的体式格局，记着它们的特征，那末在实际运用的进程当中就很轻易可以找到最适宜的体式格局去定义
天天进修分享，不定期更新
末了，引荐一波前端进修进程，这段时候总结的一些口试相干，分享给有须要的小伙伴，迎接 star 关注 传送门
