ES6新增内容

一、ES6新增的声明变量的关键字

1、`let`和`const`

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

2、let和const与var的区别

1） let 和 const 不允许重复声明变量

// 使用 var 的时候重复声明变量是没问题的，只不过就是后面会把前面覆盖掉
var num = 100
var num = 200

// 使用 let 重复声明变量的时候就会报错了
let num = 100
let num = 200 // 这里就会报错了

// 使用 const 重复声明变量的时候就会报错
const num = 100
const num = 200 // 这里就会报错了

2） let 和 const 声明的变量不会在预解析的时候解析（也就是没有变量提升）

// 因为预解析（变量提升）的原因，在前面是有这个变量的，只不过没有赋值
console.log(num) // undefined
var num = 100

// 因为 let 不会进行预解析（变量提升），所以直接报错了
console.log(num) // Cannot access 'num' before initialization
let num = 100

// 因为 const 不会进行预解析（变量提升），所以直接报错了
console.log(num) //Cannot access 'num' before initialization
const num = 100

3）. let 和 const 声明的变量会被所有代码块限制作用范围

// var 声明的变量只有函数能限制其作用域，其他的不能限制
if (true) {
  var num = 100
}
console.log(num) // 100

// let 声明的变量，除了函数可以限制，所有的代码块都可以限制其作用域（if/while/for/...）
if (true) {
  let num = 100
  console.log(num) // 100
}
console.log(num) // 报错

// const 声明的变量，除了函数可以限制，所有的代码块都可以限制其作用域（if/while/for/...）
if (true) {
  const num = 100
  console.log(num) // 100
}
console.log(num) // 报错

3、let与const的区别

1）. let 声明的变量的值可以改变，const 声明的变量的值不可以改变

let num = 100
num = 200
console.log(num) // 200

const num = 100
num = 200 // 这里就会报错了，因为 const 声明的变量值不可以改变（我们也叫做常量）

2）. let 声明的时候可以不赋值，const 声明的时候必须赋值

let num
num = 100
console.log(num) // 100

const num // 这里就会报错了，因为 const 声明的时候必须赋值

4、总结

1）let/const 与 var 的区别
- var:
  1. 定义的变量遵循全局作用域/函数作用域
  2. 声明的变量可以变量提升(但是执行定义提升了, 值没有提升, 所以是 undefined)
  3. 变量可以重复声明
- let/const:
  1. 定义的变量/常量遵循块级作用域/函数作用域
  2. 声明的变量/常量不能变量提升具有暂时性死区(其实就是说没有变量提升)
  3. 变量不可以重复声明
2）let 与 const 的区别
- let：
  1. 声明的是变量
  2. 声明的变量可以被修改
  3. 声明的时候可以没有初始值
- const：
  1. 声明的是常量
  2. 声明的变量不可以被修改
  3. 声明的时候必须有初始值
3）开发的时候推荐
- 大量使用 const 结合少量的 let; var 就当没学过

二、箭头函数

箭头函数是 ES6 里面一个简写函数的语法方式

重点： 箭头函数只能简写函数表达式，不能简写声明式函数

function fn() {} // 不能简写
const fun = function () {} // 可以简写
const obj = {
  fn: function () {} // 可以简写
}

1、语法： `(函数的行参) => { 函数体内要执行的代码 }`

const fn = function (a, b) {
  console.log(a)
  console.log(b)
}
// 可以使用箭头函数写成
const fun = (a, b) => {
  console.log(a)
  console.log(b)
}

const obj = {
  fn: function (a, b) {
    console.log(a)
    console.log(b)
  }
}
// 可以使用箭头函数写成
const obj2 = {
  fn: (a, b) => {
    console.log(a)
    console.log(b)
  }
}

2、箭头函数专属的写法优化

