ES6

一、变量

1、let

以前，我们使用var关键字来声明变量，但是var并不完美，因为会存在变量提升的问题。

console.log(a);     //输出defined
var a=10;
console.log(b);     //报错：ReferenceError: b is not defined
var b=5;

再来看var和let的作用域范围，甚至于：

for (var i = 0; i < 10; i++) {}
document.write(i);  //输出10

for (let i = 0; i < 10; i++) {}
document.write(i);  //报错：ReferenceError: i is not defined

用var声明的变量，会存在内存泄漏的风险，因为此变量并不会被及时销毁；
而let就不一样了，只要出了这个代码块，就会及时的被销毁。

2、const

const用来声明常量，如果值是数字或字符串，那么值不可以被改变。
如果声明的是对象，那么对象中的属性的值是可以被改变的，因为内存地址并没有发生变化。

二、模板语言

//过去，我们要这样做，使用加号拼接
let name="Vito";
console.log("I'm "+ name);

//现在，这样就可以了，这就叫做模板语言
let name="Vito";
console.log(`I'm ${name}`);

在` `中，你可以随意的去写格式，比如换行。它会保存你固有的格式。

三、默认参数

function add(flag=true){
    //给参数设定一个默认值
}

四、箭头函数

比如，有一个数组，我们去遍历每一个值，在回调中，给其加2并返回，得到一个新的数组：

//过去的方法
let arr1=[1,2,3];
let newArr1=arr1.map(function(data){
	return data+2;
})
console.log(newArr1);

//箭头函数
let arr2=[5,6,7];
let newArr2=arr2.map(data=>{
	return data+2;
})
console.log(newArr2);

//如果回调中只有一行代码，还可以去掉{}和return，简写为：
let arr3=[5,6,7];
let newArr3=arr3.map(data=>data+2)
console.log(newArr3);

而且，箭头函数不会改变作用域，箭头里面的this，指向的也是外层的作用域。

五、数组、字符串、对象解构

//对数组的结构
let [a,b,c]=[1,2,3];
console.log(`a=${a}, b=${b}, c=${c}`);

//对字符串的结构
let [x,y,z]="ES6";
console.log(`x=${x}, y=${y}, z=${z}`);


//对对象的解构(这里也是用对象接收，通过对象的key对其拆分，但是可以调整n和m的顺序)
let {n,m}={n:10,m:20};
console.log(`n=${n}, m=${m}`);

六、for循环

function sum(){
	let arr=[3,4,5,6];
	for(let a of arr){
		console.log(a);
	}
}

七、函数的Rest参数

//过去的做法，并不确定用户实际会传几个参数过来，因此只能先做非空判断
function sum1(x,y,z){
	let total=0;
	if(x) total+=x;
	if(y) total+=y;
	if(z) total+=z;
	console.log(total);
}

sum1(1,2,3);


//动态接收参数
function sum2(...m){
	let total=0;
	for(let a of m){
		total+=a;
	}
	console.log(total);
}

sum2(1,2,3,4,5);

...有很多的含义，但是如果放在形参当中，并且和m这样的一个变量组合，就叫Rest参数，表示动态的，不确定的，不知道会传多少个参数进来。

而在ES6中，又有了不同的做法：

let sum3=(...m)=>{	//括号即代表一个function，一个函数
	let total=0;
	for(let a of m){
		total+=a;
	}
	console.log(total);
}		

sum3(1,2,3,4,5);

八、扩展

• 数组的扩展

...和数组结合，就称之为函数的扩展。因为它是一种运算符，就会进行运算，把数组拆解。
比如，要想把两个数组合并，过去有一种数组.concat()的方法：

//两个数组合并，过去的方法
let arr1=[1,2];
let arr2=[3,4]
let arr3=(arr1.concat(arr2));
console.log(arr3);

//使用数组扩展的方法
console.log([...arr1,...arr2]);

...arr1,...arr2 就表示对数组arr1和arr2进行了解构，同时在外层又包了一层[]，就表示最终形成了一个新的数组。

在五、数组、字符串、对象解构也提到了数组的结构，对号入座。其实还有一种扩展的形式，比如，当不确定数组的长度时，可以将接收的变量设置为动态的：

//数组结构，对号入座
let [x,y]=[1,2];

//Rest和解构放在一起
let [x,...y]=[1,2,3,4,5];
console.log(y);     //输出：[2, 3, 4, 5]

对字符串的扩展同理。

• 函数的扩展

九、Promise

