ES6语法， 重复的变量名， 块级的作用域， let和const的区别，模板字符串，箭头函数，强制改变this的指向， 对象的简写

 定义变量
- let   => 定义变量的关键字
- const => 定义变量的关键字
2. `var` 和 `let/const`有什么区别?
- 预解析
    - 使用var声明的关键字有预解析,可以有变量的提升
    - let/const声明的关键字不会进行变量的提升
> 示例:
```js
// 使用var声明的关键字有预解析,可以有变量的提升
console.log(a);
var a = 10;

//let/const声明的关键字不会进行变量的提升
console.log(b);
let b = 10;

console.log(c);
const c = 20;
```

- 重复的变量名
    - var可以在同一个作用域声明两个相同的变量
    - let/const声明的变量不能再同一作用域下面声明两次或两次以上
> 示例:
```js
//     - var可以在同一个作用域声明两个相同的变量
//     - let/const声明的变量不能再同一作用域下面声明两次或两次以上
function fn(){
    // var可以在同一个作用域声明两个相同的变量
    var a = 10;
    var a = 20;
    console.log(a);

    //let/const声明的变量不能再同一作用域下面声明两次或两次以上
    // let b = 10;
    // let b = 20;

    // const c = 10;
    // const c = 20;
}
fn();
```

- 块级的作用域
    - 在ES6当中新增一个块级作用域,就是限制函数的使用范围
    - var声明的关键字没有块级作用域
    - let/const声明的变量有块级作用域
    - 块级作用域:任何一个可以执行的代码块`{}`都会限制变量的使用范围
> 示例:
```js
//获取所有的li标签
var lis = document.querySelectorAll("li")
/* 
    let const声明的变量有块级作用域
*/
for (let i = 0; i < lis.length; i++) {
    //给每一个li都绑定一个点击事件
    lis[i].onclick = function(){
        //直接弹出这个i
        alert(i)
    }
}
/* 
    //第一次 i = 0
    {
        //给每一个li都绑定一个点击事件
        lis[0].onclick = function(){
            //直接弹出这个i
            alert(0)
        }
    }
    //第二次 i = 1
    {
        //给每一个li都绑定一个点击事件
        lis[1].onclick = function(){
            //直接弹出这个i
            alert(1)
        }
    }
    //第三次 i = 2
    {
        //给每一个li都绑定一个点击事件
        lis[2].onclick = function(){
            //直接弹出这个i
            alert(2)
        }
    }
*/
```

3. let和const的区别?
- 初始化的时候
    - let声明变量可以不用赋值
    - const声明变量必须要赋值,也就是定义常量必须赋值
> 示例:
```js
 let a = 10;
// let声明变量可以不用赋值
let b;

const c = 20;
// const声明变量必须要赋值,也就是定义常量必须赋值
const d;
```
- 变量的值的改变情况
    - let定义的变量的值可以改变
    - const叫做常量,常量就是不可以改变的量,也就是const声明的变量值不能改变
> 示例:
```js
// - let定义的变量的值可以改变
// - const叫做常量,常量就是不可以改变的量,也就是const声明的变量值不能改变

// let定义的变量的值可以改变
let a = 10;
a = 20;
console.log(a);

// const叫做常量,常量就是不可以改变的量,也就是const声明的变量值不能改变
const c = 60;
c = 50;
console.log(c);
```

4. 模板字符串
- 可以换行
- 可以写变量
> 示例:
```js
var name = "张三"
str = `
    <ul>
        <li>${name}</li>
    </ul>
`
```

5. 箭头函数
> 示例:
```js
//普通函数的写法
function fn(a,b){

}
//箭头函数
fn(a,b) =>{

}
```
- 可以省略小括号不写
    - 当我们的函数只有一个参数的时候,可以不写小括号
    - 如果没有形参或者是两个以上的参数,必须要写小括号
- 可以省略大括号不写
    - 当我们只有一句代码的时候,可以省略大括号不写
    - 当省略大括号不写,会有一个默认的return关键字存在
- 箭头函数没有this
    - 箭头没有自己的this,他的this是沿着在作用域链的形式往外找
- 箭头函数没有arguments
> 箭头函数的语法:
```js
//认识箭头函数
// function fn(a,b){
//     console.log(a,b);
// }
// fn(1,2);

//进化成赋值式函数
// var fn = function(a,b){
//     console.log(a,b);
// }

//进化箭头函数 => 将function关键字省略掉不写,然后使用`=>`替换,放在大括号前面
// var fn = (a, b) => {
//     console.log(a,b);
// }
// fn(1,2);

//只有一个参数的时候,可以不写小括号
// var fn = a =>{
//     console.log(a);
// }
// fn(10);

// 没有形参或者是两个以上的参数,必须要写小括号
// var fn = (a,b,c) =>{
// }

//可以省略大括号不写,只有一句代码的时候,大括号可以不用,会有一个默认的关键字return
// var fn = (a,b) => {
//     return '你好'
// }
// 和上面的代码是一样,完全一样
// var fn = (a,b) => '你好'
// console.log(fn(1,2));

// 箭头函数this的问题
var btn = document.querySelector("button")
// btn.onclick = function(){
//     console.log(this);
// }
//沿着作用域链往外找 => window
// btn.onclick = () =>{
//     console.log(this);
// }

//箭头函数没有arguments,不认得arguments
var fn = (a,b,c,d) =>{
    console.log(arguments);
}
fn(1,2,3,4)
```
6. 强制改变this的指向
- call -> `fn.call("参数一:改变this的指向",'参数二:参数','参数三:参数')`
- apply -> `fn.apply("参数一:改变this的指向",[数组:数组的元素就是参数])`
- bind ->  `fn.bind("参数一:改变this的指向",'参数二:参数','参数三:参数')`
- 区别:
    - call和apply会调用这个函数,bind不会调用这个函数
    - call和bind的参数是直接从第二个参数开始,apply的参数是一个数组

7. 对象的简写
> 示例:
```js
let obj1 = {
    name:"张三",
    eat:function(){
        console.log("文渊吃");
    }
}
// 还可以这样写
const name = "张三"
const age = 18;
let obj2 = {
    //属性的简写
    // name:name,//将name的值赋值给对象obj中属性=>当变量与对象的属性名一样的时候,可以直接写一个
    name,
    //方法的简写 => 可以直接将 :function 省略掉
    eat(){
        console.log("别人吃");
    }
}