携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天 点击查看活动详情

前言

准备再开一个新坑，学习JavaScript的基本语法，自己是一个后端，经常会做一些vue-element-admin的工作，但是在这个过程中经常会去查找资料，看下别人写的代码，经常看不懂，然后每次遇到基础的语法都要去找资料，很浪费时间，觉得自己的基础很差，可以说对于JavaScript的知识还停留到jQuery的时代，对于Vue的基本语法也只了解了一点点，做了很多深入的尝试，例如从零开始学习React，由于没有使用，基础太差现在已经忘记的差不多了。

所以决定再巩固一下关于JavaScript的语法知识，特别是ES6的新特性。

打算

对于我自己来说，还不是很了解ES6给JavaScript 带来的一些新特性，更不用说TypeScript，只知道TypeScript有非常严格的类型限制，前段时间想改动一个TypeScript的后台管理项目头皮发麻，ES6和TypeScript在高级前端职位可以说是非常必备的知识点，我打算从有一定JavaScript的开发基础角度出发，开始记录一下自己学习ES6的心路历程，后面可能会去了解TypeScript。

简要了解JavaScript的历史

JavaScript 是一个大部分是在浏览器上运行的语言，浏览器都是在某个操作系统上面的软件，并不像后端语言一样直接运行在系统里面，又有很多不同公司开发的浏览器，它的语法是有一些技术委员会共同讨论达成共识从而发布国际标准。而不是某个公司，个人或者组织去发布版本的，所以不同的浏览器对于JavaScript的语法支持很难统一，当前最流行的标准是ES6，2015年6月正式发布，ECMAScript6是近十几年来改动最大的版本，所以它最流行，Node.js是一个服务端的JavaScript语言，除了浏览器上运行JavaScript，还Node.js可以在操作系统上运行，Node.js自6.0版本开始全面支持ES6，我电脑就安装了V14.19版本的Node.js。

后面可以用到Node.js来测试案例

了解变量的定义

在很久之前我记得在使用js里面定义变量都会使用var这个关键字，在ES6中又引入了let和const这两个定义变量的用法，刚开始接触的时候我很难以理解，为什么要搞这个多方法去定义一个变量。作用域又不一样，很难去记忆，后面用多了就知道了，这里就复习一下。

var

在之前的JQuery时代非常常用，可能这个是为什么JQuery为什么会被逐渐抛弃的原因吧，到处定义变量，最后由于业务不断地复杂化js代码写的很长，变量到处都可以访问到，到处都在处理变量，非常的混乱，容易出问题。

var定义的变量默认的作用域为当前函数，如果在js文件里面外层定义，那么作用域为整个js文件，也叫全局变量，在作用域范围内它最大，但是很少会用到它，它的变量可以被另外的var关键字覆盖，在现在的ES6中，Vue的项目中感觉很少会用到它，可能会造成会乱。

变量提升

这里需要注意些var有一个变量提升的概念，很是想吐槽，怎么这不严谨的地方 使用var定义一个变量，然后这个定义语句之前使用它是可以接受的，这就是变量提升，但是直接使用未定义的变量会报错：

console.log(a)  // 可以接受，变量提升 输出undefined
var = a  

console.log(b) // 直接报错 Uncaught ReferenceError: b is not defined 

let

let定义的变量只能在块作用域里访问，不能跨块访问，也不能跨函数访问，这里就新加了一个块作用域的概念，简而言之就只用{}包裹的块，let 不能重复声明一个变量，这里就不仔细说了。

const

通常可以理解为定义一个常量，这个变量不可以改变，这里又有特殊情况，加入const定义是一个对象或者是数据，那么其中的值的改变是可以接受的，只要不改变它的指针指向就可以接受不会报错，所以定义复杂类型对象时要慎重，例如：

const a = [1,2];
a[0] = 3;  // 不会报错
console.log(a);

先看看这个特殊情况再来试试会报错的情况：

总结

今天从新认识了一下ES6中三种定义变量的方式，其中let和const是ES6的新特性，感觉又学到了一点知识，了解到了const的复杂类型定义的缺点还有var的变量提升的概念，不知道大家学到了没有。