ES6 新增内容

一、let与const

let

• 声明一个变量，变量遵循块级作用域(其实就是变量被限制在了一个花括号内)
• 变量没有变量提升
• 声明的变量是可以被更改的
• 声明的时候可以不给初始值

const

• 声明一个常量，常量遵循块级作用域
• 变量没有变量提升
• 声明的常量是不可以被更改的
• 声明的时候必须给初始值

let / const 与 var 的区别

• var：
  1. 定义的变量遵循全局作用域/函数作用域
  2. 声明的变量可以变量提升(但是执行定义提升了，值没有提升，所以是undefined)
  3. 变量可以重复声明
• let / const:
  1. 定义的变量/常量遵循块级作用域/函数作用域
  2. 声明的变量/常量不能变量提升 具有暂时性死区(其实就是说没有变量提升)
  3. 变量不可以重复声明

let 与const 的区别

• let:
  1. 声明的是变量
  2. 声明的变量可以被修改
  3. 声明的时候可以没有初始值
• const:
  1. 声明的是常量
  2. 声明的变量不可以被修改
  3. 声明的时候必须有初始值
• 开发的时候推荐 大量使用 const 结合少量的let
• var声明变量也不是一无是处，这个方式出现的早，兼容性更好

        let a
        console.log(a)  // undefined
        const b             // Missing initializer in const declaration
        console.log(b)      // 使用 const 定义的变量必须给初始默认值
        
        
        let a = 100
        console.log(a)   // 100
        a = 999
        console.log(a)   // 999
        
        const b = 100
        console.log(b)  // 100
        b = 999         // Assignment to constant variable.
        console.log(b)  // 上述报错阻断程序运行, 所以这行代码没有执行

        // let/const 变量没有变量提升 (变量提升就是能够在变量声明定义前使用)
        console.log(a)  // undefined
        var a = 100
        console.log(a)  // 100
        console.log(b)  //  Cannot access 'a' before initialization
        let b = 100
        console.log(b)  // 因为上边的报错阻断了程序的运行, 所以这行代码没有运行
        console.log(c)  //  Cannot access 'a' before initialization
        const c = 100
        console.log(c)  // 因为上边的报错阻断了程序的运行, 所以这行代码没有运行

        // var 不遵循块级作用域
        if (true) {
            var a = 100
        }
        console.log(a) //100
        for (var i = 0; i < 3; i++) {}
        console.log(i) //3
        function fn() {
            var b = 'QF001'
        }
        console.log(b) //b is not defined
        
        // let/const 声明的变量遵循块级作用域(其实就是变量被限制在了一个花括号内)
        if (true) {
            let a = 100
            console.log(a) //100
        }
        console.log(a) //a is not defined
        for (let i = 0; i < 3; i++) {}
        console.log(i) //i is not defined
        function fn() {
            let b = 'QF001'
        }
        console.log(b) //b is not defined

二、箭头函数

• 箭头函数专属的写法优化
  1. 箭头函数的形参如果只有一个，并且没有默认值的时候，可以省略形参的小括号不写
  2. 如果 函数的形参有多个，或者说有一个形参并且有默认值，或者没有形参，这些情况都必须书写形参的小括号
  3. 如果 函数的调用要执行的代码只有1行，那么可以省略大括号，并且默认自带return效果
  4. 重点: 箭头函数只能捡些函数表达式, 不能简写声明式函数
• 箭头函数 和普通函数的区别
  1. 写法不同
  2. 函数内部的 this 不同

        // 1. 函数只有一个形参
        const fn1 = a => { }
        // 2. 函数只有一个形参 但是具有默认值
        const fn2 = (a = 100) => { }
        // 3. 函数没有形参
        const fn3 = () => { }
        // 4. 函数有多个形参
        const fn4 = (a, b, c, d) => { }
        // 5. 函数没有返回值, 并且内部代码有多行
        const fn5 = () => {
            console.log(1)
            console.log(1)
            console.log(1)
        }
        // 6. 函数不需要返回值, 但是内部代码有一行
        const fn6 = () => console.log(1)
        // 7. 当函数只需要返回一个对象的时候
        // const fn7 = () => {
        //     return { a: 1, b: 2 }
        // }
        const fn7 = () => ({ a: 1, b: 2 })
        // console.log(fn7())

        // 8. 函数内部只需要返回一个数组
        const fn8 = () => [1, 2, 3]
        // console.log(fn8())

        // 9. 函数内部返回一个新的箭头函数
        // const fn9 = () => {
        //     // return function () {}
        //     return () => {}
        // }
        const fn9 = () => () => {}
        console.log(fn9())

