原文

20 个既简单又实用的 JavaScript 小技巧 (qq.com)

详解

1.滚动到页面顶部

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

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

2.滚动到页面底部

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

1
2
3
4
5
6
7
const scrollToBottom = () => {
  window.scrollTo({
    top: document.documentElement.offsetHeight,
    left: 0,
    behavior: "smooth",
  });
};

3.滚动元素到可见区域

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

1
2
3
4
5
const smoothScroll = (element) => {
  element.scrollIntoView({
    behavior: "smooth",
  });
};

4.全屏显示元素

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

1
2
3
4
5
6
7
8
9
10
11
12
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.退出浏览器全屏状态

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

1
2
3
4
5
6
7
8
9
10
11
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.获取数据类型

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

1
2
3
4
5
6
7
8
9
10
11
12
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.停止冒泡事件

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

1
2
3
4
5
6
7
8
const stopPropagation = (event) => {
  event = event || window.event;
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }
};

8. 深拷贝一个对象

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 来确定的

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

10.判断设备是安卓还是IOS

除了区分是移动端还是PC端，很多时候我们还需要区分当前设备是Android还是IOS

1
2
3
4
5
6
7
8
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.获取浏览器类型及其版本

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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.设置cookies

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

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

除了写入 cookie 之外，我们还将参与其读取操作

1
2
3
4
5
6
7
8
9
10
11
12
13
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 的想法是什么？其实，只要把它的过期时间设置为这一刻，它就会立即过期

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

15.生成随机字符串

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

1
2
3
4
5
6
7
8
9
10
11
12
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) // pfkMfjEJ6x
randomString(20) // ce6tEx1km4idRNMtym2S

16. 字符串首字母大写

1
2
3
4
5
const fistLetterUpper = (str) => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

fistLetterUpper('fatfish') // Fatfish

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

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

1
2
3
4
const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

randomNum(1, 10) // 6
randomNum(10, 20) // 11

18.打乱数组的顺序

如何打乱数组的原始顺序

1
2
3
4
5
6
7
8
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. 从数组中获取随机值

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

1
2
3
4
5
6
const getRandomValue = array => array[Math.floor(Math.random() * array.length)]; 
const prizes = [  '$100', '🍫', '🍔' ]

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

20. 格式化货币

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

第一种方法

1
2
3
4
5
6
7
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'

第二种方式

正则表达式让我们很头疼，不是吗？所以我们需要找到一种更简单的方式来格式化货币

1
2
3
4
5
6
7
const formatMoney = (money) => {
  return money.toLocaleString()
}

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

21. 代码执行耗时日志输出

1
2
3
console.time('aa');
for(var i=0;i<1000;i++){console.log(i);};
console.timeEnd('aa')

22. 防抖函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="yourButtonId">点击</button>
		<script>
			// 防抖函数
			const debounce = function(func, wait = 1000, immediate = true) {
				let timer;
				return function() {
					console.log(123);
					let context = this,
						args = arguments;
					if (timer) clearTimeout(timer);
					if (immediate) {
						let callNow = !timer;
						timer = setTimeout(() => {
							timer = null;
						}, wait);
						if (callNow) func.apply(context, args);
					} else {
						timer = setTimeout(() => {
							func.apply(context, args);
						}, wait)
					}
				}
			}
			
			// 实际的点击处理函数
			function handleClick() {
			    console.log("按钮被点击了");
			    // 这里执行你的实际操作
			}
			
			// 获取按钮元素
			const button = document.getElementById('yourButtonId');
			
			// 为按钮添加防抖后的点击事件监听器
			button.addEventListener('click', debounce(handleClick)); // 500毫秒内连续点击只会执行一次 handleClick
		</script>
	</body>
</html>