分享 10个简单实用的 JS 代码技巧

代码图片生成工具：有码高清

一、滚动到页面顶部

我们可以使用 window.scrollTo() 平滑滚动到页面顶部。
在这里插入图片描述
源码：

const scrollToTop = () => {window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};

二、滚动到页面底部

当然，如果知道文档的高度，也可以平滑滚动到页面底部。
在这里插入图片描述
源码：

const scrollToBottom = () => {window.scrollTo({top: document.documentElement.offsetHeight,left: 0,behavior: "smooth",});
};

三、将元素滚动到可见区域

有时候我们需要将元素滚动到可见区域，怎么办？使用 scrollIntoView 就足够了。
在这里插入图片描述

const smoothScroll = (element) => {element.scrollIntoView({behavior: "smooth",});
};

四、以全屏模式显示元素

你一定遇到过这样的场景，需要全屏播放视频，在浏览器中全屏打开页面。
在这里插入图片描述

const goToFullScreen = (element) => {element = element || document.body;if (element.requestFullscreen) {element.requestFullscreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();} else if (element.webkitRequestFullscreen) {element.webkitRequestFullScreen();}
};

五、退出浏览器全屏状态

是的，这个和第4点一起使用，你也会有退出浏览器全屏状态的场景。
在这里插入图片描述

const goExitFullscreen = () => {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}
};

六、获取数据类型

如何通过函数获取变量的数据类型？
在这里插入图片描述

const getType = (value) => {const match = Object.prototype.toString.call(value).match(/ (\w+)]/)return match[1].toLocaleLowerCase()
}getType() // undefined
getType({}}) // object
getType([]) // array
getType(1) // number
getType('fatfish') // string
getType(true) // boolean
getType(/fatfish/) // regexp

七、停止冒泡事件

需要一种适用于所有平台的防止事件冒泡的方法。
在这里插入图片描述

const stopPropagation = (event) => {event = event || window.event;if (event.stopPropagation) {event.stopPropagation();} else {event.cancelBubble = true;}
};

八、深拷贝一个对象

如何复制深度嵌套的对象？
在这里插入图片描述

const deepCopy = (obj, hash = new WeakMap()) => {if (obj instanceof Date) {return new Date(obj);}if (obj instanceof RegExp) {return new RegExp(obj);}if (hash.has(obj)) {return hash.get(obj);}let allDesc = Object.getOwnPropertyDescriptors(obj);let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);hash.set(obj, cloneObj);for (let key of Reflect.ownKeys(obj)) {if (obj[key] && typeof obj[key] === "object") {cloneObj[key] = deepCopy(obj[key], hash);} else {cloneObj[key] = obj[key];}}return cloneObj;
};

九、确定设备类型

我们经常需要这样做，在手机上显示 A 逻辑，在 PC 上显示 B 逻辑。基本上，设备类型是通过识别浏览器的userAgent来确定的。
在这里插入图片描述

const isMobile = () => {return !!navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i);
};

十、判断设备是Android还是IOS

除了区分是手机端还是PC端，很多时候我们还需要区分当前设备是Android还是IOS。
在这里插入图片描述

const isAndroid = () => {return /android/i.test(navigator.userAgent.toLowerCase());
};const isIOS = () => {let reg = /iPhone|iPad|iPod|iOS|Macintosh/i;return reg.test(navigator.userAgent.toLowerCase());
};