1. 箭头函数的形参如果只有一个, 并且没有默认值的时候, 可以省略形参的小括号不写；如果函数的形参有多个, 或者说有一个形参并且有默认值, 或者没有形参, 这些情况都必须书写形参的小括号

       const fn2 = a => {
           return a * 10
       }
       console.log(fn2(39))

1. 如果函数的调用要执行的代码只有 1 行, 那么可以省略大括号, 并且默认自带 return 效果

      const fn3 = a => a * 10
      console.log(fn3(77))

3、箭头函数和普通函数的差别

1. 写法不同
1. 函数内部的 this 不同

4、箭头函数的推荐写法

        // 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())

三、解构赋值

解构赋值，就是快速的从对象或者数组中取出成员的一个语法方式

1、解构数组

快速的从数组中获取成员

// ES5 的方式从数组中获取成员
const arr = ['Jack', 'Rose', 'Tom']
let a = arr[0]
let b = arr[1]
let c = arr[2]

// 使用解构赋值的方式从数组中获取成员
const arr = ['Jack', 'Rose', 'Tom']

// 前面的 [] 表示要从 arr 这个数组中获取成员了
// a b c 分别对应这数组中的索引 0 1 2
// arr 必须是一个数组
let [a, b, c] = arr
console.log(a)//Jack
console.log(b)//Rose
console.log(c)//Tom


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

2、解构对象

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

// 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)//男

3、注意

{} 是专门解构对象使用的
[] 是专门解构数组使用的
不能混用

四、模版字符串

ES5 中我们表示字符串的时候使用 '' 或者 ""
在 ES6 中，我们还有一个东西可以表示字符串，就是 ``（反引号）
```
let str = `hello world`
console.log(typeof str) // string
```

和单引号好友双引号的区别

反引号可以换行书写

// 这个单引号或者双引号不能换行，换行就会报错了
let str = 'hello world' 

// 下面这个就报错了
let str2 = 'hello 
world'

let str = `
	hello
	world
`

console.log(str) // 是可以使用的

反引号可以直接在字符串里面拼接变量

// ES5 需要字符串拼接变量的时候
let num = 100
let str = 'hello' + num + 'world' + num
console.log(str) // hello100world100

// 直接写在字符串里面不好使
let str2 = 'hellonumworldnum'
console.log(str2) // hellonumworldnum

// 模版字符串拼接变量
let num = 100
let str = `hello${num}world${num}`
console.log(str) // hello100world100

在 `` 里面的 ${} 就是用来书写变量的位置

五、展开运算符

ES6 里面号新添加了一个运算符 ... ，叫做展开运算符

作用是把数组展开

let arr = [1, 2, 3, 4, 5]
console.log(...arr) // 1 2 3 4 5

合并数组的时候可以使用

let arr = [1, 2, 3, 4]
let arr2 = [...arr, 5]
console.log(arr2)

也可以合并对象使用

let obj = {
  name: 'Jack',
  age: 18
}
let obj2 = {
  ...obj,
  gender: '男'
}
console.log(obj2)

伪数组转真数组

    var box = document.querySelectorAll('.box')
    console.log(box)
    var newBox = [...box]
    console.log(newBox)
    
    //优化
    var box = [...document.querySelectorAll('.box')]
    console.log(box)

在函数传递参数的时候也可以使用

let arr = [1, 2, 3]
function fn(a, b, c) {
  console.log(a)
  console.log(b)
  console.log(c)
}
fn(...arr)
// 等价于 fn(1, 2, 3)

在函数的形参前面书写一个... 能够将所有实参的内容，存放在这个形参中，并且是以数组的形式存储的；如果一个实参都没有传递，那么这个形参就是一个空数组
- 注意：如果一个形参前书写了... 那么这个形参的后面不要再写形参了
- 形参fb按照顺序接收第一个实参传递的值，如果没有实参那么它就是一个undefined;从第一个实参后续的所有实参，全都放在了第二个形参的数组中。

    const fn = (fb,...myEl) => {
        console.log(fb,myEl)
    }
    
    fn()//undefined []
    fn(1,'Qf001')//1 ['QF001']
    fn(1,'Qf001',true)//1 ['Qf001',true]
    fn(1,'Qf001',true,undefined)//1 ['Qf001',true,undefined]

