ES6知识点汇总

1、let 和 const

let 的作用域与 const 命令相同：只在声明所在的块级作用域内有效。且不存在变量提升 。

1-1、let

let 所声明的变量，可以改变。

使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明

 1. let a = 123
 2.  a = 456 // 正确，可以改变  
 3.  let b = [123] 
 4. b = [456] // 正确，可以改变...

1-2、const

const 声明一个只读的常量。一旦声明，常量的值就不能改变。
简单类型的数据（数值、字符串、布尔值），不可以变动
const 规则：

使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值
它们的区别就在于规则，其他几乎一模一样

 1. const a = 123 
 2. a = 456 // 报错，不可改变   
 3. const b = [123]
 4.  b = [456] //报错，不可以重新赋值，不可改变

复合类型的数据（主要是对象和数组），可以这样子变动

 1. const a = [123]
 2.  a.push(456) // 成功  
 3.  const b = {
   } 
 4. b.name = 'demo'  //成功

1-3、不存在变量提升

 1. {
      
 2.  let a = 10;  
 3.  var b = 1; 
 4. }   
 5. a // ReferenceError: a is not defined. 
 6. b // 1

所以 for循环的计数器，就很合适使用 let 命令。

let a = [];
for (let i = 0; i < 10; i++) {
   
  a[i] = function () {
   
    console.log(i);
  };
}
a[6](); // 6

1-4、推荐

对于 数值、字符串、布尔值 经常会变的，用 let 声明。
对象、数组和函数用 const 来声明。

// 如经常用到的导出 函数
export const funA = function(){
   
    // ....
}

2、解构（Destructuring）

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

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错

2-1 数组的解构赋值

一次性声明多个变量：

let a = 1
let b = 2
let c = 3
//ES6允许以下这样使用
let arr=[1,2,3]
let [a, b, c] =arr;
let [a, b, c] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

结合扩展运算符：

let [head, ...tail] = [1, 2, 3, 4];
console.log(head) // 1
console.log(tail) // [2, 3, 4]

解构赋值允许指定默认值：

let [foo = true] = [];
foo // true
 
let [x, y = 'b'] = ['a'];
// x='a', y='b'

2-2 对象de解构赋值

解构不仅可以用于数组，还可以用于对象。

let {
    a, b } = {
    a: "aaa", b: "bbb" };
a // "aaa"
b // "bbb"

数组中，变量的取值由它 排列的位置 决定；而对象中，变量必须与 属性 同名，才能取到正确的值。

对象的解构也可以指定默认值。

let {
   x = 3} = {
   };
x // 3
 
let {
   x, y = 5} = {
   x: 1};
x // 1
y // 5

2-3字符串

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"

2-4、数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象

let {
   toString: s} = 123;
s === Number.prototype.toString // true

let {
   toString: s} = true;
s === Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值

2-5、函数参数的解构赋值

function add([x, y]){
   
  return x + y
}

add([1, 2]) // 3

函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y

我们用Babel在线转换工具把上述ES6代码转化为ES5代码看看，实际上就是讲作为参数的数组分别结构成了x和y再返回他们的和

"use strict";

var _slicedToArray = function () {
    function sliceIterator(arr, i) {
    var _arr = []; var _n = true; var _d = false; var _e = undefined; try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
    _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) {
    _d = true; _e = err; } finally {
    try {