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"]
});