前端水深，后端绕行——ES6 前端水深，后端绕行——ES6

看了两天的vue视频，发现前端水好深，各种前端框架：Angular，React，Vue扑面而来，弄得我晕头转向的。

文章图片
头疼.jpg 在看视频的过程中，我一直听到一个名词：ES6，出于好奇的我马上就去查阅了相关资料。下面我就为大家简单介绍一下ES6。
1.ES6简介 ES6（ECMAScript 6）是即将到来的新版本JavaScript语言的标准，代号harmony。
2.变量声明const和let 在ES6以前，大家都是在用var关键字进行声明变量。这就牵涉到一个变量提升的问题。
上代码：

function aa() { if(flag) { var test = 'hello man' } else { console.log(test) } }

相信学过javaScript的小伙伴都知道，程序在解析的时候会把var test 自动提到if语句前执行，即：

function aa() { var test // 变量提升，函数最顶部 if(flag) { test = 'hello man' } else { //此处访问 test 值为 undefined console.log(test) } //此处访问 test 值为 undefined }

接下来该ES6登场了
首先先介绍一下let和const，let是来声明变量、const是来声明常量。let和const都是款及作用域。下面来解释一下块级作用域：

在一个函数内部
在一个代码块内部

注意：let和const都不能重复声明
let和const声明的量都只在当前代码块中有效，不会被提升到当前函数的最顶部，这通常被称作“暂时性死区（TDZ）”。

用var将上面的例子进行转化：

function aa() { if(flag) { let test = 'hello man' } else { //test 在此处访问不到 console.log(test) } }

接下来说const
const是用来声明常量的，在声明时必须提供一个值，且改值在被设置后不能进行修改。

const name = 'lux' name = 'joe' // 再次赋值此时会报错

如果使用const来声明一个对象，那么对象所包含的值是可以进行修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的。

const student = { name: 'cc' } // 没毛病 student.name = 'yy' // 如果这样子就会报错了 student= { name: 'yy' }

3.字符串模板一：字符串的拼接，将表达式嵌入字符串中进行拼接，用${}来界定。

//ES5 var name = 'lux' console.log('hello' + name) //es6 const name = 'lux' console.log(```hello ${name}```) //hello lux

二：在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

// ES5 var msg = "Hi \ man! " // ES6 const template = ``` hello world

对于字符串 ES6+ 当然也提供了很多厉害也很有意思的方法，说几个常用的。

// 1.includes：判断是否包含然后直接返回布尔值 const str = 'hahay' console.log(str.includes('y')) // true// 2.repeat: 获取字符串重复n次 const str = 'he' console.log(str.repeat(3)) // 'hehehe' //如果你带入小数, Math.floor(num) 来处理 // s.repeat(3.1) 或者 s.repeat(3.9) 都当做成 s.repeat(3) 来处理// 3. startsWith 和 endsWith 判断是否以给定文本开始或者结束 const str ='hello world!' console.log(str.startsWith('hello')) // true console.log(str.endsWith('!')) // true// 4. padStart 和 padEnd 填充字符串，应用场景：时分秒 setInterval(() => { const now = new Date() const hours = now.getHours().toString() const minutes = now.getMinutes().toString() const seconds = now.getSeconds().toString() console.log(`${hours.padStart(2, 0)}:${minutes.padStart(2, 0)}:${seconds.padStart(2, 0)}`) }, 1000)

4.class 类在ES6以前，偶们定义一个类，只能通过function来模拟

function Person(){ this.name = 'xxx'; } Person.prototype.say = function(){ } var person = new Person();

下面是ES6中类的使用：

//类的定义 class Animal { //ES6中新型构造器 constructor(name) { this.name = name; } //实例方法 sayName() { console.log('My name is '+this.name); } }//类的继承 class Programmer extends Animal { constructor(name) { //直接调用父类构造器进行初始化 super(name); } program() { console.log("I'm coding..."); } }

ES6中添加了对类的支持，引入了class关键字。JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。
5.Set集合 ES6中添加了一个Set集合，该集合是一个不能有重复元素的集合，重复添加无效。

var s = new Set(); s.add(1); s.add(2); // s.delete(2)删除 // s.clear() 清空 // s.size() 长度

遍历的方式

var keys = s.keys(); // 返回一个迭代器 for(var k of keys){ console.log(k); }var values = s.values(); for(var v of values){ console.log(v); }var entries = s.entries(); // 将key和value 组合成一个数组返回 for(var e of entries){ console.log(e); }

终于该介绍箭头函数了()=>{}
这是一种特别简洁、优雅的函数写法
它可以这么写

var fn = (item, index) => {console.log(item)}

也可以这么写

var fn = item => {console.log(item)}

还可以这么写

var fn = item => (item) fn(2) // 2

还可以更简洁

var fn = item => item fn(2) // 2

=>后使用小括号() 表示将结果作为返回值，单行结果时还可以省略
当参数唯一时，还可以将前面的() 省略

总结今天我给大家分享的只是ES6的冰山一角，ES6还有许多其他的更好玩的新特性，这需要大家自行下去搜索资料进行学习。如遇到有什么问题，欢迎大家与我进行留言探讨。

【前端水深，后端绕行——ES6】参考文献
https://www.jianshu.com/p/287e0bb867ae
https://www.cnblogs.com/Wayou/p/es6_new_features.html
https://blog.csdn.net/qq_36458203/article/details/78261309