一、let声明变量

1、不允许重复声明

在同一个函数或块作用域中重复声明同一个变量会引起错误。

  1. if (x) {
  2. let foo;
  3. let foo; // SyntaxError thrown.
  4. }

2、只能在声明的块级中使用

  1. let x = 1;
  2. if (x === 1) {
  3. let x = 2;
  4. console.log(x);
  5. // expected output: 2
  6. }
  7. console.log(x);
  8. // expected output: 1

let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与 var关键字不同的是, var声明的变量只能是全局或者整个函数块的。 var和 let 的不同之处在于后者是在编译时才初始化(见下面)。
就像const一样,let不会在全局声明时(在最顶部的范围)创建window 对象的属性。
如下所示

  1. console.log(test);
  2. var test = 1;
  3. // 输出: undefined
  4. console.log(temp)
  5. let temp = 1;
  6. //错误: Error: Cannot access 'test' before initialization

二、箭头函数

箭头函数表达式的语法比普通的函数表达式语法更为简洁,但是没有自己的this、arguments、super等。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能够作为构造函数。

1、箭头函数的语法

  1. //当该函数需要传入多个参数的时候,参数列表需要使用圆括号括起来
  2. (param1,param2,param3) => {
  3. ```函数体
  4. }
  5. //当某个函数的参数只有一个的时候,则不需要使用圆括号括起来
  6. param => {
  7. ```函数体
  8. }
  9. // 没有参数的函数应该写成一对圆括号。
  10. () => { statements }
  11. (param1, param2, …, paramN) => expression
  12. //相当于:(param1, param2, …, paramN) =>{ return expression; }

2、更短的函数

  1. var elements = [
  2. 'Hydrogen',
  3. 'Helium',
  4. 'Lithium',
  5. 'Beryllium'
  6. ];
  7. elements.map(function(element) {
  8. return element.length;
  9. }); // 返回数组:[8, 6, 7, 9]
  10. // 上面的普通函数可以改写成如下的箭头函数
  11. elements.map((element) => {
  12. return element.length;
  13. }); // [8, 6, 7, 9]
  14. // 当箭头函数只有一个参数时,可以省略参数的圆括号
  15. elements.map(element => {
  16. return element.length;
  17. }); // [8, 6, 7, 9]
  18. // 当箭头函数的函数体只有一个 `return` 语句时,可以省略 `return` 关键字和方法体的花括号
  19. elements.map(element => element.length); // [8, 6, 7, 9]
  20. // 在这个例子中,因为我们只需要 `length` 属性,所以可以使用参数解构
  21. // 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称,而 `lengthFooBArX` 则只是个变量名,
  22. // 可以替换成任意合法的变量名
  23. elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

三、Promise

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。
一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值,而是会返回一个 promise,以便在未来某个时候把值交给使用者。
一个 Promise 必然处于以下几种状态之一:

  • 待定(pending): 初始状态,既没有被兑现,也没有被拒绝。
  • 已兑现(fulfilled): 意味着操作成功完成。
  • 已拒绝(rejected): 意味着操作失败。

下面演示用Promise实现ajax请求

1、创建一个Promise对象

  1. const p = new Promise((resolve,reject)=>{
  2. });

2、在Promise中使用原生js发送ajax请求

  1. <script type="text/javascript">
  2. const p = new Promise((resolve,reject)=>{
  3. //1、创建一个异步请求的对象
  4. const xhr = new XMLHttpRequest;
  5. //2、定义请求方式和请求的url
  6. xhr.open("GET","http://127.0.0.1:8080/qmx");
  7. //3、发送请求
  8. xhr.send();
  9. //绑定状态改变的事件
  10. xhr.onreadystatechange = function(){
  11. //如果请求已经完成并且响应已经就绪
  12. if(xhr.readyState === 4){
  13. //返回的状态码在200~299之间才是正常的状态码
  14. if(xhr.status >= 200 && xhr.status < 300){
  15. //将返回的信息丢给resolve 表示sucesss
  16. resolve(xhr.response);
  17. }
  18. else{
  19. //将返回的状态码丢给reject 表示error
  20. reject(xhr.status);
  21. }
  22. }
  23. }
  24. });
  25. /*promise.then() 以两个函数作为参数
  26. 1、第一个参数是成功的回调函数
  27. 当promise对象的状态是resolved的时候,就会调用第一个函数
  28. 2、第二个参数是失败的回调函数
  29. 当promise对象的状态是rejected的时候,就会调用第二个函数
  30. */
  31. p.then(data=>{
  32. console.log(data);
  33. },err=>{
  34. console.error(err);
  35. })
  36. </script>

四、模块化

博客: https://www.jianshu.com/p/6c1b0e2b53c3
深入浅出ES6教程『模块化』