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

关于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() // undefined
getType({}}) // object
getType([]) // array
getType(1) // number
getType('fatfish') // string
getType(true) // boolean
getType(/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  Math.floor(Math.random() * (max - min + 1)) + min;


randomNum(1, 10) // 6
randomNum(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', '🍫', '🍔' ]


getRandomValue(prizes) // 🍫
getRandomValue(prizes) // 🍔
getRandomValue(prizes) // 🍫

20.第一种格式化货币的方式

货币格式化的方式有很多种，比如这两种方式。

const formatMoney = (money) => {
  return money.replace(new RegExp(`(?!^)(?=(\d{3})+${money.includes('.') ? '\.' : '$'})`, 'g'), ',')  
}


formatMoney('123456789') // '123,456,789'
formatMoney('123456789.123') // '123,456,789.123'
formatMoney('123') // '123'

21.第二种格式化货币的方式

正则表达式让我们太头疼了不是吗？ 因此，我们需要找到一种更简单的方式来格式化货币。

const formatMoney = (money) => {
  return money.toLocaleString()
}


formatMoney(123456789) // '123,456,789'
formatMoney(123456789.123) // '123,456,789.123'
formatMoney(123) // '123'

我太喜欢这种方式了，简单易懂。

总结

以上就是我想与你分享的21个关于JS的代码技巧，希望这些代码片段能够帮助你提升工作效率。