为什么使用 ES6 ?

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方
变量提升特性增加了程序运行时的不可预测性
语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

1.ES6中新增的用于声明变量的关键字

let

let声明的变量只在所处于的块级有效

使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

if (true) {
   var a = 10;
   let b = 10;
 }
console.log(a) // 10
console.log(b) // b is not defined

let不存在变量提升,不能重复声明

 console.log(a); // undefined
 var a =10; 

 console.log(a); // Cannot access 'a' before initialization
 let a = 10;

 let a =1;
 let a =2;   //Identifier 'a' has already been declared

let存在暂时性死区

var num = 10
if(true) {
    console.log(num);// 10
    var num =20
 }

var num = 10
if(true) {
    console.log(num);// Cannot access 'num' before initialization
    let num =20
 }

let,var经典面试题

var arr = [];
for (var i = 0; i < 2; i++) {
    arr[i] = function () {
    console.log(i);
    } 
    }
    arr[0](); // 2
    arr[1](); // 2
    //因为用var声明的变量i是全局的，所以函数执行时输出的都是全局作用域下的i值。

let arr = [];
for (let i = 0; i < 2; i++) {
    arr[i] = function () {
    console.log(i);
    } 
    }
    arr[0](); // 0
    arr[1](); // 1
 //因为每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，
  //函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值

const

同样的，const也具有块级作用域

if (true) {
   const a = 10;
 }
 console.log(a) // a is not defined

const声明常量时必须赋值,且不能更改,如果值是一个数组，那么可以更改数组里的内容，但是仍然不可更改数组本身

const a; //Missing initializer in const declaration

const a = 10;
    a = 10; // Missing initializer in const declaration

const arr = [10, 20];
    arr[0] = 'a';
    arr[1] = 'b';
    console.log(arr);  // ['a', 'b']
    arr = ['a', 'b'] //Assignment to constant variable.

let、const、var 的区别

1. 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
2. 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
3. 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

2. 解构赋值

数组解构

ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。如果解构不成功，变量的值为undefined

let [a, b, c, d, e] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // undefined
console.log(d) // undefined

对象解构

按照一定模式，从数组中或对象中提取值，将提取出来的值赋值给另外的变量.

let person = { name: 'zhangsan', age: 20 };
let { name, age } = person;
console.log(name); // 'zhangsan' 
console.log(age); // 20

let {name: myName, age: myAge} = person; // myName myAge 属于别名
console.log(myName); // 'zhangsan' 
console.log(myAge); // 20

3.箭头函数

ES6中新增的定义函数的方式。

() => {} 
const fn = () => {}

function sum(num1, num2) {
 return num1 + num2; }
const sum = (num1, num2) => num1 + num2;//  函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

function fn (v) {
 return v; }
const fn = v => v; // 如果形参只有一个，可以省略小括号

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

const obj = { name: '张三'}
    function fn () {
        console.log(this); //指向obj
        return () => {
            console.log(this); // 指向上文this, 所以也是指向obj
        } 
    }
const resFn = fn.call(obj); //通过call方法使this指向 obj
resFn();