ES6

变量let、const

ES5 中，使用 var 定义变量（ var 是 variable 的简写）。

ES6 中，新增了 let 和 const 来定义变量：

• let：定义变量，替代 var。

• const：定义常量（定义后，不可修改）。

1、let：定义变量

举例 1：

{
    let a = 'hello';
}
console.log(a); // 打印结果报错：Uncaught ReferenceError: a is not defined

上方代码，打印报错。

举例 2：

var a = 2;
{
    let a = 3;
}

console.log(a); // 打印结果：2

通过上面两个例子可以看出，用块级作用域内， 用let 声明的变量，只在局部起作用。

经典面试题：

let 可以防止数据污染，我们来看下面这个 for 循环的经典面试题。

1、用 var 声明变量：

for (var i = 0; i < 10; i++) {
    console.log('循环体中:' + i);
}

console.log('循环体外:' + i);

上方代码的最后一行可以正常打印结果，且最后一行的打印结果是 10。说明循环体外定义的变量 i，是全局作用域下的 i。

2、用 let 声明变量：

for (let i = 0; i < 10; i++) {
    console.log('循环体中:' + i); // // 每循环一次，就会在 { } 所在的块级作用域中，重新定义一个新的变量 i
}

console.log('循环体外:' + i);

上方代码的关键在于：每次循环都会产生一个块级作用域，每个块级作用域中会重新定义一个新的变量 i。

另外，上方代码的最后一行，打印会报错。因为用 let 定义的变量 i，只在{ }这个块级作用域里生效。

总结：我们要习惯用 let 声明，减少 var 声明带来的污染全局空间。

为了进一步强调 let 不会带来污染，需要说明的是：当我们定义了let a = 1时，如果我们在同一个作用域内继续定义let a = 2，是会报错的。

2、const：定义常量

在程序开发中，有些变量是希望声明后，在业务层就不再发生变化，此时可以用 const 来定义常量。常量就是值（内存地址）不能变化的量。

举例：

const name = 'smyhvae'; //定义常量

用 const 声明的常量，只在局部（块级作用域内）起作用；而且，用 const 声明常量时，必须赋值，否则报错。

let 和 const 的特点【重要】

• 不属于顶层对象 Window

• 不允许重复声明

• 不存在变量提升 必须先定义后使用

• 暂时性死区 当内部变量与外部你变量同名时，内部变量屏蔽外部变量

• 支持块级作用域 该变量在该作用域不会消失

相反， 用var声明的变量：存在变量提升、可以重复声明、没有块级作用域。

var/let/const 的共同点

• 全局作用域中定义的变量，可以在函数中使用。

• 函数中声明的变量，只能在函数及其子函数中使用，外部无法使用。

this 指向

this:是函数体内的内置对象（this只能出现在函数体内）

1、以函数的形式（包括普通函数、定时器函数、立即执行函数）调用时，this 的指向永远都是 window。比如fun();相当于window.fun();

2、以方法的形式调用时，this 指向调用方法的那个对象

3、以构造函数的形式调用时，this 指向实例对象

4、以事件绑定函数的形式调用时，this 指向绑定事件的对象

5、使用 call 和 apply 调用时，this 指向指定的那个对象

第 1 条的举例：

function fun() {
    console.log(this);
    console.log(this.name);
}

var obj1 = {
    name: 'smyh',
    sayName: fun,
};

var obj2 = {
    name: 'vae',
    sayName: fun,
};

var name = '全局的name属性';

//以函数形式调用，this是window
fun(); //可以理解成 window.fun()

打印结果：

    Window
    全局的name属性

上面的举例可以看出，this 指向的是 window 对象，所以 this.name 指的是全局的 name。

第 2 条的举例：

function fun() {
    console.log(this);
    console.log(this.name);
}

var obj1 = {
    name: 'smyh',
    sayName: fun,
};

var obj2 = {
    name: 'vae',
    sayName: fun,
};

var name = '全局的name属性';

//以方法的形式调用，this是调用方法的对象
obj2.sayName();

打印结果：

    Object
    vae

上面的举例可以看出，this 指向的是 对象 obj2 ，所以 this.name 指的是 obj2.name。

ES6 箭头函数中 this 的指向

ES6 中的箭头函数并不使用上面的准则，而是会继承外层函数调用的 this 绑定（无论 this 绑定到什么）。

bind() 方法

bind() 方法的作用

bind() 方法不会调用函数，但是可以改变函数内部的 this 指向。

把call()、apply()、bind()这三个方法做一下对比，你会发现：实际开发中， bind() 方法使用得最为频繁。如果有些函数，我们不需要立即调用，但是又想改变这个函数内部的this指向，此时用 bind() 是最为合适的。

语法：

新函数 = fn1.bind(想要将this指向哪里, 函数实参1, 函数实参2);

参数：

