ES6基础

1、Babel转码器
Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在老版本的浏览器执行，这意味着，你可以用ES6的方式编写程序，又不用担心现有的环境是否支持

//转码前
var $ = name => document.querySelector(name)
// 转码后
var $ = function(name) {
 return document.querySelector(name)
}

上面的ES6代码用了箭头函数，Babel将其转为普通函数，就能在不支持箭头函数的javaScript环境上执行了

2、let和const命令
2.1、let的定义
ES6新增了let命令，用来声明变量，他的的用法类似于var
2.2、let 和 var的不同
2.2.1、let不存在变量提升

console.log(a) // => undefied
var a = 10

console.log(b) // => b is not a defiend
let b = 3

2.2.2 let同一个作用域内不能定义相同名称的变量

let a = 1
let a = 2
console.log(a) // => Identifier 'a' has already been declared

2.2.3 let 块级作用域 var 函数作用域

function fun () {
  var a = 3
  if (true) {
  let a = 4
}
console.log(a) // => 3
}
fun()

function f(a) {
  let a = 10
 console.log(a)  // => Identifier 'a' has already been declared
}
f()

2.2.4 块级作用域的重要性

for(var i = 0; i < 5; i++){}
console.log(i) // i=>5

for(let i = 0; i < 5; i++){}
console.log(i) // i=> i is not defined

var arr = []
for(let i = 0; i < 5; i++){
  arr[i] = function(){
      console.log(i)
  }
}
arr[4]()   // => 4

2.2.5 暂时性死区

function f3(i) {
  let i;
  console.log(i)  //  Identifier 'i' has already been declared
}
f3(10)

let x = y, y= 10
function f4(){
  console.log(x, y)
}
// y is not defined

// 常见错误

//  1、
function f(a) {
  let a = 10
console.log(a)  // => Identifier 'a' has already been declared
}
f()
// 2、
function fun() {
  let a = 3;
  if (true) {
      a = 5;
      console.log(a)  // 报错
    let a;
  }
}
fun();
// 3、
let a = b, b = 10
console.log(a,b) // b is not defined

3、const的定义
const声明一个只读的常量，一旦声明，常量的值不能更改。
保持let的不存在变量提升，同一个作用域内不能重复定义同一个名称，有着严格的作用域

3.1、修改常量的值会报错

const a = 10
a = 20   // =>  Uncaught TypeError: Assignment to constant variable.

//  const只声明不赋值就会报错
const m;  // 会报错的

3.2 const 的坑
const实际上保证的，并不是变量的值不得改动，而是指变量指向的那个内存地址所保存的数据不得改动，对于简单类型的数据（数字，字符串，布尔值），值就是保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型数据（主要是对象和数组），变量指向的内存地址，保存的指示一个指向实际数据的指针，const只能保证这个指针的固定的（即总是指向一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了，因此将一个对象声明成常量必须非常小心。

// 常量obj储存的是一个地址，这个地址指向一个对象，不可变的只是这个地址，即不能把obj指向另一个地址，但对象本身是可变的，所以依然可以为其添加属性
const obj = {}
obj.name = 'abc' // 正确
obj = {id:123} // 错误

const arr = [];
arr.push(2) // 正确
arr = [2] // 错误