一、var, let, const
谈到ES6，估计大家首先肯定会想到var，let，const
咱就先谈谈这三者的区别
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var a = 3; { var a = 4; } console.log(a);//4 let b = 5; { let b = 6; } console.log(b);//5 const c = 7; { const c = 8; } console.log(c);//7 c = 9;//报错 Uncaught TypeError: Assignment to constant variable. |
很简单吧，
var声明的变量可以重新声明，并且是全局作用域，
let声明的变量不可以重新声明，并且是局部作用域，
const声明的变量不可以重新声明，并且不可以更改值，局部作用域（声明的是对象的话，可以更改对象里面某个属性的值），
针对const，再举个例子：
|
1 2 3 4 5 6 7 8 |
const d = { id: 123 }; console.log(d.id);//123 d.id = 456; console.log(d.id);//456 d = 567;//报错 Uncaught TypeError: Assignment to constant variable. |
在实际中，let经常用在for循环上
二、Promise
谈到Promise，首先先谈一下jQuery的Ajax请求，工作中采用Ajax的通常都会在success回调函数之后，进行一系列的DOM相关操作，实际中，可能还会遇到在success后，再次发送一个Ajax请求，接着继续在success里面写一些其他代码，如果多的话，便会产生回调地狱，而引入Promise就是为了解决以上的问题。毕竟异步请求大多采用这个了。回调函数已经不香了。
在Vue项目中，我想axios大家不会陌生吧，这个便是使用Promise结合XMLHttpRequest进行的封装。Ajax是XMLHttpRequest进行的封装。
其实很简单的，稍微介绍下
|
1 2 |
Promsie(function(resolved, rejected){});//使用方法，Promise是构造函数，不是基础类型。参数是一个具有两个函数参数的一个函数。 |
在Promise中，有三种状态：Pending（进行中）、Resolved（已完成）和Rejected（已失败）。一旦执行，返回的结果只有后面两种的其中的一个。这正好印证了Promise英文承诺的意思。
这个构造函数有两个参数，第一个参数指的是成功后执行resolve方法，失败后执行rejected方法。这两个参数是方法，就是所谓的回调函数。
Promise的本质就是回调函数。
举个例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var pro = new Promise(function (resolve, reject) { try { var a = 3;//可以更改值，触发reject函数 if (a == 3) {//a==3 setTimeout(() => { a = 6; resolve(a);//异步执行获取到的数据，传递到resolve函数里面 }, 3000); } else {//a!=3 reject(8); } } catch (err) { console.log(err); } }); pro.then(function (data) { console.log(data);//then的第一个参数就是上面的promise中，resolve调用的数据 }, function (err) { console.log(err);//道理同上，是reject调用的数据 }); |
三、箭头函数跟this
关于this，只需要记住一句话：
this指向调用它的对象。
想要彻底理解，还是需要一定的时间多思考思考的。
怎么理解呢？
举个例子
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//先来个闭包 var name = "The Window"; var object = { name: "My Object", getNameFunc: function () { var that = this; return function () { console.log(this.name); console.log(that.name); } } }; object.getNameFunc()();//先打印出 The Window 再打印出 My Object |
上面用到了闭包，理解闭包
首先分析下代码，执行object.getNameFunc()返回的是一个函数，然后再执行返回的这个函数。在这里，执行返回的函数其实是由window调用的，所以这里的this指向的是window，而不是object。
那么箭头函数到底解决了什么样的问题？
请继续看下面的代码
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var name = "The Window"; var object = { name: "My Object", getNameFunc: function () { //var that = this; return () => { console.log(this.name); } } }; object.getNameFunc()();//打印出My Object |
正如上面的代码，省略了var that=this; 不需要再通过变量来保存this了。关于this跟that在Vue项目中，我们经常会用到，而且经常会碰到this指向问题，需要再定义一个that保存this指向。而ES6引入箭头函数，便很好地解决了这个问题。
call跟apply，更改this指向
关于this指向问题，不得不谈下call跟apply这两个方法。因为这两个方法是可以改变this指向。
详细介绍下：
举个例子
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var name = "The Window"; var object = { name: "My Object", getNameFunc: function () { //var that = this; return function (x, y) { console.log(this.name); console.log(x + y); //console.log(that.name); } } }; object.getNameFunc().call(object, 1, 2);//call的使用，将this指向object object.getNameFunc().apply(object, [1,2]);//apply的使用 call跟apply一样的，仅仅是参数不同。 |
四、三个点(…)的使用
啰嗦一句，这三个点叫法，还挺多的，有的叫展开运算符，有的叫剩余运算符、解构运算符啥的等。
说下实际使用场景，也就是为啥ES6要引入这个。
1、数组合并
|
1 2 3 4 5 6 7 |
let a = [1, 2, 3]; let b = [4, 5, 6]; let c = [...a, ...b]; let d = a.concat(b); console.log(c);//[1, 2, 3, 4, 5, 6] console.log(d);//[1, 2, 3, 4, 5, 6] |
正如代码，使用…可以代替concat。
2、解构赋值
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var res.data={ "animals": { "dog": [ { "name": "Rufus", "age":15 }, { "name": "Marty", "age": null } ] } }; //要取到animals的值，我们通常是怎么做的？ var animals = res.data.animals; var { animals } = res.data;//以下是使用ES6的做法，这便是优势，如果是数组的话，道理一样 let [a, [[b], c], ...d] = [1, [[2], 3], 4, 5, 6]; console.log(a);//1 console.log(b);//2 console.log(c);//3 console.log(d);//[4,5,6] |
3、两数交换
顺便复习下选择排序算法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//选择排序 function selectionSort(arr) { var len = arr.length; var minIndex, temp; for (let i = 0; i < len - 1; i++) { minIndex = i; for (let j = i + 1; j < len; j++) { if (arr[j] < arr[minIndex]) { minIndex = j; } } temp = arr[i]; arr[i] = arr[minIndex]; arr[minIndex] = temp; //这里的两数交换，3行代码可以写成1行 [arr[i]] = [arr[minIndex]]; } return arr; } |
在vuex中，经常会遇到的。
|
1 2 3 4 5 |
...mapGetters({ // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount` doneCount: 'doneTodosCount' }) |
人生莫惧少年穷，趁着年轻，好好规划自己的人生！！！
本篇完 End!