三、函数传参的默认值

• 我们在定义函数的时候, 有的时候需要一个默认值出现
• 就是当我不传递参数的时候, 使用默认值, 传递参数了就使用传递参数的参数

function fn(a) {
    a = a || 10
    console.log(a)
}
fn()    // 不传递参数的时候, 函数内部的 a 就是 10
fn(20)  // 传递了参数 20 的时候, 函数内部的 a 就是 20

• 在 ES6 中我们可以直接把默认值写在函数的形参位置

function fn(a = 10) {
    console.log(a)
}
fn()    // 不传递参数的时候, 函数内部的 a 就是 10
fn(20)  // 传递了参数 20 的时候, 函数内部的 a 就是 20

• 默认值的方式箭头函数也可以使用

const fn = (a = 10) => {
    console.log(a)
}
fn()    // 不传递参数的时候, 函数内部的 a 就是 10
fn(20)  // 传递了参数 20 的时候, 函数内部的 a 就是 20

• 注意!!! 箭头函数如果你需要使用默认值的话, 那么一个参数的时候也需要写()

四、 解构赋值

快速的从数组或对象中拿到数据

ES6 数组的结构赋值(只能用于数组)

• 要求： 声明变量的时候 需要使用[ ]包裹 [ ]内部的变量名 只要符合命名规范与规则就行了 = 赋值号右边必须跟一个数组
• 作用：会按照数组内部元素的排列顺序，依次赋值给 = 左边的变量

        let [a, b, c] = arr
        console.log(a)  // '元素1'
        console.log(b)  // '元素2'
        console.log(c)  // '元素3'

        console.log('======================')

        let [a1, b1] = arr
        console.log(a1) // '元素1'
        console.log(b1) // '元素2'

        console.log('======================')
        let [a2, b2, c2, d2] = arr
        console.log(a2) // '元素1'
        console.log(b2) // '元素2'
        console.log(c2) // '元素3'
        console.log(d2) // undefined


        // ES5 从数组中 获取到数据的方式
        let a = arr[0]
        let b = arr[1]
        let c = arr[2]
        console.log(a)
        console.log(b)
        console.log(c)

对象的解构赋值

• 快速的从对象中获取成员
• 声明变量的时候 需要使用{}包裹
• 解构对象的时候，{}内部的变量名必须和对象内部的某一个属性名完全相同
• 右边必须书写一个对象
• 作用：将对象内部属性对应的值 给到左边的变量中

        // ES5 的方法向得到对象中的成员
        const obj = {
          name: 'Jack',
          age: 18,
          gender: '男'
        }

        let name = obj.name
        let age = obj.age
        let gender = obj.gender
        
        // 解构赋值的方式从对象中获取成员
        const obj = {
          name: 'Jack',
          age: 18,
          gender: '男'
        }

        // 前面的 {} 表示我要从 obj 这个对象中获取成员了
        // name age gender 都得是 obj 中有的成员
        // obj 必须是一个对象
        let { name, age, gender } = obj
        console.log(name)//Jack
        console.log(age)//18
        console.log(gender)//男

五、模板字符串

• ES5 中我们表示字符串的时候使用 '' 或者 ""
• 在 ES6 中, 我们还有一个东西可以表示字符串 `` (反引号)

let str = `hello world`
console.log(typeof(str))    // string

• 反引号与之前的区别
  1. 反引号可以换行书写

     let str = 'hello world' // 使用单引号或者双引号不能换行书写, 换行会报错
     
     // 使用反引号不会报错, 这样写也不会报错
     let str = `
         hello
         world
     `
     

  2. 反引号可以直接在字符串里拼接变量, 不过需要借助 ${}

     // ES5 需要使用字符串拼接变量的时候
     let num = 100
     let str = 'hello' + num + 'world' + num
     console.log(str)
     
     let str2 = 'hellonumworldnum'
     console.log(str2)
     
     // 使用模板字符串
     let num = 100
     let str = `hello${num}world${num}`
     console.log(str)
     

六、展开运算符

• 在函数的形参前书写一个...
• 能够将所有的实参的内容，存放在这个形参中，并且是以数组的形式存储
• 如果一个实参都没有传递，那么这个形参就是一个空数组
• 注意：如果一个形参前书写了... 那么这个形参的后边不要再写参数了

        var arr = [1,2,3]
        console.log(...arr); // 1 2 3
        var ar = [4,5]
        var a = [...arr,4,5]
        console.log(a);
        fn = (a,b) =>{
            console.log(a,b);
        }
        fn(...arr)
        
        const fn1 = (fb, ...myEl) => {
            console.log(fb, myEl)
        }
        fn1()
        fn1(1)
        fn1(1, 'QF001')
        fn1(1, 'QF001', true)
        fn1(1, 'QF001', true, undefined)

