JavaScript-高阶技巧

深浅拷贝

直接复制赋值造成的问题，两个对象指向同一个堆

const pink = {
    color : pink
}
const red = pink

浅拷贝

拷贝的是地址，但如果出现多层对象还是会出问题

拷贝对象：

//第一种
const obj = {name:'wang',gender:'man'}
const a = {...obj}
//第二种
const obj = {name:'wang',gender:'man'}
const a = {}
Object.assign(a,obj)

拷贝数组：

Array.prototype.concat() //第一种
[...arr]	//第二种

深拷贝

拷贝的是对象，不会影响到旧对象

三种方法

1. 函数递归

2. 利用lodash库深拷贝

//先引用库，然后直接调用方法
const a = {}
const b = _.cloneDeep()

 3.  把对象转换成JSON字符串

const obj = {}
const o = JSON.parese(JSON.stringify(obj))

异常处理

throw抛异常

指代码执行过程中可能发生的错误，尽量避免错误的发生导致整个程序无法继续运行

​ 手动添加异常，后面的代码不执行

throw new Error('')

try catch捕获异常

function fn(){
    try {
    //可能存在错误的代码
	}catch (err) {
        console.log(err.message)
    	return
	}finally {
    //真假都会执行
	}
    //代码
}

debug

断点调试

处理this

普通函数的this指向

一般情况，谁调用就指向谁，没有调用者指向windows

严格模式下指向undefined

箭头函数的this指向

箭头函数实际上没有this，会找最近作用域中的this

改变this

call方法 (调用函数， 传递参数)

const obj = {
    name: 'pink'
}
function fn(x, y) {
    return x + y
}
fn.call(obj,1,2) 	// this指向call ，返回 3

apply方法 (调用函数， 传递数组)

const obj = {
    name: 'pink'
}
function fn(x, y) {
    return x + y
}
fn.apply(obj, [1,2])	// this指向call ，返回 3

==bind方法== 不会调用函数，返回原函数拷贝后的新函数

const obj = {
    name: 'pink'
}
function fn() {

}
const a = fn.bind(obj)   //a的this 指向obj

防抖

debounce

单位时间内，频繁触发事件，以最后一次为准

一般用定时器做

例子：搜索框输入

节流

throttle

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

一般用时间戳、定时器做

指连续触发事件, 但在n秒中只执行一次函数

例子：滚动条事件，轮播图按钮