最先用vue也许react，很多时刻我们都邑把ES6这个大兄弟到场我们的手艺栈中。然则ES6那末多那末多特征，我们须要悉数都控制吗？秉着二八准绳，控制好经常运用的，有效的这个可以让我们疾速腾飞。
接下来我们就聊聊ES6那些可爱的新特征吧。
1.变量声明const和let
我们都是晓得在ES6之前，var关键字声明变量。不管声明在那边，都邑被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提拔比方:
function aa() {
if(bool) {
var test = 'hello man'
} else {
console.log(test)
}
}
以上的代码现实上是：
function aa() {
var test // 变量提拔
if(bool) {
test = 'hello man'
} else { //此处接见test 值为undefined
console.log(test)
} //此处接见test 值为undefined
}
所以没必要体贴bool是不是为true or false。现实上，不管如何test都邑被竖立声明。
接下来ES6主角上台：
我们通经常运用let和const来声明，let示意变量、const示意常量。let和const都是块级作用域。怎样明白这个块级作用域？
在一个函数内部
在一个代码块内部
说白了 {}大括号内的代码块即为let 和 const的作用域。
看以下代码：
function aa() {
if(bool) {
let test = 'hello man'
} else { //test 在此处接见不到
console.log(test)
}
}
let的作用域是在它所在当前代码块，但不会被提拔到当前函数的最顶部。
再来说说const。
const name = 'lux'
name = 'joe' //再次赋值此时会报错说一道面试题
var funcs = [];
for (var i = 0; i < 10; i++) {
funcs.push(function() { console.log(i) })
}
funcs.forEach(function(func) {
func()
})如许的面试题是人人罕见，很多同砚一看就晓得输出 10 十次
然则假如我们想顺次输出0到9呢？两种处置惩罚要领。直接上代码。
// ES5通知我们可以运用闭包处置惩罚这个题目
var funcs = [];
for (var i = 0; i < 10; i++) {
func.push(
(function(value) {
return function() {
console.log(value)
}
}(i))
)
} // es6
for (let i = 0; i < 10; i++) {
func.push(function() {
console.log(i)
})
}到达雷同的结果，es6简约的处置惩罚计划是不是是更让你心动！！！
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：推断是不是包含然后直接返回布尔值
let str = 'hahay'
console.log(str.includes('y')) // true
// 2.repeat: 猎取字符串反复n次
let s = 'he'
console.log(s.repeat(3)) // 'hehehe'
//假如你带入小数, Math.floor(num) 来处置惩罚
3.函数
函数默许参数
在ES5我们给函数定义参数默许值是怎样？
function action(num) {
num = num || 200
//当传入num时，num为传入的值
//当没传入参数时，num即有了默许值200
return num
}但仔细视察的同砚们肯定会发明，num传入为0的时刻就是false， 此时num = 200 与我们的现实要的结果显著不一样
ES6为参数供应了默许值。在定义函数时便初始化了这个参数，以便在参数没有被通报进去时运用。
function action(num = 200) {
console.log(num)
}
action() //200
action(300) //300箭头函数
ES6很有意义的一部份就是函数的快速写法。也就是箭头函数。
箭头函数最直观的三个特性。
不须要function关键字来竖立函数
省略return关键字
继承当前上下文的 this 关键字
//比方：
[1,2,3].map( x => x + 1 )//等同于：
[1,2,3].map((function(x){
return x + 1
}).bind(this))说个小细节。
当你的函数有且唯一一个参数的时刻，是可以省略掉括号的。当你函数返回有且唯一一个表达式的时刻可以省略{}；比方:
var people = name => 'hello' + name
//参数name就没有括号作为参考
var people = (name, age) => {
const fullName = 'h' + name;
return fullName
}
//假如缺乏()也许{}就会报错
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 obj = Object.assign({}, 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'
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
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);固然以上promise的知识点，这个只是冰山一角。须要更多地去进修运用。
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 来守候异步操纵完毕。
总结
ES6的特征远不止于此，但关于我们一样平常的开辟开说。这已是够够的了。另有很多有意义的要领。比方findIndex…等等。包含用set来完成面试题常客数组去重题目。我和我的小伙伴们都惊呆了!
