ES6之基础知识

一. ES6中提供了两个声明变量的关键字： let 和 const

ES6 用let来声明变量,它的用法类似于var。
1.1 let的使用
 -1. let声明的变量,多了一个块级作用域
	  var 声明的有2个作用域 : 函数/全局 
	  let 声明的有3个作用域  : 函数/全局/块级作用域
	  {
	     let a = 10;
	     var b = 1;
	  }
	    
	  a // ReferenceError: a is not defined.
	  b // 1
	
 -2 不存在变量提升
    // let 的情况
    console.log(bar); //报错ReferenceError
    let bar = 2;

 -3 不允许重复声明
    let a = 10;
    let a = 1;	//报错 Identifier 'a' has already been declared

---

1.2 const的使用
	const声明一个只读的常量。常量：值不可以改变的量 

- const声明的量不可以改变
    const PI = 3.1415;
    PI = 3; //报错

- const声明的变量必须给初始值
    const name =  '';
    name = '小糖'

- 如果const声明了一个对象，仅仅保证地址不变
    const obj = {name:'zs'};
    obj.age = 18; //正确
    obj = {}; //报错

- 其他用法和let一样
   只能在当前代码块中使用
   不会提升
   不能重复声明

const 修饰的是一个对象 , 对象是引用类型,所以修改对象里面的内容,不影响地址,
const obj = {
  name : 'zs'
}

obj.name = '小天'
console.log(obj.name);   //  小天

// obj = {}

// 总结: 
// 1. es5 : var 
// 2. es6 : let/const 替换 var 
// 3. 修饰常量 (不变的量)  用 const
// 4. 修改变量 (可变的量)  用 let 
// 5. 万事不决 用 let  

---

let与const的使用场景
	1. 如果声明的变量不需要改变，那么使用const
	2. 如果声明的变量需要改变，那么用let
	3. 学了const和let之后，尽量别用var

=========================================================================================================

二. 模板字符串

模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。

 // 1. 通过``可以定义一个字符串
 let str = `hello world`

---

 // 2. 模板字符串内部允许换行
    let str = `
      hello
      
      world
    `

---

 // 3. 模板字符串内部可以使用表达式
let str = `
	你好，我是${name}
`

=========================================================================================================
三. 箭头函数

***箭头函数的注意点***

1. 箭头函数内部没有this，因此箭头函数内部的this指向了外部的this（很爽）
2. 箭头函数不能作为构造函数，因为箭头函数没有this

---

ES6标准新增了一种新的函数：Arrow Function（箭头函数）

为什么叫Arrow Function？因为它的定义用的就是一个箭头：

3.1 基本使用

- function 删掉,   () 后面加个 => 

    let fn = function() {
        console.log(123);
    }
    
    相当于
    //语法： (参数列表) => {函数体}
    let fn = () => {
        console.log(123);
    }

3.2 参数详解

- 如果没有参数列表，使用()表示参数列表
    var sum = () => {
        console.log('哈哈')
    };
    // 等同于：
    var sum = function() {    
        console.log('哈哈')
    };

- 如果只有一个参数，可以省略()
    // 等同于：
    var sum = function(n1) {    
        console.log('哈哈')
    };
    
    var sum = n1 => {
        console.log('哈哈')
    };
    
- 如果有多个参数，需要使用()把参数列表括起来
    var sum = function(n1, n2) {    
        console.log('哈哈')
    };
    
    var sum = (n1, n2) => {
        console.log('哈哈')
    };


3.3 返回值详解

- 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来

    var sum = n1 => {
        console.log('哈哈')
        console.log('哈哈')
    };

- 如果函数体只有一行一句，并且需要返回这个值，那么可以省略{}和return

    var fn = function(n1, n2) {
        return n1 + n2;
    }
    var fn = (n1, n2) => n1 + n2;

***箭头函数中的this问题 ***

以前 this => 谁调用this所在的函数,this就指向谁 

<script>

    // 1. es6 箭头函数 => 箭头函数没有自己this => 用的是箭头函数,外部的this
    // 2. 箭头函数里面没有自己的this,所以箭头函数也不能做构造函数使用

    // 构造函数es5 
    // let Person = function(){
    //     this.name = 'zs';
    //     this.age = 20;
    // }
    
    // 构造函数 es6 的箭头函数
    // let Person = () => {
    //     this.name = 'zs';
    //     this.age = 20;
    // }

    // let p = new Person()
    // console.log(p);


    // let obj = {
    //     name: 'zs',
    //     sayHi: function () {
    //         console.log(this)
    //         // 延时器 
    //         // es5 函数 => this => 指向的window
    //         // es6 箭头函数 => 箭头函数没有自己this => 用的是箭头函数 外部的this
    //         setTimeout(() => {
    //             console.log(this);
    //         }, 1000)
    //     }
    // };
    // obj.sayHi()

    // let fn = () => {
    //     console.log(this)
    // }
    // fn()
    
</script>