1. let关键字

let关键字是ES6中新增的变量声明关键字，用let声明的变量具有以下几个特点

1. 不能重复声明，防止变量被污染

    let name = 'tom'
    let name = 'jerry' // 报错，提示变量声明重复

2. 块级作用域，let定义的变量只在代码块中有效

    {
        let name = 'tom'
    }

    console.log(name) // 报错

3. 不存在变量提升

    console.log(name) // 报错，提示name这个变量不存在，如果是es5，用var声明变量，则不报错，name的值会被设置为undefined
    let name = 'jerry'

4. 不影响作用域链

    {
        let name = 'jerry'
        function fn(){
            console.log(name)
        }
        fn() // 打印 jerry
    }

2. 数组、对象解构赋值

    const cat = {
        name:'tom',
        age:4,
        gender:'male'
    }
    
    let {name,age,gender} = cat
    
    console.log(name) // tom
    console.log(age) // 4
    console.log(gender) // male
    
    
    let {gender} = cat
    console.log(gender) // male

3. 模板字符串

    let name = 'jerry'
    let content = `i love play with ${name}`
    console.log(content) // i love play with jerry

4. 对象的简化写法

    ES6允许对象中直接变量和函数，作为对象的属性和方法（前提是变量与属性重名，函数 和方法重名）
    let name = 'tom'
    let play = function(){
        console.log('play function')
    }
    
    const obj = {
        name:name,
        play:play
        run:function(){
            console.log('let`s running')
        }
    }
    
    // 简写
    const obj = {
        name,
        play,
        run(){
            console.log('let`s running')
        }
    }

5. 箭头函数

    // ES6允许使用【箭头】 => 定义函数
    let fn = function(){
    
    }
    
    // 箭头函数形式
    let fn = (a,b) => {
        return a+b
    }
    
    let result = fn(1,2)
    console.log(result) // 3

箭头函数特性：

1. this 是静态的，this始终指向函数声明时所在作用域下的 this 的值

    function getName(){
        console.log(this.name)
    }
    
    let getName2 = () => {
        console.log(this.name)
    }
    
    // 设置window对象的 name 属性
    window.name = 'tom'
    const cat = {
        name:'汤姆'
    }
    
    // 直接调用
    getName() // tom
    getName2() // tom
    
    
    // call方法调用
    getName.call(cat) // 汤姆
    getName2.call(cat) // tom

2. 不能作为构造函数实例化对象

    let Animal = (name,age) => {
        this.name = name
        this.age = age
    }
    
    let jerry = new Person('jerry',3);
    console.log(jerry) // 报错，Animal is not a constructor

3. 不能使用 arguments 变量

    let fn = () => {
        console.log(arguments)
    }
    
    fn(1,2,3) // 报错，arguments is not defined

4. 箭头函数的简写
   1. 省略小括号，当形参有且只有一个的时候

       let add = (n) => {
           return n+n
       }
       
       // 简写形式
       let add = n => {
           return n+n
       }
   

   2. 省略花括号，当代码体只有一条语句的时候，此时return关键字也必须省略，语句执行结果就是函数的返回值

       let pow = (n) => {
           return n*n
       }
       //简写形式
       let pow = n => n*n
   

6. rest参数 ...args

// ES6引入 rest 参数，用于获取函数的实参，用来代替arguments
// rest 参数必须放到形参列表最后
    function fn(a,b,...args){
        console.log(a)
        console.log(b)
        console.log(args)
    }
    fn(1,2,3,4,5,6) // 1,2,[3,4,5,6]

7. 扩展运算符 [...]

    // [...] 扩展运算符能将 **数组** 转换为逗号分割的 参数序列
    
    const animals = ['tom','jerry','shuke','beita']
    
    // 声明一个函数
    function play(){
        console.log(arguments)
    }
    
    play(...animals) // 等同于play('tom','jerry','shuke','beita') 打印输出tom,jerry,shuke,beita
    

扩展运算符运用

1. 数组的合并

    const group1 = ['tom','jerry']
    const group2 = ['shuke','beita']
    
    // 合并两个数组
    const groupJoin = group1.concat(group2)
    
    // 使用扩展运算符来合并数组
    const groupJoin1 = [...group1,...group2]

2. 数组的克隆

    const array1 = ['tom','jerry','shuke','beita']
    const array2 = [...array1]

3. 将伪数组转换为真正的数组

    const divs = document.querySelectorAll('div')
    const divArray = [...divs]

8. ES6 基本数据类型

U SO NB

• u undefined

• s string symbol

• o object

• n null number

• b boolean