ES6新功能总结
1.变量声明const和let
var声明变量，会变量提升。
用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。不会提升。
2.模板字符串
es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。
第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
//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
3.函数
函数默认参数
在ES5我们给函数定义参数默认值是怎么样？
function action(num) {
num = num || 200
//当传入num时，num为传入的值
//当没传入参数时，num即有了默认值200
return num
}
但细心观察的同学们肯定会发现，num传入为0的时候就是false，但是我们实际的需求就是要拿到num = 0，此时num = 200 明显与我们的实际想要的效果明显不一样.
ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
function action(num = 200) {
console.log(num)
}
action(0) // 0
action() //200
action(300) //300
箭头函数
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特点。
1.不需要 function 关键字来创建函数
2.省略 return 关键字
3.继承当前上下文的 this 关键字
//例如：
[1,2,3].map(x => x + 1)
//等同于：
[1,2,3].map((function(x){
return x + 1
}).bind(this))
说个小细节。
当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return；例如:
var people = name => 'hello' + name
//参数name就没有括号
作为参考
var people = (name, age) => {
const fullName = 'hello' + name
return fullName
}
//如果缺少()或者{}就会报错
箭头函数与传统JS函数的区别
1.没有this、super、arguments和new.target绑定 箭头函数中的this、super、arguments和new.target这些值由外围最近一层非箭头函数决定。
2.不能通过new关键字调用 箭头函数没有[[Construct]]方法，所以不能被用作构造函数，如果通过new关键字调用箭头函数，程序会抛出错误。
3.没有原型 由于不可以通过new关键字调用箭头函数，因而没有构建原型的需求，所以箭头函数不存在prototype这个属性。
4.不可以改变this的绑定 函数内部的this值不可被改变，在函数的生命周期内始终保持一致。
5.不支持arguments对象 箭头函数没有arguments绑定，所以你必须通过命名参数和不定参数这两种形式访问函数的参数。
6.不支持重复的命名参数 无论在严格还是非严格模式下，箭头函数都不支持重复的命名参数；而在传统函数的规定中，只有在严格模式下才不能有重复的命名参数。
4.拓展的对象功能
对象初始化简写
ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：
function people(name, age) {
return {
name: name,
age: age
};
}
键值对重名，ES6可以简写如下：
function people(name, age) {
return {
name,
age
};
}
ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法：
const people = {
name: 'lux',
getName: function() {
console.log(this.name)
}
}
ES6通过省略冒号与 function 关键字，将这个语法变得更简洁
const people = {
name: 'lux',
getName () {
console.log(this.name)
}
}
ES6 对象提供了 Object.assign()这个方法来实现浅复制。
Object.assign() 可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}
const objA = { name: 'cc', age: 18 }
const objB = { address: 'beijing' }
const objC = {} // 这个为目标对象
const obj = Object.assign(objC, objA, objB)
// 我们将 objA objB objC obj 分别输出看看
console.log(objA) // { name: 'cc', age: 18 }
console.log(objB) // { address: 'beijing' }
console.log(objC) // { name: 'cc', age: 18, address: 'beijing' }
console.log(obj) // { name: 'cc', age: 18, address: 'beijing' }
// 是的，目标对象ObjC的值被改变了。
// so，如果objC也是你的一个源对象的话。请在objC前面填在一个目标对象{}
Object.assign({}, objC, objA, objB)
5.更方便的数据访问–解构
数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程
ES5我们提取对象中的信息形式如下：
const people = {
name: 'lux',
age: 20
}
const name = people.name
const age = people.age
console.log(name + ' --- ' + age)
是不是觉得很熟悉，没错，在ES6之前我们就是这样获取对象信息的，一个一个获取。现在，解构能让我们从对象或者数组里取出数据存为变量，例如
//对象
const people = {
name: 'lux',
age: 20
}
const { name, age } = people
console.log(`${name} --- ${age}`)
//数组
const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red'
console.log(second) //'blue'
要不来点儿面试题，看看自己的掌握情况？
// 请使用 ES6 重构一下代码
// 第一题
var jsonParse = require('body-parser').jsonParse
// 第二题
var body = request.body
var username = body.username
var password = body.password
// 1.
import { jsonParse } from 'body-parser'
// 2.
const { body, body: { username, password } } = request
6.Spread Operator 展开运算符
ES6中另外一个好玩的特性就是Spread Operator 也是三个点儿…接下来就展示一下它的用途。
组装对象或者数组
//数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]
//对象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
}
有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项
//数组
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5
//对象
const user = {
username: 'lux',
gender: 'female',
age: 19,
address: 'peking'
}
const { username, ...rest } = user
console.log(rest); //{"address": "peking", "age": 19, "gender": "female"}
}
对于 Object 而言，还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边
const first = {
a: 1,
b: 2,
c: 6,
}
const second = {
c: 3,
d: 4
}
const total = { ...first, ...second }
console.log(total) // { a: 1, b: 2, c: 3, d: 4 }
7.import 和 export,模块化
import导入模块、export导出模块
//全部导入
import people from './example'
//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())
//导入部分
import {name, age} from './example'
// 导出默认, 有且只有一个默认
export default App
// 部分导出
export class App extend Component {};
以前有人问我，导入的时候有没有大括号的区别是什么。下面是我在工作中的总结：
1.当用export default people导出时，就用 import people 导入（不带大括号）
2.一个文件里，有且只能有一个export default。但可以有多个export。
3.当用export name 时，就用import { name }导入（记得带上大括号）
4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age }
5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example
//在ES5中：
//导出
module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
//导入
var service = require('module.js')
console.log(service.port) // 3000
8. Promise
在promise之前代码过多的回调或者嵌套，可读性差、耦合度高、扩展性低。通过Promise机制，扁平化的代码机构，大大提高了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。
说白了就是用同步的方式去写异步代码。
发起异步请求
fetch('/api/todos')
.then(res => res.json())
.then(data => ({ data }))
.catch(err => ({ err }));
今天看到一篇关于面试题的很有意思。
setTimeout(function() {
console.log(1)
}, 0);
new Promise(function executor(resolve) {
console.log(2);
for( var i=0 ; i<10000 ; i++ ) {
i == 9999 && resolve();
}
console.log(3);
}).then(function() {
console.log(4);
});
console.log(5);
/* 2 3 5 4 1 */
promise详见 ES6之对象详解
9.Generators
生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号，在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。
这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号，机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了，直到下一个人再次唤起才会继续吐票。
OK。说说迭代器。当你调用一个generator时，它将返回一个迭代器对象。这个迭代器对象拥有一个叫做next的方法来帮助你重启generator函数并得到下一个值。next方法不仅返回值，它返回的对象具有两个属性：done和value。value是你获得的值，done用来表明你的generator是否已经停止提供值。继续用刚刚取票的例子，每张排队号就是这里的value，打印票的纸是否用完就这是这里的done。
// 生成器
function *createIterator() {
yield 1;
yield 2;
yield 3;
}
// 生成器能像正规函数那样被调用，但会返回一个迭代器
let iterator = createIterator();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
那生成器和迭代器又有什么用处呢？
围绕着生成器的许多兴奋点都与异步编程直接相关。异步调用对于我们来说是很困难的事，我们的函数并不会等待异步调用完再执行，你可能会想到用回调函数，（当然还有其他方案比如Promise比如Async/await）。
生成器可以让我们的代码进行等待。就不用嵌套的回调函数。使用generator可以确保当异步调用在我们的generator函数运行一下行代码之前完成时暂停函数的执行。
那么问题来了，咱们也不能手动一直调用next()方法，你需要一个能够调用生成器并启动迭代器的方法。就像这样子的
function run(taskDef) { //taskDef即一个生成器函数
// 创建迭代器，让它在别处可用
let task = taskDef();
// 启动任务
let result = task.next();
// 递归使用函数来保持对 next() 的调用
function step() {
// 如果还有更多要做的
if (!result.done) {
result = task.next();
step();
}
}
// 开始处理过程
step();
}
生成器与迭代器最有趣、最令人激动的方面，或许就是可创建外观清晰的异步操作代码。你不必到处使用回调函数，而是可以建立貌似同步的代码，但实际上却使用 yield 来等待异步操作结束。
10. ES6中的类
现在有一个baseModel类，其中我们可以定义构造函数和getName()方法。
class baseModel {
constructor(options = {}, data = []) { // class constructor
this.name = 'Base'
this.url = 'http://azat.co/api'
this.data = data
this.options = options
}
getName() { // class method
console.log(`Class name: ${this.name}`)
}
}
注意到我给options和data用了默认参数，而且方法名再也不用加上function或者:了。还有一个很大的区别，你不能像构造函数里面一样向this.Name指派值。怎么说呢，和函数有相同缩进的代码里，你不能向name赋值。如果有这个需要的话，在构造函数里面完成。
使用NAME extends PARENT_NAME语法，AccountModel从baseModel继承而来。 调用父类构造函数时，只需带上参数轻松的调用super()方法。
class AccountModel extends baseModel {
constructor(options, data) {
super({private: true}, ['32113123123', '524214691']) //call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}
想要高级一点的话，你可以像这样弄一个getter方法，这样accountsData就会变成一个属性。
get accountsData() { // 返回计算后的数据
// ... make XHR
return this.data
}
}
现在你要怎么用这个魔咒，很简单，就跟让三岁小孩相信圣诞老人存在一样。
let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)
如果好奇输出结果的话：
```js
Class name: Account Model
Data is 32113123123,524214691