前端ES6

1、变量声明const和let

es6之前，变量声明使用var关键字；无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升

es6中通常使用const和let来声明变量，let表示变量、const表示常量。let和const都是块级作用域。

【块级作用域：在一个函数内部，在一个代码块内部；说白了{}大括号内的代码块即为const和let的作用域】

let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。（如下代码）

[javascript]  view plain  copy

1. function aa() {  
2.     if(bool) {  
3.        let test = 'hello man'  
4.     } else {  
5.         //test 在此处访问不到  
6.         console.log(test)  
7.     }  
8.   }  

const定义的是常量，也就是说，一旦常量被定义赋值，就不能再改变。

[javascript]  view plain  copy

1. const name = 'lux'  
2. name = 'joe'  //再次赋值会报错  

eg：依次输出0到9

[javascript]  view plain  copy

1.     // ES5告诉我们可以利用闭包解决这个问题  
2.     var funcs = []  
3.     for (var i = 0; i < 10; i++) {  
4.         func.push((function(value) {  
5.             return function() {  
6.                 console.log(value)  
7.             }  
8.         }(i)))  
9.     }  
10.     // es6  
11.     for (let i = 0; i < 10; i++) {  
12.         func.push(function() {  
13.             console.log(i)  
14.         })  
15.      }  

2、模板字符串

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

[javascript]  view plain  copy

1. //es5   
2. var name = 'lux'  
3. console.log('hello' + name)  
4. //es6  
5. const name = 'lux'  
6. console.log(`hello ${name}`) //hello lux  

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

[javascript]  view plain  copy

1. // es5  
2. var msg = "Hi \  
3. man!  
4. "  
5. // es6  
6. const template = `<div>  
7.     <span>hello world</span>  
8. </div>`  

es6提供的字符串方法

[javascript]  view plain  copy

1. // 1.includes：判断是否包含然后直接返回布尔值  
2.     let str = 'hahay'  
3.     console.log(str.includes('y')) // true  
4.     // 2.repeat: 获取字符串重复n次  
5.     let s = 'he'  
6.     console.log(s.repeat(3)) // 'hehehe'  
7.     //如果你带入小数, Math.floor(num) 来处理  

3、函数

函数默认参数

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

[javascript]  view plain  copy

1. function action(num = 200) {  
2.     console.log(num)  
3. }  
4. action() //200  
5. action(300) //300  

箭头函数

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。

箭头函数最直观的三个特点。

• 不需要function关键字来创建函数
• 省略return关键字
• 继承当前上下文的 this 关键字

[javascript]  view plain  copy

1. //例如：  
2.     [1,2,3].map( x => x + 1 )  
3.       
4. //等同于：  
5.     [1,2,3].map((function(x){  
6.         return x + 1  
7.     }).bind(this))  

注意：当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{}；

[javascript]  view plain  copy

1. var people = name => 'hello' + name  
2. //参数name就没有括号  

[javascript]  view plain  copy

1. var people = (name, age) => {  
2.     const fullName = 'h' + name  
3.     return fullName  
4. }   
5. //如果缺少()或者{}就会报错  

4、扩展的对象功能

对象初始化简写

es5：

[javascript]  view plain  copy

1. function people(name, age) {  
2.         return {  
3.             name: name,  
4.             age: age  
5.         };  
6.     }  

es6：键值对重名可以这样简写

[javascript]  view plain  copy

1. function people(name, age) {  
2.     return {  
3.         name,  
4.         age  
5.     };  
6. }  

为对象添加方法

[html]  view plain  copy

1. //es5为对象添加方法  
2.     const people = {  
3.         name: 'lux',  
4.         getName: function() {  
5.             console.log(this.name)  
6.         }  
7.     }  
8.   
9. //es6为对象添加方法  
10.     const people = {  
11.         name: 'lux',  
12.         getName () {  
13.             console.log(this.name)  
14.         }  
15.     }  

es6中提供了object.assign()方法来实现浅复制，object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象，第一参数即为目标对象，在实际开发中，我们为了不改变源对象，一般会把目标对象传为{}

[javascript]  view plain  copy

1. const obj = Object.assign({}, objA, objB)  

5、更方便的数据访问——解构

ES5我们提取对象中的信息形式如下：

[javascript]  view plain  copy

1. const people = {  
2.     name: 'lux',  
3.     age: 20  
4. }  
5. const name = people.name  
6. const age = people.age  
7. console.log(name + ' --- ' + age)  

es6中我们可以这样提取：

[javascript]  view plain  copy

1. //对象  
2.     const people = {  
3.         name: 'lux',  
4.         age: 20  
5.     }  
6.     const { name, age } = people  
7.     console.log(`${name} --- ${age}`)  
8.     //数组  
9.     const color = ['red', 'blue']  
10.     const [first, second] = color  
11.     console.log(first) //'red'  
12.     console.log(second) //'blue'  

转自：https://www.jianshu.com/p/287e0bb867ae