1.防抖和节流：
为什么要防抖
有的操作是高频触发的，但是其实触发一次就好了，比如我们短时间内多次缩放页面，那么我们不应该每次缩放都去执行操作，应该只做一次就好。再比如说监听输入框的输入，不应该每次都去触发监听，应该是用户完成一段输入后在进行触发。
防抖就是防止抖动，避免事件的重复触发
原理是定时器和延时器：
var content = document.getElementById("content");
var num = 1;
function count(){
content.innerHTML = num++;
}
content.onmousemove = count;
let times;
content.onmousemove = function (){
clearTimeout(times);
let obj = times;
times = setTimeout(()=>{
times = null;
},1000)
console.log(obj);
if(!obj){
content.innerHTML = num++;
}
};
console.log(Object.is(1,1));
console.log(Object.is(1,"1"));
console.log(Object.is("",null));
2.鼠标拖拽效果
<div id="box"></div>
* {
margin: 0;
padding: 0;
}#box {
width: 200px;
height: 200px;
background: red;
position: absolute;
}
// 1.获取元素
var oBox = document.getElementById("box");// 2.鼠标按下事件
oBox.onmousedown = function (ev) {
var ev = ev || window.event;// 获取鼠标相对于盒子的坐标
var x2 = ev.offsetX;
var y2 = ev.offsetY;// 鼠标移动
document.onmousemove = function (ev) {
var ev = ev || window.event;
var x3 = ev.pageX;
var y3 = ev.pageY;
oBox.style.top = y3 - y2 + "px";
oBox.style.left = x3 - x2 + "px"
}
}// 4.鼠标松开事件
document.onmouseup = function () {
document.onmousemove = function () {}
}
利用鼠标指针的坐标(event.pageX,event.pageY)与鼠标相对于拖拽元素的坐标(event.offsetX,event.offsetY)的差来计算被拖拽元素的坐标值。
鼠标事件：
| 项目 | Value |
|---|---|
| click | 单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件 |
| dblclick | 双击鼠标左键时发生，如果右键也按下则不会发生 |
| mousedown | 单击任意一个鼠标按钮时发生 |
| mouseout | 鼠标指针位于某个元素上且将要移出元素的边界时发生 |
| mouseover | 鼠标指针移出某个元素到另一个元素上时发生 |
| mouseup | 松开任意一个鼠标按钮时发生 |
| mousemove | 鼠标在某个元素上时 持续 发生 |
鼠标定位
当事件发生时，获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性，不同浏览器分别在各自事件对象中定义了不同的属性，说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标，但是由于它们参照的坐标系不同，导致精确计算鼠标的位置比较麻烦。
| 属性 | 说明 | 兼容性 |
|---|---|---|
| clientX | 以浏览器窗口左上顶角为原点，定位 x 轴坐标 | 所有浏览器，不兼容 Safari |
| clientY | 以浏览器窗口左上顶角为原点，定位 y 轴坐标 | 所有浏览器，不兼容 Safari |
| offsetX | 以当前事件的目标对象左上顶角为原点，定位 x 轴坐标 | 所有浏览器，不兼容 Mozilla |
| offsetY | 以当前事件的目标对象左上顶角为原点，定位 y 轴坐标 | 所有浏览器，不兼容 Mozilla |
| pageX | 以 document 对象（即文档窗口）左上顶角为原点，定位 x 轴坐标 | 所有浏览器，不兼容 IE |
| pageY | 以 document 对象（即文档窗口）左上顶角为原点，定位 y 轴坐标 | 所有浏览器，不兼容 IE |
| screenX | 计算机屏幕左上顶角为原点，定位 x 轴坐标 | 所有浏览器 |
| screenY | 计算机屏幕左上顶角为原点，定位 y 轴坐标 | 所有浏览器 |
| layerX | 最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 x 轴坐标 | Mozilla 和 Safari |
| layerY | 最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 y 轴坐标 | Mozilla 和 Safari |
3.深拷贝和浅拷贝
深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象，是"值"而不是"引用"（不是分支）
1.拷贝第一层级的对象属性或数组元素
递归拷贝所有层级的对象属性和数组元素
2.深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大
// 到时候我们传值到函数里
function deepClone(obj) {
// 我们先判断声明一个对象或数组 如果是数组就是[] 如果不是数组就是{}
let objClone = Array.isArray(obj) ? [] : {}
// 判断obj是否是对象 []也是对象object
if (obj && typeof obj === "object") {
// 我们就循环对象或者数组
for (key in obj) {
// 判断obj是否存在key
if (obj.hasOwnProperty(key)) {
// 判断obj[key]是否为对象 如果是递归复制
if (obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone(obj[key])
} else {
// 如果不是对象 简单复制
objClone[key] = obj[key]
}
}
}
}
// 返回objClone
return objClone
}
let a = [1, 2, 3, 4]
b = deepClone(a)
a[0] = 2
console.log(a) //[2, 2, 3, 4]
console.log(b) //[1, 2, 3, 4]
浅拷贝：
**1.**浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存（分支）。
2. 浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。
如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。