一.变量声明const和let
- 变量提升：在ES6之前，我们都是用
var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:
function aa() {
if(flag) {
var test = 'hello man'
} else {
console.log(test)
}
}
//等价于
function aa() {
var test // 变量提升，函数最顶部
if(flag) {
test = 'hello man'
} else {
//此处访问 test 值为 undefined
console.log(test)
}
//此处访问 test 值为 undefined
}
//所以不用关心flag是否为 true or false。实际上，无论如何 test 都会被创建声明。- 通常用
let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。即：在一个函数内部或者在一个代码块内部。说白了只要在{}花括号内的代码块即可以认为let和const的作用域。
function aa() {
if(flag) {
let test = 'hello man'
} else {
//test 在此处访问不到
console.log(test)
}
//let
//作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。
//不能重复声明
//TDZ暂时性死区const 声明的变量必须提供一个值，而且会被认为是常量，意思就是它的值被设置完成后就不能再修改了。
const name = 'aa';
name = 'bb'
//再次赋值会报错
//如果const的是一个对象，对象不可变，但是对象所包含的值是可以被修改的
//就是对象所指的地址不能改变，变量成员可以修改
//常在引入模块时使用
const student = { name: 'cc' }
// 没毛病
student.name = 'yy'
//会报错
student = { name: 'yy' }- TDZ暂时性死区，JS引擎扫描代码时，如果发现变量声明，用
var声明变量时会将声明提升到函数或全局作用域的顶部。但是let或者const，会将声明关进一个小黑屋也是TDZ(暂时性死区)，只有执行到变量声明这句语句时，变量才会从小黑屋被放出来，才能安全使用这个变量。
{
console.log(value) // 报错
let value = 'lala'
}- 应用
var funcs = []
for (var i = 0; i < 10; i++) {
funcs.push(function() { console.log(i) })
}
funcs.forEach(function(func) {
func()
})
//会输出十次10
// ES5知识，我们可以利用“立即调用函数”解决这个问题
var funcs = []
for (var i = 0; i < 10; i++) {
funcs.push(
(function(value) {
return function() {
console.log(value)
}
})(i)
)
}
funcs.forEach(function(func) {
func()
})
// 再来看看es6怎么处理的
const funcs = []
for (let i = 0; i < 10; i++) {
funcs.push(function() {
console.log(i)
})
}
funcs.forEach(func => func())二.字符串
- 模板字符串：第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
//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>`- 新增方法：
// 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)三.函数
- 函数默认参数设置：
//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- 箭头函数：不需要function关键字创建函数，省略return关键字，继承上下文的this关键字，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
}
//如果缺少()或者{}就会报错例如：函数表达式：
//参数不传参 必须加括号 var fn2 =()=>2;
//参数传一个 参数代替括号 var fn2 =a=>a+2;
//参数传两个 必须加括号 var fn2 =（a,b）=>a+b;
//返回对象时，返回处要加括号 var fn2 =（a,b）=>({num:a+b});
//返回值要加判断，大括号里加return var fn2 =（a,b）=>{ if(a>10){ a= 0} return a+b};- 不可以当做new构造函数（区别于函数声明与函数表达式），不能使用argument对象。
- 因为不能使用arguments这个类数组，使用rest参数替代显示。
function fn（a,...arr）{//rest参数把剩下的实参放到数组中，此为真数组
console.log(arr.push)
}四.拓展的对象功能
- 对象初始化简写：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)五.数据访问解构
数组和对象是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'- 应用：
var body = request.body
var username = body.username
var password = body.password
//重新解构
const { body, body: { username, password } } = request六.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"}- 获取数组或者对象除了前几项或者除了某几项的其他项（反写+rest）
//数组--rest必须放在最后
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 }
七.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
八.Promise
在promise之前代码过多的回调或者嵌套，可读性差、耦合度高、扩展性低。通过Promise机制，扁平化的代码机构，大大提高了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。-------用同步的方式去写异步代码
- 图片的加载写成Promise对象：
var preloadImage = function (path) {
return new Promise(function (resolve, reject) {
var image = new Image();
image.onload = resolve;
image.onerror = reject;
image.src = path;
});
};- 异步数据获取：
// 第一部分 数据获取和加工阶段
var getUserName = function(){
return new Promise(function(resolve,reject){
$.get('xxx.com/getUserName',function(data){
resolve(data);
});
};
var getMobile = function(userName){
return new Promise(function(resolve,reject){
$.get('xxx.com/getUserMobile?user='+userName,function(data){
resolve(data);
});
});
}
// 第二部分 业务逻辑部分
getUserName().then(function(userName){
return getMobile(userName);
}).then(function(mobile){});
}- 注意！我只是new了一个对象，并没有调用它，我们传进去的函数就已经执行了，这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return runAsync3();
})
.then(function(data){
console.log(data);
});
function runAsync1(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务1执行完成');
resolve('随便什么数据1');
}, 1000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务2执行完成');
resolve('随便什么数据2');
}, 2000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务3执行完成');
resolve('随便什么数据3');
}, 2000);
});
return p;
}- 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了，比如我们把上面的代码修改成这样：
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return '直接返回数据'; //这里直接返回数据
})
.then(function(data){
console.log(data);
});
//执行数据2的时候直接返回不再执行下去- reject：前面的例子都是只有“执行成功”的回调，还没有“失败”的情况，reject的作用就是把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。
function getNumber(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的随机数
if(num<=5){
resolve(num);
}
else{
reject('数字太大了');
}
}, 2000);
});
return p;
}
getNumber()
.then(
function(data){
console.log('resolved');
console.log(data);
},
function(reason, data){
console.log('rejected');
console.log(reason);
}
);
//getNumber函数用来异步获取一个数字，2秒后执行完成，如果数字小于等于5，我们认为是“成功”了，
//调用resolve修改Promise的状态。否则我们认为是“失败”了，调用reject并传递一个参数，作为失败的原因。- catch:其实它和then的第二个参数一样，用来指定reject的回调，效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
console.log(somedata); //此处的somedata未定义
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});在resolve的回调中，我们console.log(somedata);而somedata这个变量是没有被定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是在这里，也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了，这与我们的try/catch语句有相同的功能。
- all：romise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);
});用Promise.all来执行，all接收一个数组参数，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。那么，三个异步操作返回的数据哪里去了呢？都在then里面呢，all会把所有异步操作的结果放进一个数组中传给then，就是上面的results。有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。
- race：all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是race方法，这个词本来就是赛跑的意思。race的用法与all一样，我们把上面runAsync1的延时改为1秒来看一下：
Promise
.race([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);
});在then里面的回调开始执行时，runAsync2()和runAsync3()并没有停止，仍旧再执行。于是再过1秒后，输出了他们结束的标志。使用场景还是很多的，比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，
//请求某个图片资源
function requestImg(){
var p = new Promise(function(resolve, reject){
var img = new Image();
img.onload = function(){
resolve(img);
}
img.src = 'xxxxxx';
});
return p;
}
//延时函数，用于给请求计时
function timeout(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
reject('图片请求超时');
}, 5000);
});
return p;
}
Promise
.race([requestImg(), timeout()])
.then(function(results){
console.log(results);
})
.catch(function(reason){
console.log(reason);
});requestImg函数会异步请求一张图片，我把地址写为"xxxxxx"，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。
九.Generators
生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。
Generators最主要的特点就是单线程执行，同步风格的代码编写，同时又允许你将代码的异步特性隐藏在程序的实现细节中。这使得我们可以用非常自然的方式来表达程序或代码的流程，而不用同时还要兼顾如何编写异步代码。
也就是说，通过generator函数，我们将程序具体的实现细节从异步代码中抽离出来（通过next(..)来遍历generator函数），从而很好地实现了功能和关注点的分离。
一个最简单的例子，generator函数内部不需要任何异步执行代码即可完成整个异步过程的调用。
$.get('a.html',function(dataa) {
console.log(dataa);
$.get('b.html',function(datab) {
console.log(datab);
$.get('c.html',function(datac) {
console.log(datac);
});
});
});
// a.html
// b.html
// c.html- 如果使用generator函数来实现上面代码的逻辑：
function request(url) {
$.get(url, function(response){
it.next(response);
});
}
function* ajaxs() {
console.log(yield request('a.html'));
console.log(yield request('b.html'));
console.log(yield request('c.html'));
}
var it = ajaxs();
it.next();
// a.html
// b.html
// c.htmlajaxs函数执行的第一步是request('a.html')，这是一个异步函数，但没关系，JS引擎会耐心等它执行完，它执行的第一步是向a.html发请求，回调执行it.next(response)，也就是把response传递给it.next()，这就有趣味了，这个next是第几个next？第二个。因为最初已经执行了一个了。现在有种什么感觉？没错，迭代的感觉。再复习一下next的参数，.next(response)意味着什么？意味着覆盖上一个yield语句的返回值。然后，yield request('a.html')将迭代暂停，然而下一个迭代已经开始了。
最终形成了什么？在每一个阶段开始，next(参数)干了两件事，第一件事是用参数覆盖前一个yield语句的值，第二件事是执行本阶段的代码，这样不断迭代下去，最终形成了一个next触发了一串next。这就形成了一个现象：最开始的一个.next()触发了一连串的request函数的执行，无论啥时候我想要执行这一串异步操作，我都只需要两行代码：var it = ajaxs(); it.next();就够了。
- 生成规则
第1步：将所有异步代码的每一步都封装成一个普通的、可以有参数的函数，比如上面的request函数。你可能问，上面例子为啥三个异步代码却只定义了一个request函数？因为request函数能复用的嘛。如果不能复用的话，请老老实实定义三个普通函数，函数内容就是需要执行的异步代码。
第2步：定义一个生成器函数，把流程写进去，完全的同步代码的写法。生成器函数可以有参数。
第3步：定义一个变量，赋值为迭代器对象。迭代器对象可以加参数，参数通常将作为流程所需的初始值。
第4步：变量名.next()。不要给这个next()传参数，传了也没用，因为它找不到上一个yield语句。 - 与promise相比
new Promise(function(resolve) {
$.get('a.html',function(dataa) {
console.log(dataa);
resolve();
});
}).then(function(resolve) {
return new Promise(function(resolve) {
$.get('b.html',function(datab) {
console.log(datab);
resolve();
});
});
}).then(function(resolve) {
$.get('c.html',function(datac) {
console.log(datac);
});
});Promise的写法的优点就是理解起来很简单，每一步中间用then一连就OK。
Promise的写法的缺点就是各种promise实例对象跟一连串的then，代码量大、行数多，满眼的promise、then、resolve看得头晕，而且每一个then都是一个独立的作用域，传递参数痛苦
- yield的作用就是暂停，没有别的作用。
Promises的原理是等待。 - yield的原理是靠驱动，好比有个领导（就是
g()），领导很聪明，他脑袋里装着所有流程，然后他命令你办事，无论办好还是办砸，只要你办完了你就休息。1小时后，你办好了，然后把材料交给领导，这时候你休息（也就是yield），然后领导又去找甲（如果你办砸了，领导就找乙），领导让甲立即办下一个事。甲比如说办砸了，交给了领导，甲就休息了，领导又去找丁（如果甲办的好，领导就去找丙而不是丁）。这样形成递归循环。这种方式保证了执行顺序不会乱。
按理说，人都休息了，怎么可能事情还能办下去？妙就妙在，甲休息的前一刻，甲把事情交给了领导，由领导继续找人继续做，所以即使甲休息，事情依然可以继续办下去。所以核心是交给领导的这一步（也就是.next()）。
Promises的原理是，根本没有领导，领导把流程贴到墙上就溜了，员工就按条文办事即可。员工有N个，都是new Promise()，员工无论把事情办好还是办砸，都按照流程把结果告诉别的员工，别的员工都按照流程往下做。
可以看出来，虽然原理有一点点区别，但是结果相同。
- async 函数就是 Generator 函数的语法糖。
var gen = function* (){
var f1 = yield readFile('./a.txt');
var f2 = yield readFile('./b.txt');
console.log(f1.toString());
console.log(f2.toString());
};
var asyncReadFile = async function (){
var f1 = await readFile('./a.txt');
var f2 = await readFile('./b.txt');
console.log(f1.toString());
console.log(f2.toString());
};上面的为Generator函数读取两个文件，下面为async/await读取，比较可发现，两个函数其实是一样的，async不过是把Generator函数的*号换成async，yield换成await。
async function test() {
return "async 有什么用？";
}
const result = test();
console.log(result)输出：Promise { 'async 有什么用？' }
可以看到，输出的是一个Promise对象！
所以，async函数返回的是一个Promise对象，如果直接return 一个直接量，async会把这个直接量通过PromIse.resolve()封装成Promise对象。
async的优点：
（1）内置执行器
Generator 函数的执行必须靠执行器，所以才有了 co 函数库，而 async 函数自带执行器。也就是说，async 函数的执行，与普通函数一模一样，只要一行。
（2） 语义化更好
async 和 await，比起星号和 yield，语义更清楚了。async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。
（3）更广的适用性
yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
