ES6规范，注意要点，满满的干货

标题今天带给大家ES6的规范要点，满满的干货

1、闭包
概念：1.函数的内部调用了外部的变量，叫做闭包
  2.闭包是为了将内存保留下来，就是将参数保留，不会立即被销毁
  3.闭包过程中会使用到立即函数，立即保存函数是为了保留参数，否则就会立即销毁
  4.添加点击事件，点击事件是为了得到一个函数，返回函数（回调函数）

注意：在闭包过程中，会发生内存泄漏，内存被参数占据了，所以内存变少了

示例：1.（未闭包）
 var allBtn = document.querySelectorAll("button")
//无论点击哪个都会输出11，因为最后i++后，i变成了11，变为了全局变量。
      for (var i = 1; i <= 10; i++) {
           	allBtn[(i - 1)].onclick = function() {
                  			 console.log(i)
                              		 }
        } 

示例：2.（闭包）

for (var i = 1; i <= 10; i++) {
                allBtn[(i - 1)].onclick = (function(index) {
                    //返回的是一个回调函数
                    return function() {
                        console.log(index)
                    }
                })(i)
            } 
//运行过程：将i传进来，给到function（index）的index，最后点击得到的是一个回调函数，在回调函数里面输出index。

示例：3.(使用let)

 for (let i = 1; i <= 10; i++) {
            allBtn[(i - 1)].onclick = function() {
                console.log(i)
            }
        }

2.对象、数组的解构

 var user = {name: "蔡徐坤",type: "NBA形象大使",like: "篮球"}
//将对象里面的属性解构出来
 var { name,type,like} = user
        console.log(name)
        console.log(type)
        console.log(like)
//本来会报错，不过加了括号就不会报错
        var abc = "456";
 	({abc} = { abc: "789"})

  let [teacher1, teacher2, teacher3 = "老明"] = ["老王", "老陈", undefined]
        console.log(teacher1)
        console.log(teacher2)
        console.log(teacher3)
//注意，undefine与null不同，undefined会使用默认值，null会使用null


3.在html中不但可以插进文字变量，还可以插进函数

 		var price = 10;
        	var num = 20;
         var abc = () => {
            return "今天天气很好"
        }
  document.body.innerHTML = `总价:${price*num}美元`
        	document.body.innerHTML = `今天的感想是:${abc()}`

注意：定义常量一般用大写表示
        const HOST = "www.baidu.com"
        const IP = "192.168.5.17"

4.循环for（）、foreach（）、for（..in..）、for(..of..),Map()之间的差别
 	1.for循环
        for (var i = 0; i < stars.length; i++) {
            console.log(stars[i])
        }

 2.foreach()循环
        stars.forEach(function(item, i) {
            console.log(i)
            console.log(item)
        })

  3.for in 循环
            for (let i in stars) {
                //输出的是索引值
                console.log(i)
                    //输出的是value
                console.log(stars[i])
            }

   4.for of循环
        for (let i of stars) {
            //直接输出的是value值
            console.log(i)
        }

5. Map循环,通过对数组的j解构，可以快速获取Wap对象的key和value值
        let a = new Map()
            //设置a的属性
        a.set("username", "admin")
        a.set("password", "123456")
            //console.log(a)
        for (let [key, value] of a) {
            console.log(key)
            console.log(value)
        }

5.箭头函数（及其应用）
注意：实际上，function(a,b)= 写成了（a,b）=>

 //如果只有返回值
        var add = function(a, b) {
                return a + b
            }
 //箭头函数写法
        var add = (a, b) => a + b



     //如果不是只有返回值
        var fn = function() {
            var body = document.body
            var div = document.createElement("div")

            function hei() {
                return "今天你开心了吗"
            }
            div.innerHTML = `${hei()}`
            body.appendChild(div)
        }
        fn()

 //箭头函数写法
        var fn = () => {
            var body = document.body
            var div = document.createElement("div")

            function hei() {
                return "今天你开心了吗"
            }
            div.innerHTML = `${hei()}`
            body.appendChild(div)
        }
        fn()

 使用箭头函数可以将this指向改为上一级对象

具体实例：需求：每秒改变一次d1Dom的颜色,颜色随机生成

 var d1Dom = document.querySelector("#d1")

方法1：直接在定时器里写对象名称
 d1Dom.onclick = function(e) {
                setInterval(function() {
                    d1Dom.style.backgroundColor = `rgb(${parseInt(Math.random()*255)},${parseInt(Math.random()*255)},${parseInt(Math.random()*255)})`
                }, 1000)
            } 
方法2：将d1Dom所指向的this转化为that，供给下面使用

d1Dom.onclick = function() {
              console.log(this)
                  //这里的this指的是d1Dom
              that = this
              setInterval(function() {
                  //这里的this指的是window
                  console.log(this)
                  that.style.backgroundColor = `rgb(${parseInt(Math.random()*255)},${parseInt(Math.random()*255)},${parseInt(Math.random()*255)})`
              }, 1000)
          } 
方法3：使用箭头函数可以将this指向改为上一级对象

 d1Dom.onclick = function() {

            setInterval(() => {
                console.log(this)
                this.style.backgroundColor = `rgb(${parseInt(Math.random()*255)},${parseInt(Math.random()*255)},${parseInt(Math.random()*255)})`
            }, 1000)
        }


6.扩展运算符

1.数组的复制(...stars),用于函数的调用
 //复制数组,是在另一个内存地址生成，与原来的内存地址不一样,...stars就是复制数组里面的内容
var stars = ["范冰冰", "李晨", "蔡徐坤", "tfboys", "胡歌"]
var arr = [...stars]
console.log(arr == stars)//false

  getstars(stars[0], stars[1], stars[2], stars[3], stars[4])
       		等价于
  getstars(...stars)

2.rest参数使用

 function fn(a, b, ...args) {
            console.log(a)
            console.log(b)
            console.log(args)
        }
        fn(1, 2, 3, 4, 5, 6, 7, 8, 9)
            //输出a=1，b=2，args为一个数组[3,4,5,6,7,8,9]

7.默认参数（可能会考面试题）

//如果不判断的话，会报错，因为两个都是undefined
var fn = function(a, b) {
            //a,b是否存在 
            a = a ? a : 0;
            b = b ? b : 0
            return a + b
        }
var result = fn()
       console.log(result)

 	//给a,b一个默认值
        function add(a = 0, b = 0) {
            return a + b
        }
        var result2 = add()
        console.log(result2)


  var x = 3

        function cba(x = 4, y = x) {
            console.log(x) //4,因为x=3没有传进来,默认从最近的位置开始寻找
            console.log(y) //4
        }

        function abc(a = 4, y = x) {
            console.log(y) //3,因为最近没有值，最近的x值为3
        }