六、函数的this指向

每一个函数内部都有一个关键字是 this
重点: 函数内部的 this 之和函数的调用有关, 和函数的定义方式没有关系
函数内部的 this 指向谁, 取决于函数的调用方式
函数内部的this指向和函数的书写没有任何关系，而是和函数的调用有关系

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

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)

6、注意：箭头函数内部没有this，它的this是从你使用的那一行开始，向上一直寻找，直到找到一个this

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

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

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

7、练习

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

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

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

七、改变函数的this指向（只适用于普通函数）

call; apply; bind
- 刚才说过的都是函数的基本调用方式里面的 this 指向
- 我们还有三个可以忽略函数本身 this 指向转而指向别的地方
- 这三个方法就是 call / apply / bind
- 这三个方法是强行改变 this 指向的方法

1、call

该方法是附加在函数调用后面使用, 可以忽略函数本身的 this 指向
语法: 函数名.call(要改变的 this 指向, 要给函数传递的参数1, 要给函数传递的参数1, ...)

var obj = { name: "Jack" };
function fn(a, b) {
    console.log(this);
    console.log(a);
    console.log(b);
}
fn(1, 2);
fn.call(obj, 1, 2);

fn() 的时候, 函数内部的 this 指向 window
fn.call(obj, 1, 2) 的时候, 函数内部的 this 就指向了 obj 这个对象
使用 call 方法的时候
- 会立即执行函数
- 第一个参数是我们要改变函数内部的 this 指向
- 第二个参数开始, 依次是向函数传递的参数

2、apply

该方法是附加在函数调用后面使用, 可以忽略函数本身的 this 指向
语法: 函数名.apply(要改变的 this 指向, [要给函数传递的参数1, 要给函数传递的参数2, ...])

var obj = { name: "Jack" };
function fn(a, b) {
    console.log(this);
    console.log(a);
    console.log(b);
}
fn(1, 2);
fn.apply(obj, [1, 2]);

fn() 的时候, 函数内部的 this 指向 window
fn.apply(obj, [1, 2]) 的时候, 函数内部的 this 就指向了 obj 这个对象
使用 apply 方法的时候
- 会立即执行函数
- 第一个参数是我们改变的函数内部的 this 指向
- 第二个参数是一个数组, 数组里面的每一项依次是向函数传递的参数

3、bind

该方法是附加在函数调用后面使用, 可以忽略函数本身的 this 指向
和 call / apply 有一些不一样, 就是 bind 不会立即执行函数, 而是返回一个已经改变了 this 指向的函数
语法: var newFn = 函数名.bind(要改变的 this 指向); newFn(传递参数)

var obj = { name: "Jack" };
function fn(a, b) {
    console.log(this);
    console.log(a);
    console.log(b);
}
fn(1, 2);
var newFn = fn.bind(obj，1，2);
newFn();

bind 调用的时候, 不会执行 fn 这个函数, 而是返回一个新的函数
这个新的函数就是一个改变了 this 指向以后的 fn 函数
fn(1, 2) 的时候 this 指向了 window
newFn(1, 2) 的时候执行的是一个和 fn 一模一样的函数, 只不过里面的 this 指向改成了 obj

八、自执行函数(内部的this指向window)

1、语法： (书写要自执行的函数)(这里可以书写要传递给内部函数的实参)

2、

    (function fn1(name) {
      console.log('我需要自己执行',name)
    })('传递进去的参数')
    
 
function fn() {
 console.log(this)
}
(fn)()//window

九、Set和Map

ES6 新增的两种数据结构
共同点: 内部不允许有重复的数据

