Android和前端哪个水深,前端水深，后端绕行——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 = ```

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