es6新语法第四天

es6新语法第四天

1.深浅拷贝

1.1浅拷贝

开发过程中遇到需要复制对象的情况

浅拷贝和深拷贝只针对引用类型

const obj = {
      uname: 'pink',
      age: 18,
      family: {
        baby: '小pink'
      }
    }
    // 浅拷贝
    // const o = { ...obj }
    // console.log(o)
    // o.age = 20
    // console.log(o)
    // console.log(obj)

const o = {}
    Object.assign(o, obj)
    o.age = 20
    o.family.baby = '老pink'
    console.log(o)
    console.log(obj)

浅拷贝只拷贝外面的一层，

1.2深拷贝

1. 递归函数

函数内部自己调用自己，需要加return，防止陷入死循环。

2. js库

lodash.min.js

链接lodash库

<!-- 先引用 -->
  <script src="./lodash.min.js"></script>
  const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    const o = _.cloneDeep(obj)
    console.log(o)
    o.family.baby = '老pink'
    console.log(obj)

调用的函数时 _.cloneDeep()

为了避免明命冲突，前面有_.

3. 利用JSON实现深拷贝

把对象转换为JSON字符串

JSON.stringify()

把字符串转换为对象

JSON.parse()

实现深拷贝

const o = JSON.parse(JSON.stringify(obj))

2.异常处理

2.1throw抛异常

throw抛出异常信息，程序也会终止运行，后面跟异常信息

经常和error一起使用

throw new error（‘’）

2.2try-catch捕获异常

function fn() {
      try {
        // 可能发送错误的代码 要写到 try
        const p = document.querySelector('.p')
        p.style.color = 'red'
      } catch (err) {
        // 拦截错误，提示浏览器提供的错误信息，但是不中断程序的执行
        console.log(err.message)
        throw new Error('你看看，选择器错误了吧')
        // 需要加return 中断程序
        // return
      }
      finally {
        // 不管你程序对不对，一定会执行的代码
        alert('弹出对话框')
      }
      console.log(11)
    }
    fn()

catch里面要带上err参数

finally最终一定会执行，不管对错

2.3debugger

是一个关键字

相当于打断点，执行代码之后刷新页面，调试代码

3.处理this

3.1this指向-普通函数

普通函数的this指向-谁调用指向谁

‘use strict’

开启严格模式

普通函数的this不能使用window，指向undefined

• 箭头函数

最近作用域的this

3.2改变this

• call（）
• apply（）
• bind（）

想指向谁就指向谁，然后加参数

apply要求第二个参数必须传数组

返回时就是调用函数的返回值

bind不会调用函数，可以改变this指向

返回值是一个函数，但是这个函数里面的this是更改过的obj

会用在定时器里面，先不调用过几秒之后调用

setTimeout

三者的区别

4.性能优化

4.1防抖

单位时间内，频繁触发事件，只执行最后一次

实现方式

1. lodash库

_.debounce(执行的函数，时间)

过一段时间以后执行函数

2. 手写一个防抖函数

防抖的核心就是利用定时器（setTimeout)来实现

//1.声明定时器变量
//2. 每次鼠标移动（事件触发）的时候都要先判断是否有定时器，如果有先清除以前的定时器
//3.如果没有定时器，则开启定时器，存入到定时器变量里面
//4.定时器里面写函数调用
function deboound(fn,t) {
    let timer 
    //return 返回一个匿名函数，如果不返回匿名函数的话，函数就会只执行一次
    return function() {
        
    if(timer) clearTimeout(timer)
    timer = setTimeout( function() {
       fn()  //加小括号调用fn函数
    },t)
    }
}
box.addEventListener('mousemove', deboound(mouseMove, 500))

4.2节流-throttle

单位时间内，频繁触发事件，只执行一次

1. lodash提供的节流函数

_.throttle(func ,[wait= 0],[ options=])

2. 手写一个节流函数

1. 声明一个定时器
2. 每次移动鼠标时都判断是否有定时器了，如果有定时器则不开启定时器
3. 如果没有，则开启定时器，记得存到变量里面
4. 定时器里面调用执行函数
5. 定时器里面要把定时器清空

function throttle() {
    let timer
    //return 一个匿名函数
    return function() {
        if(!timer) {
            timer = setTimeout(function() {
                //清空定时器
                timer = null
                fn()
            },t)
        }
    }
}

总结：