其实在ES5中就已经大量去使用了，比如jQuery，经常会通过.then来进行回调，它实际上就是一种Promise的结构。它是通过对Promise这种结构的封装，使方法成为这种调用方式。

ES6中，原生JS已经支持Promise，我们可以在函数中new 一个 Promise对象。

而Promise，就是解决以前不断的层层回调，现在直接.then就可以了，通过链式调用，减少冗余代码。

let checkLogin = () => {  	//前面有提到，()即代表一个function，同：function(){}
    
	//Promise是一个对象，这个对象接收一个回调，这个回调有两个参数。
	//resolve：接口调用成功，执行的回调。	reject：接口报错，执行的回调。
    return new Promise((resolve, reject) => {  	
        let flag = document.cookie.indexOf("userId") > -1 ? true : false;

        if (flag) {
            resolve({
                status: 0,
                result: "登录成功"
            })
        } else {
            reject("登录失败");	
            //reject实际上是一种报错，登录失败并不属于报错，因为登录失败表示的是接口和服务器都没有问题，只是用户名和密码输错了。
            //所谓的报错，应该是服务器请求挂了，或者说代码错误导致请求失败。
            //所以reject不应该写在else里面，这里应该还是使用resolve正常返回，这里只是作为演示。
        }
    })
}

checkLogin().then(data => {
    if (data.status == 0) {
        console.log(data.result);
    }
}).catch(error => console.log(`errors:${error}`))

再演示一个链式调用，比如判断登录成功之后，获取到用户id

let checkLogin = () => {
    return new Promise((resolve, reject) => {  	
        let flag = document.cookie.indexOf("userId") > -1 ? true : false;

        if (flag=true) {
            resolve({
                status: 0,
                result: "登录成功"
            })
        } else {
            reject("登录失败");	
        }
    })
}


let getUserInfo=()=>{
	return new Promise((resolve,reject)=>{
		let userInfo={
			userId:101
		}
		resolve(userInfo);	//这里只是演示，直接把userInfo装进去
	})
}


checkLogin().then(data => {
    if (data.status == 0) {
        console.log(data.result);
        return getUserInfo();	//如果登录成功，直接返回用户信息。
        						//因为返回的是Promise, 所以可以继续使用Promise来调用，在函数后.then链式调用
    }
}).catch(error => console.log(`errors:${error}`)).then(data2=>{
	console.log(data2.userId);
})

除此之外，还有一种方式：Promise.all() 可以同时调用多个接口和请求。

let checkLogin = () => {
    return new Promise((resolve, reject) => {  	
        let flag = document.cookie.indexOf("userId") > -1 ? true : false;

        if (flag=true) {
            resolve({
                status: 0,
                result: "登录成功"
            })
        } else {
            reject("登录失败");	
        }
    })
}

let getUserInfo=()=>{
	return new Promise((resolve,reject)=>{
		let userInfo={
			userId:101
		}
		resolve(userInfo);	//这里只是演示，直接把userInfo装进去
	})
}

Promise.all([checkLogin(),getUserInfo()]).then(([data1,data2])=>{	//回调中对数组进行解构
	console.log(`result1: ${data1.result}, result2: ${data2.userId}`);
})

十、ES6模块化开发

因为要结合案例，这里先使用vue-cli构建一个SPA应用，将项目跑起来。
随后，在src目录下创建一个新文件：exportdemo.js

export let sum=(x,y)=>{
  return x+y;
}

export let minus=(x,y)=>{
  return x-y;
}

export进行导出，import进行导入。

之后打开src目录下的main.js，添加以下代码：

//一旦暴露出了名字，就需要使用花括号来接收
import {sum,minus} from './exportdemo'

//sum这个变量本身是个函数，因此可以直接执行
console.log(`sum=${sum(1,2)}`);     //输出：sum=3
console.log(`minus=${minus(2,1)}`); //输出：minus=1

然后根据$ npm run dev得到的『Project is running at...』打开页面，得到输出结果。

main.js中import语句还可以换种写法：

import * as util from './exportdemo'

console.log(`sum=${util.sum(1,2)}`);     //输出：sum=3
console.log(`minus=${util.minus(2,1)}`); //输出：minus=1

1、import方法

import方法可以按需加载js文件。过去的SPA，打包以后会生成一个js文件，这个js文件会非常庞大，有了import之后，就可以按需加载。使用了import方法，那么在一开始，就不会把相应的js文件打包进去，直到程序执行到某一步操作的时候，才会加载对应的js文件。

语法：
import("js文件路径");