JavaScript复习

最新推荐文章于 2024-09-26 17:08:53 发布

每月的三十二号

最新推荐文章于 2024-09-26 17:08:53 发布

阅读量1.7k

点赞数 43

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zml3427179572/article/details/137757835

版权

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]