React-redux-webpack项目总结之用到的Es6基本语法

上个暑假在公司实习的一个app商城项目，十一月初才上线，也没来得及总结学到的东西，不过有关于前端这些日新月异的东西，说不定等我毕业又是一番新气象，不过就像我宇哥说的核心思想都不会发生太大变化，学会触类旁通咯~，不知道沉浸java后台的我还有没有机会在将来继续开启我前端菜鸟历程了。。。还是想了想把学到的一些东西做一些沉淀，不管将来用不用的到，也希望能对大家有所帮助。

本文先整理一下用到的Es6的一些新特性，貌似React挺拥抱Es6

1. let

let只在所在的代码块中有效

不存在变量声明提升

不能重复定义相同变量名

for (var i = 0; i < 10; i++) {}
console.log(i); //10

for(let j = 0; j < 10; j++) {}
console.log(j);// Error: j is not define

2、const

大部分与let差不多。
const （只读）（一旦声明必须赋值）
const MAX = 123;
MAX = 1; //转码阶段就爆错了。

3、箭头函数

ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs

// 六种语言中的简单lambda表达式函数示例
function (a) { return a > 0; } // JS
[](int a) { return a > 0; }  // C++
(lambda (a) (> a 0))  ;; Lisp
lambda a: a > 0  # Python
a => a > 0  // C#
a -> a > 0  // Java

Es6和Es5的对比

// ES5
var selected = allJobs.filter(function (job) {
return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());

4、Class

ES6中添加了对类的支持，引入了class关键字，其实class在JavaScript中一直是保留字

//类的定义
class Animal {
//ES6中新型构造器
constructor(name) {
this.name = name;
}
//实例方法
sayName() {
console.log('My name is '+this.name);
}
}
//类的继承
class Programmer extends Animal {
constructor(name) {
//直接调用父类构造器进行初始化
super(name);
}
program() {
console.log("I'm coding...");
}
}

5、默认参数值

function sayHello(name){
//传统的指定默认参数的方式
var name=name||'dude';
console.log('Hello '+name);
}
//运用ES6的默认参数
function sayHello2(name='dude'){
console.log(`Hello ${name}`);
}
sayHello();//输出：Hello dude
sayHello('Wayou');//输出：Hello Wayou
sayHello2();//输出：Hello dude
sayHello2('Wayou');//输出：Hello Wayou

6、不定参数

不定参数的格式是三个句点后跟代表所有不定参数的变量名

//将所有参数相加的函数
function add(...x){
return x.reduce((m,n)=>m+n);
}
//传递任意个数的参数
console.log(add(1,2,3));//输出：6
console.log(add(1,2,3,4,5));//输出：15

7、拓展参数

它允许传递数组或者类数组直接做为函数的参数

var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖，人二和人三
function sayHello(people1,people2,people3){
console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
sayHello(...people);//输出：Hello Wayou,John,Sherlock

//而在以前，如果需要传递数组当参数，我们需要使用函数的apply方法
sayHello.apply(null,people);//输出：Hello Wayou,John,Sherlock

8、for of 值遍历

var someArray = [ "a", "b", "c" ];

for (v of someArray) {
console.log(v);//输出 a,b,c
}

9、块级作用域

其实这也解释了为什么let、const在自己所在的代码块有效了。
{
var b = 1;
{
var b = 10;
console.log(b); //10
}
console.log(b); //10
}

{
let a = 1;
{
let a = 2;
console.log(a); //2
}
console.log(a); //1
}

10、import

1、ES6引入了自己的模块系统。通过export导出，import导入。
2、与CommonJS不同的是，它是获取模块的引用，到用的时候才会真正的去取值。

3、例如student.js中:
let student = [
{
name: 'xiaoming',
age: 21,
},
{
name: 'xiaohong',
age: 18
}
]
export default student; // 这种导出方式，你可以在import时指定它的名称。

4、在app.js中我们就可以这样用:
import StudentList from './student.js'; //指定名称
console.log(StudentList[0].name); //xiaoming

11、Promises

Promises是处理异步操作的一种模式，之前在很多三方库中有实现，比如jQuery的deferred 对象。当你发起一个异步请求，并绑定了.when(), .done()等事件处理程序时，其实就是在应用promise模式。

在 Promise 对象当中有两个重要方法————resolve 和 reject。

resolve 方法可以使 Promise 对象的状态改变成成功，同时传递一个参数用于后续成功后的操作，在这个例子当中就是 Hello World! 字符串。

reject 方法则是将 Promise 对象的状态改变为失败，同时将错误的信息传递到后续错误处理的操作。

Promise 的三种状态

上面提到了 resolve 和 reject 可以改变 Promise 对象的状态，那么它究竟有哪些状态呢？

Promise 对象有三种状态：

Fulfilled 可以理解为成功的状态
Rejected 可以理解为失败的状态
Pending 既不是 Fulfilld 也不是 Rejected 的状态，可以理解为 Promise 对象实例创建时候的初始状态

异步操作返回一个promise对象。因此我们在那个promise对象中调用then，并且传给它一个回调函数；then也会返回一个promise。当异步操作结束，它将给promise装上数据。然后(第一次)回调被调用，数据被作为参数传递进去。如果回调不含有返回值，then返回的promise将会立即不带值组装。如果回调返回的不是一个promise，那么then返回的 promise将会立即装载那个数值。如果回调返回一个promise(像例子中的)，那么then返回的 promise将等待直到我们回调返回的promise被完全装载。一旦我们回调的 promise被装载，它装载的值（本例中就是data2）将会被提交给then的promise。然后then中的promise装载了data2

// Let's look at using promises
asyncOperation()
.then(function(data){
// Do some processing with `data`
return anotherAsync();
})
.then(function(data2){
// Some more processing with `data2`
return yetAnotherAsync();
})
.then(function(){
// Yay we're finished!
});

Promise.all

Promise.all 可以接收一个元素为 Promise 对象的数组作为参数，当这个数组里面所有的 Promise 对象都变为 resolve 时，该方法才会返回。

var p1 = new Promise(function (resolve) {
setTimeout(function () {
resolve("Hello");
}, 3000);
});

var p2 = new Promise(function (resolve) {
setTimeout(function () {
resolve("World");
}, 1000);
});

Promise.all([p1, p2]).then(function (result) {
console.log(result); // ["Hello", "World"]
});