1、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) {})`
    * item和origin 与数组中forEach的含义是相同的，但是index不同，因为Set中不允许使用下标获取到内部的数据，所以index的值不是下标，而是数组的每一个值

        //创建了一个空的map集合
        const oSet = new Set([8,1,2,3,3,3,3,4,5])
        console.log(oSet)//{1, 2, 3, 4, 5}
        //1、向Set中添加数据 add()
        oSet.add(999)
        oSet.add('QF001')
        console.log(oSet)
        //2、判断Set中的一些数据 has()
        console.log(oSet.has('QF001'))//true
        console.log(oSet.has('why'))//false

        //3、删除Set中的指定数据 delete()
        oSet.delete(999)
        console.log(oSet)

        //4、遍历Set用forEach
        oSet.forEach(function(item,index,origin){
            console.log(item,index)
        })

        //5、该数据结构内有多少个数据 size
        console.log(oSet.size)
        //6、清空Set中的所有数据 clear()
        oSet.clear()
        console.log(oSet)

7、利用Set完成数组去重

        const arr = [...new Set([1,1,1,1,2,3,4,4,4,5])]
        console.log(arr)

2、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(key)`
    * 作用: 删除该数据结构内的某一个数据

6.clear() 方法

    * 语法: `数据结构.clear()`
    * 作用: 清除该数据结构内所有数据

7. forEach() 方法

    * 语法: `数据结构.forEach(function (value, key, origin) {})`

        //创建了一个空的map集合
        const oMap = new Map()
        //1、向Map中添加数据 set()
        oMap.set('key', 'value')
        oMap.set('age', 18)
        oMap.set('name', '刘德华')
        const arr = [1, 2, 3]
        oMap.set(arr, [4, 5, 6])//拿数组当key
        console.log(oMap)//{'key' => 'value', 'age' => 18, 'name' => '刘德华', Array(3) => Array(3)}

        //2、获取Map中的一些数据 get()
        console.log(oMap.get('age'))//18
        console.log(oMap.get('name'))//刘德华
        console.log(oMap.get(arr))//[1,2,3]

        //3、判断Map中的一些数据 has()
        console.log(oMap.has('name'))//true
        console.log(oMap.has('why'))//false

        //4、删除Map中的指定数据 delete()
        oMap.delete("key")
        console.log(oMap)

        
        //5、遍历Map 用forEach
        oMap.forEach(function(value,key,origin){
            console.log(value,key)
            // console.log(origin)
        })

        //6、清空Map中的所有数据 clear()
        oMap.clear()
        console.log(oMap)

十、模块化开发（重点）

在前端开发中，随着功能的越来越多，所以代码量也就越来越多；代码量多造成的影响就是单一文件可读性差，所以后续为了解决上述问题，程序员们开始将代码分隔开，同样的代码量，分成多个文件去书写，单一文件的可读性越来越高

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

导出语法

语法1: export default 你要导出的数据

一个文件只能导出一个 default 数据

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

语法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'
```

（1）html文件

    <script src="./index.js" type="module"></script>

（2）index.js文件

    // 导入语法1        import '变量' from '导入的文件地址'
    import obj from './a'    // 此时的导入方式中必须添加文件后缀
    import obj from './a.js'
    console.log(obj)
    obj.callback()

    // 导入语法2    import { 导出的时候的变量名 } from '导入的文件地址'
    import { obj } from './b.js'
    console.log(obj)

    import { obj, sayHi, arr } from './b.js'
    console.log(obj)
    console.log(arr)
    sayHi()

（3）a.js文件

    console.log('aaaaaaaaaaaaaaaaaaaaaaa.js')

    // 像后端发送了一个请求, 得到了一个用户的详细信息
    const info = {
        id: 'QF001',
        name: '张三',
        username: 'qwe123',
        password: '123456'
    }

    function fn() {
        console.log('我是书写在 a.js 中的一个函数')
    }


    // 导出语法1
    // export default '要导出的数据, 这是默认导出, 一个页面只能有一个'

    export default {
        userInfo: info,
        callback: fn
    }

（4）b.js文件

    console.log('bbbbbbbbbbbbbbbbbbbbb.js')
    // 导出语法2
    export const obj = {
        name: '我是书写在 b.js 中的一个对象',
        age: 18,
        qwe: 'QF001'
    }

    export function sayHi () {
        console.log('早上好')
    }

    export const arr = [1, 2, 3, 4, 5]

十一、对象简写语法

当你的对象 key 和 value 一摸一样的时候
- 并且 value 是一个变量
- 那么可以省略一个不写
```
var name = 'XXX'
var obj = {
    name: name
}