七、函数的this指向

• 函数内部的this指向和函数的书写没有任何关系，而是和函数的调用有关系
• 注意: 箭头函数内部没有 this, 他的 this 是从你使用的哪一行开始，向上一直寻找, 直到找到一个 this

    const fn = () => {
            console.log(this)
        }
        fn() //window

        var obj = {
            name: '我是 obj 对象',
            objFn: fn
        }
        obj.objFn() //window

        var obj = {
            name: '我是 obj 对象',
            objFn: () => {
                console.log(this)
            }
        }
        obj.objFn() //window    

1. 在代码中直接调用函数 this === window

        fn()

2. 将上述的函数 放在一个对象中调用 this === 当前对象 (当前调用者)

        const obj = {
            name: '我是obj对象的名字',
            age: 10086,
            objFn: fn
        }
        obj.objFn()

3. 将上述的函数 放在 定时器或者倒计时器内部 this === window

        window.setTimeout(fn, 10)

4. 将上述函数 放在事件处理中 this === 事件源

        var box = document.querySelector('div')
        box.onclick = fn

5. 将函数放在自执行函数中 目前市场已经不多见 this === window

• 语法：(书写上要执行的函数)(这个小括号可以给第一个括号内的函数传参)

        (function fn() {
            console.log(this)
        })()


        ;(function () {
            console.log('当你看到我的时候, 请你找一下, 有没有函数的调用')
        })()

        ;(function (num) {
            console.log('当你看到我的时候, 请你找一下, 有没有函数的调用', num)
        })(10086)

练习题

        const fn1 = () => {
            console.log(this)
        }
        function fn2() {
            fn1()
        }
        function fn3() {
            const f = () => {
                console.log(this)
            }
            f()
        }

        var obj = {
            objFn1: fn1,
            objFn2: fn2,
            objFn3: fn3
        }

        obj.objFn1()    // window
        obj.objFn2()    // window
        obj.objFn3()    // obj

修改函数内部this指向

• 因为箭头函数 内部 没有 this, 所以我们的这些修改方法只适用于 普通函数

1.call

• 语法: 函数名.call(将函数内部的this指向谁, 实参1, 实参2, 实参3, 实参4....)
• 作用: 修改函数内部的this指向, 并将参数传递进去, 并执行函数

需求: 让 fn 函数 内部的 this 指向 obj 对象

        function fn(a, b, c) {
            console.log(a, b, c, this)
        }

        const obj = {
            name: '我是 obj'
        }

        fn(100, 200, 300)   // 100, 200, 300, window

        // 解决方案1: call
        fn.call(obj, 10, 20, 30)    // 10, 20, 30, obj

2.apply

• 语法: 函数名.apply(将函数内部的this指向谁, [实参1, 实参2, 实参3, 实参4....])
• 作用: 修改函数内部的this指向, 并将参数传递进去, 并执行函数

        // 解决方案2: apply
        fn.apply(obj, [1, 2, 3])    // 1, 2, 3, obj

3.bind

• 语法: 函数名.bind(将函数内部的this指向谁, 实参1, 实参2, 实参3, 实参4....)
• 作用: 修改函数内部的this指向, 并将参数传递进去, 然后将处理好的函数 返回
• 注意: 这个方法不会立即执行函数, 而是会将修改好this的一个函数返回出来, 需要使用的话, 可以自己调用

        // 解决方案3: bind
        const newFn = fn.bind(obj, 'bind_1', 'bind_2', 'bind_3')
        newFn() // bind_1   bind_2  bind_3  obj

八、案例---猴子爬山

