50个常用的JavaScript技巧汇总 转载

原文链接：https://mp.weixin.qq.com/s/h6nEq1OEF7eF9lc1EolSKQ

在日常开发中，JavaScript 是我们绕不开的核心语言。无论你是前端开发、全栈工程师，还是刚入门的初学者，掌握一些实用的 JavaScript 技巧，不仅能大幅提升开发效率，还能让你的代码更加优雅、简洁。

今天这篇文章，我们为你整理了 50 个常用且高频的 JavaScript 技巧，涵盖数组、对象、函数、DOM 操作等多个实战场景，每个技巧都配有简洁的示例代码，拿来就能用，快来查漏补缺吧！

一.基础技巧

1.使用??代替||处理 null/undefined

const name = null;console.log(name ?? 'Guest'); // 'Guest'

2.使用?.安全访问嵌套属性

const user = {};console.log(user.address?.city); // undefined，不报错

3.转换为布尔值

const loggedIn = !!user; // true 或 false

4.数字转字符串 / 字符串转数字

String(123); // '123'Number("456"); // 456

5.使用typeof检查变量类型

console.log(typeof 42); // 'number'

二、数组技巧

6.去重数组

const nested = [1, [2, [3]]];nested.flat(2); // [1, 2, 3]

7.查找最大值/最小值

Math.max(...[1, 2, 3]); // 3Math.min(...[1, 2, 3]); // 1

8.打乱数组顺序

const arr = [1, 2, 3];arr.sort(() => Math.random() - 0.5);

9.生成固定长度数组

Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]

10.数组扁平化

const nested = [1, [2, [3]]];nested.flat(2); // [1, 2, 3]

11.数组分组

const groupBy = (arr, fn) =>  arr.reduce((acc, val) => {    const key = fn(val);    (acc[key] = acc[key] || []).push(val);    return acc;  }, {});

三、对象技巧

12.合并对象

const merged = { ...obj1, ...obj2 };

13.对象键值互换

const obj = { a: 1, b: 2 };const flipped = Object.fromEntries(  Object.entries(obj).map(([k, v]) => [v, k]));

14.从对象中提取部分属性

const { a, b } = obj;

15.动态属性名

const key = "name";const user = { [key]: "Tom" };

16.删除对象中 falsy 值

Object.fromEntries(Object.entries(obj).filter(([k, v]) => v));

四、函数技巧

17.默认参数

function greet(name = 'Guest') {  console.log(`Hello, ${name}`);}

18.箭头函数简写

const double = x => x * 2;

19.立即执行函数（IIFE）

(() => {  console.log("Executed!");})();

20.函数缓存（记忆化）

const memo = fn => {  const cache = {};  return x => cache[x] || (cache[x] = fn(x));};

21.函数节流（throttle）

function throttle(fn, delay) {  let last = 0;  return (...args) => {    const now = Date.now();    if (now - last > delay) {      last = now;      fn(...args);    }  };}

22.函数防抖（debounce）

function debounce(fn, delay) {  let timer;  return (...args) => {    clearTimeout(timer);    timer = setTimeout(() => fn(...args), delay);  };}

五、时间处理技巧

23.获取当前时间戳

Date.now(); // 或 +new Date()

24.格式化时间

new Date().toLocaleString(); 

25.延迟执行

setTimeout(() => console.log("Hi"), 1000);

26.每秒执行

const interval = setInterval(() => console.log("Tick"), 1000);clearInterval(interval);

六、字符串操作技巧

27.模板字符串

const msg = `Hello, ${name}`;

28.字符串反转

"hello".split("").reverse().join(""); // "olleh"

29.字符串重复

"abc".repeat(3); // "abcabcabc"

30.替换所有

"foo foo".replaceAll("foo", "bar"); // "bar bar"

31.检查字符串开头/结尾

str.startsWith("Hello");str.endsWith("!");

七、逻辑与运算技巧

32.三元表达式

const status = isActive ? "active" : "inactive";

33.简写 if

isLoggedIn && showDashboard();

34.短路赋值

user.name ||= "Guest";

35.按位取整

~~3.14; // 3

36.指数操作

2 ** 3; // 8

八、工具类技巧

37.深拷贝对象

const deepCopy = JSON.parse(JSON.stringify(obj));

38.获取对象长度

Object.keys(obj).length;

39.判断是否为数组

Array.isArray(arr);

40.随机字符串

Math.random().toString(36).slice(2);

41.生成唯一 ID

const uuid = () => Date.now().toString(36) + Math.random().toString(36).slice(2);

九、DOM 操作技巧

42.选择元素

document.querySelector(".btn");

43.添加事件

btn.addEventListener("click", () => alert("Clicked"));

44.创建元素

const el = document.createElement("div");

45.设置 innerHTML

el.innerHTML = "<p>Hello</p>";

46.设置样式

el.style.color = "red";

47.操作类名

el.classList.add("active");el.classList.remove("hidden");

十、实用判断技巧

48.判断空对象

Object.keys(obj).length === 0;

49.判断为空值（null, undefined, ""）

if (!value) { /* do something */ }

50.判断是否为数字

!isNaN(Number(val));

写在最后

以上就是今天我想与你分享的50 个高频使用的 JavaScript 技巧，你掌握了几个？

这些技巧不仅能帮你写出更简洁高效的代码，也能提升你解决问题的思路和能力。

如果你觉得这篇文章对你有帮助，不妨点个在看，收藏，在需要时随时查阅；也欢迎你分享给你的朋友，也许能够帮助到他们，一起学习，一起进步，一起成为更强的开发者！

最后，感谢你的阅读，祝编程愉快！