var obj1 = {
    name
}
```

当对象内 key 对应的值是一个函数

并且, 不是箭头函数的时候
可以省略 function 关键字和冒号不写

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

十二、案例（猴子爬山）

一天, 一个猴子从山脚向山顶爬山, 途中经过了一个 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

      const fn = (n) => {
            // 将每层台阶的方法次数存储到数组
            let arr = []
            arr[0] = 1// 1层台阶 1 种方法
            arr[1] = 1// 2层台阶 1 种方法
            arr[2] = 2// 3层台阶 2 种方法
            arr[3] = 3
            arr[4] = 4
            for (let i = 3; i < n; i++) {
                arr[i] = arr[i - 1] + arr[i - 3]
            }

            return arr[n - 1]// 返回n层台阶的方法数
        }
        var res = fn(9);
        console.log(res);

十三、案例（斐波那契数列）

1、动态规划

     function fn(x) {
            var arr = new Array(x);
            arr[0] = 1;
            arr[1] = 1;

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

            return arr[x - 1];
        }

        var res = fn(9)
        console.log(res)

2、递归

        function fn(n) {
            if (n <= 2) return 1
            return fn(n - 1) + fn(n - 2)
        }
        var res = fn(10)
        console.log(res)

3、递归优化

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

            if (n <= 2) return 1

            // 1. 存储每一次计算的结果
            fn[n] = fn(n - 1) + fn(n - 2)
            return fn[n]
        }
        var res = fn(10)
        console.log(res)
        
        //打印对象的所有属性和方法
        console.dir(fn)

初识js--ES6新增内容(十二)

ES6新增内容

一、ES6新增的声明变量的关键字

1、let和const

2、let和const与var的区别

3、let与const的区别

4、总结

二、箭头函数

1、语法： (函数的行参) => { 函数体内要执行的代码 }

2、箭头函数专属的写法优化

3、箭头函数和普通函数的差别

4、箭头函数的推荐写法

三、解构赋值

1、解构数组

2、解构对象

3、注意

四、模版字符串

五、展开运算符

六、函数的this指向

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

2、将上述函数 放在一个对象中调用 this === 当前对象

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

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

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

6、注意：箭头函数内部没有this，它的this是从你使用的那一行开始，向上一直寻找，直到找到一个this

7、练习

七、改变函数的this指向（只适用于普通函数）

1、call

2、apply

3、bind

八、自执行函数(内部的this指向window)

1、语法： (书写要自执行的函数)(这里可以书写要传递给内部函数的实参)

2、

九、Set和Map

1、Set 数据结构

1. size 属性

2. add() 方法

3. has() 方法

4. delete() 方法

5. clear() 方法

6. forEach() 方法

7、利用Set完成数组去重

2、Map 数据结构

1. size 属性

2. set() 方法

3. get() 方法

4. has() 方法

5. 方法

6.clear() 方法

7. forEach() 方法

十、模块化开发（重点）

十一、对象简写语法

十二、案例（猴子爬山）

十三、案例（斐波那契数列）

1、动态规划

2、递归

3、递归优化

1、`let`和`const`

1、语法： `(函数的行参) => { 函数体内要执行的代码 }`

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

2、将上述函数放在一个对象中调用 `this === 当前对象`

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

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

5、将上述函数放在自执行函数中目前市场已经不多见了 `this === window`