一天, 一个猴子从山脚向山顶爬山, 途中经过了一个 n 个台阶的阶梯。但是这个猴子有一个习惯, 每次只会跳 1 层或者 3 层。 问题: 猴子通过这个阶梯有多少种不同的跳跃方式

        /*
            规律:
                '0的位置没有内容'
                一层台阶的跳跃方式
                    只有 一种 就是 : 
                                    1
                两层台阶的跳跃方式
                    只有 一种 就是 : 
                                    1 + 1
                三层台阶的跳跃方式
                    有 两种 就是 : 
                                    1 + 1 + 1
                                    3
                四层台阶的跳跃方式
                    有 三种 就是 :
                                    1 + 1 + 1 + 1
                                    1 + 3
                                    3 + 1
                五层台阶的跳跃方式
                    有 四种 就是 : 
                                    1 + 1 + 1 + 1 + 1
                                    1 + 1 + 3
                                    1 + 3 + 1
                                    3 + 1 + 1
                六层台阶的跳跃方式
                    有 六种 就是 : 
                                    1 + 1 + 1 + 1 + 1 + 1
                                    1 + 3 + 1 + 1
                                    3 + 1 + 1 + 1
                                    1 + 1 + 3 + 1
                                    1 + 1 + 1 + 3
                                    1 + 1 + 1 + 1 + 3
                七层台阶的跳跃方式
                    有 九种 就是 : 
                                    1 + 1 + 1 + 1 + 1 + 1 + 1
                                    1 + 3 + 1 + 1 + 1
                                    3 + 1 + 1 + 1 + 1
                                    1 + 1 + 3 + 1 + 1
                                    1 + 1 + 1 + 3 + 1
                                    1 + 1 + 1 + 1 + 3
                                    1 + 1 + 1 + 1 + 1 + 3
                                    1 + 3 + 3
                                    3 + 1 + 3
                八层台阶的跳跃方式
                    有 十三种 就是 : 
                                    1 + 1 + 1 + 1 + 1 + 1 + 1 + 1
                                    1 + 3 + 1 + 1 + 1 + 1
                                    3 + 1 + 1 + 1 + 1 + 1
                                    1 + 1 + 3 + 1 + 1 + 1
                                    1 + 1 + 1 + 3 + 1 + 1
                                    1 + 1 + 1 + 1 + 3 + 1
                                    1 + 1 + 1 + 1 + 1 + 3
                                    1 + 1 + 1 + 1 + 1 + 1 + 3
                                    1 + 3 + 3 + 1
                                    3 + 1 + 3 + 1
                                    1 + 1 + 3 + 3
                                    1 + 3 + 1 + 3
                                    3 + 1 + 1 + 3
                九层台阶的跳跃方式
                    有 十九种 就是 : 
                                    1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1
                                    1 + 3 + 1 + 1 + 1 + 1 + 1
                                    3 + 1 + 1 + 1 + 1 + 1 + 1
                                    1 + 1 + 3 + 1 + 1 + 1 + 1
                                    1 + 1 + 1 + 3 + 1 + 1 + 1
                                    1 + 1 + 1 + 1 + 3 + 1 + 1
                                    1 + 1 + 1 + 1 + 1 + 3 + 1
                                    1 + 1 + 1 + 1 + 1 + 1 + 3
                                    1 + 1 + 1 + 1 + 1 + 1 + 1 + 3
                                    1 + 3 + 3 + 1 + 1
                                    3 + 1 + 3 + 1 + 1
                                    1 + 1 + 3 + 3 + 1
                                    1 + 3 + 1 + 3 + 1
                                    3 + 1 + 1 + 3 + 1
                                    1 + 1 + 1 + 1 + 3 + 3
                                    1 + 1 + 1 + 3 + 3
                                    1 + 1 + 3 + 1 + 3
                                    1 + 3 + 1 + 1 + 3
                                    3 + 1 + 1 + 1 + 3
       */


        function fn(n) {
            /**
             *  利用 动态规划 解决问题
             * 
             *      思路:   将所有的情况 存储到 数组中, 最后根据数组找出对应的次数
            */
            const arr = new Array(n)

            arr[0] = 1  // 1 层台阶的时候, 有 1 种跳转方案
            arr[1] = 1  // 2 层台阶的时候, 有 1 种跳转方案
            arr[2] = 1  // 3 层台阶的时候, 有 2 种跳转方案

            // arr[n] = arr[n - 1] + arr[n - 2]      // n - 1层台阶的时候, 有 几种 跳转方案
            for (let i = 3; i <= n; i++) {
                arr[i] = arr[i - 1] + arr[i - 3]
            }

            return arr[n]
        }

        const res = fn(9)
        console.log('9 层台阶对应的所有方式: ', res)

案例---斐波那契数列

动态规划

        function fn(n) {
            const arr = new Array(n)

            arr[0] = 1
            arr[1] = 1 

            for (let i = 2; i < n; i++) {
                arr[i] = arr[i - 1] + arr[i - 2]
            }

            return arr[n - 1]
        }

        let fibNum = fn(5)     
        console.log(fibNum) // 5

递归

        function fn(n) {
            if (n === 1 || n === 2)  return 1
            return fn(n - 1) + fn(n - 2)
        }

        let res = fn(4)
        console.log(res) //3    

