JS知识点

1.箭头函数的this是最近作用域所属的对象

2.函数防抖与节流

/**
 * @desc 函数防抖
 * @param func 目标函数
 * @param wait 延迟执行毫秒数
 * @param immediate true - 立即执行， false - 延迟执行
 */
export const debounce = function(func, wait = 1000, immediate = true) {
	let timer;
	console.log(1);
	return function() {
		console.log(123);
		let context = this,
			args = arguments;
		if (timer) clearTimeout(timer);
		if (immediate) {
			let callNow = !timer;
			timer = setTimeout(() => {
				timer = null;
			}, wait);
			if (callNow) func.apply(context, args);
		} else {
			timer = setTimeout(() => {
				func.apply(context, args);
			}, wait)
		}
	}
}
/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 使用表时间戳，在时间段开始的时候触发 2 使用表定时器，在时间段结束的时候触发
 */
export const throttle = (func, wait = 1000, type = 1) => {
	let previous = 0;
	let timeout;
	return function() {
		let context = this;
		let args = arguments;
		if (type === 1) {
			let now = Date.now();

			if (now - previous > wait) {
				func.apply(context, args);
				previous = now;
			}
		} else if (type === 2) {
			if (!timeout) {
				timeout = setTimeout(() => {
					timeout = null;
					func.apply(context, args)
				}, wait)
			}
		}
	}
}

3.js取小数

let a="123.88"
let b=~~a
console.log(b)

4.高阶函数

函数只要满足下面2点中任意一点，我们就称他为高阶函数:

1.若A函数，接收的参数是一个函数，那么A就可以称为高阶函数；

2.若A函数调用后的返回值仍然是一个函数，那么A就可以称为高阶函数;

函数柯里化:通过函数调用继续返回函数的形式，实现多次接收参数最后统一处理的函数编码形式;

5.纯函数

一类特别的函数:只要是同样的参数，必定得到同样的返回。

纯函数遵守一下规则:

1.不能在函数体内改写参数数据

2.不会产生任何副作用，例如调用网络请求,调用输入输出设备(有可能产生获取数据异常)

3.不能调用Math.random,new Date()等不纯方法

react里面的action跟reducer必须是纯函数；

6.JS启动serve服务

安装npm i server

serve 项目目录

7.对象代理proxy

用proxy代理对象，可以实现对数据的监听，从而实现响应式操作数据

const movieObj={
      name : '敦刻尔克',
      price : 33
    }
  
    //vue2代理方式
    // const m={}
    // Object.defineProperty(m,"name",{
    //     configurable : true,
    //   get(){
    //     return movieObj.name
    //   },
  
    //   set(value){
    //     console.log("value发生改变");
    //     return movieObj.name=value
    //   }
    // })

    //vue3代理方式
    const m=new Proxy(movieObj,{
        get(target,propName){
            console.log("读取了属性",target,propName);
            return target[propName]
        },
        set(target,propName,value){
            console.log("设置了属性",target,propName,value);
            target[propName]=value
        },
        deleteProperty(target,propName){
            console.log("删除了属性",target,propName);
            return delete target[propName]
        }
    })
    console.log(m,movieObj);

8.Reflect反射

对对象属性进行增删改查,常用于封装框架避免属性设置时报错；

//vue3代理方式
    const m=new Proxy(movieObj,{
        get(target,propName){
            console.log("读取了属性",target,propName);
            return Reflect.get(target,propName)
        },
        set(target,propName,value){
            console.log("设置了属性",target,propName,value);
            Reflect.set(target,propName,value)
        },
        deleteProperty(target,propName){
            console.log("删除了属性",target,propName);
            return Reflect.deleteProperty(target,propName)
        }
    })