21个简单而实用的 JavaScript 代码片段-28资讯网—

21个简单而实用的 JavaScript 代码片段

2024-01-08 09:18:09 软件 204观看

摘要关于JavaScript的技巧，我们在之前的内容中也分享过很多，希望今天这期内容能够给你带来新的知识，从中学习到新内容，那么，我们现在开始吧。1. 滚动到页面顶部我们可以使用 window.scrollTo() 平滑滚动到页面顶部。const scro

关于JavaScript的技巧，我们在之前的内容中也分享过很多，希望今天这期内容能够给你带来新的知识，从中学习到新内容，那么，我们现在开始吧。

1. 滚动到页面顶部

我们可以使用 window.scrollTo() 平滑滚动到页面顶部。

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

2. 滚动到页面底部

当然，如果知道文档的高度，也可以平滑滚动到页面底部。

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

3. 滚动元素到可见区域

有时我们需要将元素滚动到可见区域，该怎么办？使用scrollIntoView就足够了。

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

4.全屏显示元素

你一定遇到过这样的场景，你需要全屏播放视频并在浏览器中全屏打开页面。

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();  }};

5.退出浏览器全屏状态

是的，这个和第四点一起使用，你也会出现退出浏览器全屏状态的场景。

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();  }};

6.获取数据类型

如何通过函数获取变量的数据类型？

const getType = (value) => {  const match = Object.prototype.toString.call(value).match(/ (/w+)]/)  return match[1].toLocaleLowerCase()}getType() // undefinedgetType({}}) // objectgetType([]) // arraygetType(1) // numbergetType('fatfish') // stringgetType(true) // booleangetType(/fatfish/) // regexp

7.停止冒泡事件

需要一种适用于所有平台的防止事件冒泡的方法。

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

8. 深拷贝对象

如何复制深度嵌套的对象？

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;};

9. 确定设备类型

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

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

10.判断设备是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());};

11.获取浏览器类型及其版本

作为前端开发人员，你可能会遇到各种兼容性问题。这时，你可能需要获取浏览器的类型和版本。

const getExplorerInfo = () => {  let t = navigator.userAgent.toLowerCase();  return 0 <= t.indexOf("msie")    ? {        //ie < 11        type: "IE",        version: Number(t.match(/msie ([/d]+)/)[1]),      }    : !!t.match(/trident//.+?rv:(([/d.]+))/)    ? {        // ie 11        type: "IE",        version: 11,      }    : 0 <= t.indexOf("edge")    ? {        type: "Edge",        version: Number(t.match(/edge//([/d]+)/)[1]),      }    : 0 <= t.indexOf("firefox")    ? {        type: "Firefox",        version: Number(t.match(/firefox//([/d]+)/)[1]),      }    : 0 <= t.indexOf("chrome")    ? {        type: "Chrome",        version: Number(t.match(/chrome//([/d]+)/)[1]),      }    : 0 <= t.indexOf("opera")    ? {        type: "Opera",        version: Number(t.match(/opera.([/d]+)/)[1]),      }    : 0 <= t.indexOf("Safari")    ? {        type: "Safari",        version: Number(t.match(/version//([/d]+)/)[1]),      }    : {        type: t,        version: -1,      };};

12.设置cookie

cookie可能是我见过的最糟糕的API，它太难用了，我们不得不重新封装它以最大限度地提高我们的开发效率。

const setCookie = (key, value, expire) => {  const d = new Date();  d.setDate(d.getDate() + expire);  document.cookie = `${key}=${value};expires=${d.toUTCString()}`;};

13.获取cookies

除了对cookie进行写入之外，我们还会涉及到它的读取操作。

const getCookie = (key) => {  const cookieStr = unescape(document.cookie);  const arr = cookieStr.split("; ");  let cookieValue = "";  for (let i = 0; i < arr.length; i++) {    const temp = arr[i].split("=");    if (temp[0] === key) {      cookieValue = temp[1];      break;    }  }  return cookieValue;};

14.删除cookies

删除cookie的想法是什么？其实只要将它的过期时间设置为此时，它就会立即过期。

const delCookie = (key) => {  document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`;};

15. 生成随机字符串

不知道大家有没有遇到过需要生成随机字符串的场景。我遇到过很多次了，每次都要重新google一遍，直到学会这个工具功能。

const randomString = (len) => {  let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789";  let strLen = chars.length;  let randomStr = "";  for (let i = 0; i < len; i++) {    randomStr += chars.charAt(Math.floor(Math.random() * strLen));  }  return randomStr;};randomString(10) // pfkMfjEJ6xrandomString(20) // ce6tEx1km4idRNMtym2S

16. 将字符串的第一个字母大写

const fistLetterUpper = (str) => {  return str.charAt(0).toUpperCase() + str.slice(1);};fistLetterUpper('fatfish') // Fatfish

17.生成指定范围内的随机数

也许出于测试目的，我经常需要生成一定范围内的随机数。

const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;randomNum(1, 10) // 6randomNum(10, 20) // 11

18. 打乱数组的顺序

如何打乱数组原来的顺序？

const shuffleArray = (array) => {  return array.sort(() => 0.5 - Math.random())}let arr = [ 1, -1, 10, 5 ]shuffleArray(arr) // [5, -1, 10, 1]shuffleArray(arr) // [1, 10, -1, 5]

19. 从数组中获取随机值

之前做过一个抽奖项目，需要让数组中的奖品随机出现。

const getRandomValue = array => array[Math.floor(Math.random() * array.length)]; const prizes = [  '$100', '


            本文链接：http://www.28at.com/showinfo-26-57936-0.html21个简单而实用的 JavaScript 代码片段
            声明：本网页内容旨在传播知识，不代表本站观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。


    显示全文
	
		上一篇：常用的几种推荐算法介绍
		
下一篇：五个用于前端的Python库

全部频道