递归优化

        function fn(n) {
            // 2. 在函数开始前, 先查询之前有没有计算过, 如果有直接返回之前计算的值, 没有的话 再往下运行然后计算
            if (fn[n]) return fn[n]

            if (n === 1 || n === 2) return 1

            // 1. 存储每一次计算的结果
            fn[n] = fn(n - 1) + fn(n - 2)
            return fn[n]
        }
        var res = fn(1000)
        console.log(res)

        console.dir(fn)

九、Map 和 Set 数据结构

Map 数据结构

• 类似于对象的数据结构, 但是他的 key 可以是任何数据类型
• 可以被叫做一个 值=值 的数据结构

• 创建一个 Map 数据结构
  • 语法: var m = new Map([ [key, value], [key, value] ])
• Map 数据结构的属性和方法
  1. size 属性
     • 语法: 数据结构.size
     • 得到: 该数据内有多少个数据
  2. set() 方法
     • 语法: 数据结构.set(key, value)
     • 作用: 想该数据内添加数据
  3. get() 方法
     • 语法: 数据结构.get(key)
     • 作用: 数据结构内该 key 对应的 value
  4. has() 方法
     • 语法: 数据结构.has(key)
     • 返回值: true---数据结构内有该数据; false---数据结构内没有该数据
  5. delete() 方法
     • 语法: 数据结构.delete(key)
     • 作用: 删除该数据结构内的某一个数据
  6. clear() 方法
     • 语法: 数据结构.clear()
     • 作用: 清除该数据结构内所有数据
  7. forEach() 方法
     • 语法: 数据结构.forEach(function (value, key, origin) {})

Set 数据结构

• 类似于数组的数据结构
• 按照索引排列的数据结构

• 创建 Set 数据结构
  • 语法: var s = new Set([数据1, 数据2, 数据2, 数据3, ... ])
• Set 数据结构的属性和方法
  1. size 属性
     • 语法: 数据结构.size
     • 返回值: 该数据结构内有多少个数据
  2. add() 方法
     • 语法: 数据结构.add(数据)
     • 作用: 向该数据结构内添加数据
  3. has() 方法
     • 语法: 数据结构.has(数据)
     • 返回值: true---表示数据结构内有该数据; false---表示数据结构内没有该数据
  4. delete() 方法
     • 语法: 数据结构.delete(数据)
     • 作用: 删除该数据结构内的某一个数据
  5. clear() 方法
     • 语法: 数据结构.clear()
     • 作用: 清除该数据结构内所有数据
  6. forEach() 方法
     • 语法: 数据结构.forEach(function (value, key, origin) {})

十、对象简写语法

1. 当你的对象 key 和 value 一摸一样的时候
   • 并且 value 是一个变量
   • 那么可以省略一个不写

   var name = 'XXX'
   var obj = {
       name: name
   }
   
   var obj1 = {
       name
   }
   

2. 当对象内 key 对应的值是一个函数
   • 并且, 不是箭头函数的时候
   • 可以省略 function 关键字和冒号 不写

   var obj = {
       fn: function () {
           console.log(123)
       },
       fn1() {
           console.log(456)
       }
   }
   

十一、模块化开发(重点)

• 就是把我们的完整功能, 拆开成为一个一个的独立功能(模块)
  • 一个 JS 文件就是一个独立模块
• 根据业务需求, 来进行模块整合
• 当模块化开发的时候
  • 我们需要把多个逻辑书写在多个 JS 文件内
  • 此时, 每一个文件都是独立的文件, 都是一个独立的模块作用域(文件作用域)
  • 该文件内, 只能使用自己文件内的变量, 不能使用其他文件内的变量
• 导出/导入
  • 导出: 在一个文件内向外暴露一些内容
  • 导入: 导入该文件的同时, 拿到它向外暴露的内容
• 浏览器使用 ES6 模块化语法的要求
  • script 标签必须要有一个 type=module 的属性
  • 页面必须要在服务器上打开(可以借助 live server)

• 导出语法
  1. 语法1: export default 你要导出的数据
     • 一个文件只能导出一个 default 数据

     const num = 100
     const fn = () => {
         console.log('我是 header.js')
     }
     const obj = {
         num: num,
         fn: fn
     }
     export default obj
     

  2. 语法2: export 定义变量 = 值
     • 一个文件可以导出多个新定义的变量

     export const s = 100
     export let a = 200
     

• 导入语法
  1. import 变量 from '文件'
     • 这个语法必须对应导出语法1

     import myObj = from './index.js'
     

  2. import { 导出的内容 } from '文件'
     • 这个语法必须对应导出语法2

     import {s, a} from './index.js'