看了两天的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 = ```<div>
    <span>hello world</span>
</div>

对于字符串 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还有许多其他的更好玩的新特性，这需要大家自行下去搜索资料进行学习。如遇到有什么问题，欢迎大家与我进行留言探讨。

参考文献
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