• 第一个参数：在 fn1 函数运行时，指定 fn1 函数的this 指向。如果不需要改变 this 指向，则传 null。

• 其他参数：fn1 函数的实参。

解释：它不会调用 fn1 函数，但会返回 由指定this 和指定实参的原函数拷贝。可以看出， bind() 方法是有返回值的。

箭头函数

定义箭头函数的语法

语法：

(参数1, 参数2 ...) => { 函数体 }

解释：

• 如果有且仅有 1 个形参，则()可以省略

• 如果函数体内有且仅有 1 条语句，则{}可以省略，但前提是，这条语句必须是 return 语句。

  举例

  写法 1、定义和调用函数：（传统写法）

  function fn1(a, b) {
      console.log('haha');
      return a + b;
  }
  
  console.log(fn1(1, 2)); //输出结果：3
  

  写法 2、定义和调用函数：（ES6 中的写法）

  const fn2 = (a, b) => {
      console.log('haha');
      return a + b;
  };
  
  console.log(fn2(1, 2)); //输出结果：3
  

  上面的两种写法，效果是一样的。

  从上面的箭头函数中，我们可以很清晰地看到变量名、参数名、函数体。

  【重要】在箭头函数中，如果方法体内只有一句话，且这句话是 return 语句，那就可以把 {}省略。写法如下：

  const fn2 = (a, b) => a + b;
  
  console.log(fn2(1, 2)); //输出结果：3
  

  在箭头函数中，如果形参只有一个参数，则可以把()省略。写法如下：

  const fn2 = (a) => {
      console.log('haha');
      return a + 1;
  };
  
  console.log(fn2(1)); //输出结果：2
  

  箭头函数的 this 的指向

  ES6 之前的普通函数中：this 指向的是函数被调用的对象（也就是说，谁调用了函数，this 就指向谁）。

  而 ES6 的箭头函数中：箭头函数本身不绑定 this，this 指向的是箭头函数定义位置的 this（也就是说，箭头函数在哪个位置定义的，this 就跟这个位置的 this 指向相同）。

  const obj = { name: '123' };
  
  function fn1() {
      console.log(this); // 第一个 this
      return () => {
          console.log(this); // 第二个 this
      };
  }
  
  const fn2 = fn1.call(obj);
  fn2();
  

  打印结果：

  obj
  obj
  

  代码解释：

  上面的代码中，箭头函数是在 fn1()函数里面定义的，所以第二个 this 跟 第一个 this 指向的是同一个位置。又因为，在执行 fn1.call(obj)之后，第一个 this 就指向了 obj，所以第二个 this 也是指向 了 obj。

变量的解构赋值

解构赋值：ES6 允许我们，按照一一对应的方式，从数组或者对象中提取值，再将提取出来的值赋值给变量。

解构：分解数据结构；赋值：给变量赋值。

解构赋值在实际开发中可以大量减少我们的代码量，并且让程序结构更清晰。

数组的解构赋值

数组的结构赋值：将数组中的值按照位置提取出来，然后赋值给变量。

语法

在 ES6 之前，当我们在为一组变量赋值时，一般是这样写：

var a = 1;
var b = 2;
var c = 3;

或者是这样写：

var arr = [1, 2, 3];

var a = arr[0];
var b = arr[1];
var c = arr[2];

现在有了 ES6 之后，我们可以通过数组解构的方式进行赋值：（根据位置进行一一对应）

let [a, b, c] = [1, 2, 3];

二者的效果是一样的，但明显后者的代码更简洁优雅。

对象的解构赋值

对象的结构赋值：将对象中的值按照属性匹配的方式提取出来，然后赋值给变量。

语法

在 ES6 之前，我们从接口拿到 json 数据后，一般这么赋值：

var name = json.name;

var age = json.age;

var sex = json.sex;

上面这种写法，过于麻烦了。

现在，有了 ES6 之后，我们可以使用对象解构的方式进行赋值。举例如下：

const person = { name: 'qianfan', age: 25, sex: '男' };
let { name, age, sex } = person; // 对象的结构赋值

console.log(name); // 打印结果：qianguyihao
console.log(age); // 打印结果：28
console.log(sex); // 打印结果：男

上方代码可以看出，对象的解构与数组的结构，有一个重要的区别：数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，是根据键来取值的。

圆括号的使用

如果变量 foo 在解构之前就已经定义了，此时你再去解构，就会出现问题。下面是错误的代码，编译会报错：

	let foo = 'haha';
	{ foo } = { foo: 'smyhvae' };
	console.log(foo);

要解决报错，只要在解构的语句外边，加一个圆括号即可：

let foo = 'haha';
({ foo } = { foo: 'smyhvae' });
console.log(foo); //输出结果：smyhvae

字符串解构

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

const [a, b, c, d] = 'hello';
console.log(a);
console.log(b);
console.log(c);

console.log(typeof a); //输出结果：string

打印结果：

h
e
l
string