ECMASript 6 新特性

(一）ECMASript 6 新特性

1. let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

• 不允许重复声明
• 块级作用域
• 不存在变量提升
• 不影响作用域链

应用场景：以后声明变量使用let 就对了

案例1：给多个 div 循环注册点击事件

• 错误示例:

  // 错误示例，divs.length === 3
  document.addEventListener('DOMContentLoaded', function () {
       
      let divs = document.querySelectorAll('.box div');
      for (var i = 0; i < divs.length; i++) {
       
          divs[i].addEventListener('click', function () {
       
              divs[i].style.backgroundColor = 'pink';
          });
      }
      console.log(i); // 3
  });
  /*
  i 为当前作用域下的共享变量。
  当每次点击 div 的时候，各个点击事件共享 i 的值。
  此时 i = 3，这将报错。
  */
  

• 正确实例：将以上代码中的 var 改为 let。

案例2：1s 后循环输出所有数字

• 错误示例：

  for (var i = 1; i <= 5; i++) {
       
      setTimeout(() => {
       
          console.log(i);
      }, 1000);
  }
  /*
  输出：6 6 6 6 6
  循环从1-5的时间很短暂，远不及 1s。
  此时五个异步事件瞬间加入到异步事件队列中，等待 1s后依次执行。
  而此时i为6，故瞬间输出 5 个 6。
  异步事件队头
  (1) console.log(i);
  (2) console.log(i);
  (3) console.log(i);
  (4) console.log(i);
  (5) console.log(i);
  */
  

• 正确示例：

  for (let j = 1; j <= 5; j++) {
       
      setTimeout(() => {
       
          console.log(j);
      }, 1000);
  }
  // 输出：1 2 3 4 5
  // let 有块级作用域，每个 j 都会形成一个自己的块级作用域，与相应的异步事件共享：
  // {j = 1;} {j = 2;} {j = 3;} {j = 4;} {j = 5;}
  

• 解决方法2：

  // 给每一个 i 设置一个立即执行函数，会形成自己的块级作用域，不影响外部变量。
  for (var i = 1; i <= 5; i++) {
       
      (function (i) {
       
          setTimeout(() => {
       
              console.log(i);
          }, 1000);
      })(i);
  }
  

2. const 关键字

const 关键字用来声明常量，const 声明有以下特点：

• 声明必须赋初始值
• 标识符一般为大写
• 不允许重复声明
• 值不允许修改
• 块级作用域

注意：对象属性修改和数组元素变化不会出发 const 错误
应用场景：声明对象类型使用 const，非对象类型声明选择 let

案例：

const arr = [1, 2, 3, 4];
arr.push(5, 6);
console.log(arr);
// 不报错

const obj = {
   
    uname: 'rick',
    age: 30
}
obj.age = 40;
// 只要不改变地址，就不报错

3. 变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为 解构赋值。

数组的解构赋值：

const arr = ['red', 'green', 'blue'];
let [r, g, b] = arr;

对象的解构赋值：

const obj = {
   
    uname: 'rick',
    age: 30,
    sayHi: function () {
   
        console.log('hello');
    },
    sayBye() {
   
        console.log('Bye~');
    }
}
let {
   name, age, sayHi} = obj;
let {
   sayBye} = obj;

应用场景：频繁使用对象方法、数组元素，就可以使用解构赋值形式。

4. 模板字符串

模板字符串（template string）是增强版的字符串，用反引号 ` 标识，特点：

• 字符串中可以出现换行符
• 可以使用 ${xxx} 形式输出变量

let name = 'jack';
console.log(`hello, ${
     name}`);

let ul = `<ul>
    <li>apple</li>
    <li>banana</li>
    <li>peach</li>
    </ul>`

应用场景：当遇到字符串与变量拼接的情况使用模板字符串。

5. 简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

let uname = 'rick';
let age = 30;
let sayHi = function () {
   
    console.log('Hi');
}
// 组建对象
const obj = {
   
    uname,
    age,
    sayHi() {
   
        console.log('Hi');
    }
}

应用场景：对象简写形式简化了代码，所以以后用简写就对了。

6. 箭头函数

ES6 允许使用「箭头」=> 定义函数。

• function 写法：

  function fn(param1, param2, …, paramN) {
        
      // 函数体
      return expression; 
  }
  
  

• => 写法：

  let fn = (param1, param2, …, paramN) => {
       
      // 函数体
      return expression;
  }
  
  

箭头函数的 注意点:

• 如果形参只有一个，则小括号可以省略
• 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
• 箭头函数 this 始终指向声明时所在作用域下 this 的值
• 箭头函数不能作为构造函数实例化
• 不能使用 arguments

// 省略小括号
let fn1 = n => {
   
    return n * n;
}

// 省略花括号
let fn2 = (a + b) => a + b;

// 箭头函数 this 始终指向声明时所在作用域下 this 的值
const obj = {
   
    a: 10,
    getA () {
   
        let fn3 = () => {
   
            console.log(this); // obj {...}
            console.log(this.a); // 10
        }
        fn3();
    }

}

案例1：箭头函数 this 始终指向声明时所在作用域下 this 的值，call 等方法无法改变其指向。

let obj = {
   
    uname: 'rick',
    age: 30
};
let foo = () => {
   
    console.log(this);
}
let bar = function () {
   
    console.log(this);
}
// call 对箭头函数无效
foo.call(obj); // window
bar.call(obj); // obj {...}

案例2：筛选偶数

let arr = [2, 4, 5, 10, 12, 13, 20];
let res = arr.filter(v => v % 2 === 0);
console.log(res); // [2, ,4 10, 12, 20]

案例3：点击 div两秒后变成粉色

• 方案1：使用 _this 保存 div 下的 this，从而设置 div 的 style 属性。

  div.addEventListener('click', function () {
       
      let _this = this;
      setTimeout(function () {
       
          console.log(_this); // <div>...<div>
          _this.style.backgroundColor = 'pink';
      }, 2000)
  });
  
  

• 方案2：使用 => 箭头函数

  div.addEventListener('click', function () {
       
      setTimeout(() => {
       
          console.log(thid); // <div>...</div>
          this.style.backgroundColor = 'pink';
      }, 2000);
  });
  
  

7. 函数参数默认值设定

ES6 允许给函数参数设置默认值，当调用函数时不给实参，则使用参数默认值。

具有默认值的形参，一般要靠后。

let add = (x, y, z=3) => x + y + z;
console.log(add(1, 2)); // 6

可与解构赋值结合：

function connect({
    host = '127.0.0.1', uesername, password, port }) {
   
    console.log(host); // 127.0.0.1
    console.log(uesername);
    console.log(password);
    console.log(port);
}
connect({
   
    // host: 'docs.mphy.top',
    uesername: 'root',
    password: 'root',
    port: 3306
})

8. rest 参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments，作用与 arguments 类似。将接收的参数序列转换为一个数组对象。

用在函数形参中，语法格式：fn(a, b, ...args)，写在参数列表最后面。

let fn = (a, b, ...args) => {
   
    console.log(a);
    console.log(b);
    console.log(args);
};
fn(1,2,3,4,5);
/*
1
2
[3, 4, 5]
*/

案例1：求不定个数数字的和

let add = (...args) => {
   
    let sum = args.reduce((pre, cur) => pre + cur, 0);
    return sum;
}
console.log(add(1, 2, 3, 4, 5)); // 15

应用场景：rest 参数非常适合不定个数参数函数的场景

9. spread 扩展运算符

扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。可用在调用函数时，传递的实参，将一个数组转换为参数序列。

扩展运算符也可以将对象解包。

展开数组：

function fn(a, b, c) {
   
    console.log(arguments);
    console.log(a + b