作为一名 JavaScript 开发者，你是否也曾被繁琐的代码、重复的劳动困扰？

想要更高效地开发，写出更简洁的代码，你需要掌握一些实用的技巧和工具。本文将带你领略 JavaScript 代码片段中的常见技巧，助你提升开发效率，打造更优雅的应用！

数组操作：高效处理数据集合

1. 声明和初始化数组

使用 Array(5).fill('') 可以轻松初始化一个指定大小的数组，并用默认值填充。 对于二维数组/矩阵，可以使用嵌套的 map 和 fill 方法：

javascript代码解读复制代码const array = Array(5).fill(''); // ["", "", "", "", ""]  const matrix = Array(5).fill(0).map(() => Array(5).fill(0));  // [Array(5), Array(5), Array(5), Array(5), Array(5)] // 0: (5) [0, 0, 0, 0, 0] // 1: (5) [0, 0, 0, 0, 0] // ...  // length: 5 

2. 过滤数组中的假值

使用 filter(Boolean) 可以快速过滤数组中的假值（0、undefined、null、false、""、''）：

javascript代码解读复制代码const array = [3, 0, 6, 7, '', false]; array.filter(Boolean); // [3, 6, 7] 

3. 数组查找

indexOf() 可以查找元素在数组中的位置，找不到则返回 -1。 可以使用按位非运算符（~） 简化判断：

javascript代码解读复制代码if (~arr.indexOf(item)) { // 找到元素   // ... }  if (!~arr.indexOf(item)) { // 未找到元素   // ... } 

或者使用 includes() 进行更简洁的判断：

javascript代码解读复制代码if (arr.includes(item)) {    // ... } 

4. 洗牌数组

使用 sort() 方法结合 Math.random() 可以轻松实现洗牌：

javascript代码解读复制代码const list = [1, 2, 3, 4, 5, 6, 7, 8, 9]; list.sort(() => Math.random() - 0.5); // 随机排序 

5. 清空数组

使用 arr.length = 0 直接清空数组，而 arr = [] 只是重新赋值，原来的数组仍然占用内存。

javascript代码解读复制代码// 清空原始数组： arr.length = 0;  // 重新赋值给一个新的空数组： arr = []; 

6. 并集、交集和差集

使用 Set 对象可以方便地进行数组的并集、交集和差集操作：

javascript代码解读复制代码let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]);  // 并集 let union = new Set([...a, ...b]); // Set {1, 2, 3, 4}  // 交集 let intersect = new Set([...a].filter(x => b.has(x))); // Set {2, 3}  // 差集 let difference = new Set([...a].filter(x => !b.has(x))); // Set {1} 

逻辑运算：巧妙运用条件判断

7. 使用逻辑运算符简化条件判断

使用 || 和 && 可以简化嵌套的 if...else 或 switch 语句：

javascript代码解读复制代码function doSomething(arg1) {   arg1 = arg1 || 10; // 如果 arg1 未设置，则将其设置为 10   return arg1; }  let foo = 10; foo === 10 && doSomething(); // 输出: 10 foo === 5 || doSomething(); // 输出: 10 

8. 可选链：安全访问对象属性

可选链 ?. 在访问可能为空的对象属性时，可以避免错误，返回 undefined：

javascript代码解读复制代码const user = { employee: { name: "Kapil" } };  user.employee?.name; // 输出: "Kapil" user.employ?.name; // 输出: undefined  

9. 空值合并运算符：提供默认值

?? 运算符可以提供默认值，当左侧操作数为 null 或 undefined 时，返回右侧操作数：

javascript代码解读复制代码const foo = null ?? 'my school'; // 输出: "my school"  const baz = 0 ?? 42; // 输出: 0 

10. ||= 和 ??=：条件赋值

||= 仅在左侧为假值时赋值，而 ??= 仅在左侧为 null 或 undefined 时赋值：

javascript代码解读复制代码let x = null; x ||= 5; // 输出: 5 let y = 10; y ||= 7; // 输出: 10  let a = null; a ??= 5; // 输出: 5 let b = 10; b ??= 7; // 输出: 10 

数字操作：灵活处理数值类型

11. 进制转换

使用 toString() 方法可以将十进制数字转换为二进制、十六进制等：

javascript代码解读复制代码const num = 10;  num.toString(2); // 输出: "1010"  num.toString(16); // 输出: "a" num.toString(8); // 输出: "12" 

12. 获取随机整数

使用 Math.random() 和 Math.floor() 可以获取指定范围内的随机整数：

javascript代码解读复制代码const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);  random(1, 50); // 返回 1 到 50 之间的随机整数 

13. 字符串转数字

使用 + 或 Number() 可以快速将字符串转换为数字：

javascript代码解读复制代码let str = '2'; console.log(Number(str));  // 2 console.log(+str);  // 2 

14. 科学计数法

使用科学计数法可以简洁地表示较大的数字：

javascript代码解读复制代码for (let i = 0; i < 1e7; i++) {}  // 这些比较都返回 true 1e0 === 1; 1e1 === 10; 1e2 === 100; // ... 

对象操作：灵活处理数据结构

15. 检查对象是否为空

使用 Reflect.ownKeys() 和 constructor 属性可以判断对象是否为空：

javascript代码解读复制代码const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;  isEmpty({}); // true isEmpty({a: "not empty"}); // false 

16. 动态属性名

使用方括号可以动态设置对象属性名：

javascript代码解读复制代码const key = 'name'; const person = { [key]: 'Alice' }; console.log(person.name); // 输出: Alice 

字符串操作：高效处理文本数据

17. 首字母大写

使用 charAt() 和 toUpperCase() 可以轻松实现首字母大写：

javascript代码解读复制代码const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);  capitalize("hello world"); // "Hello world" 

18. 反转字符串

使用 split()、reverse() 和 join() 方法可以轻松实现字符串反转：

javascript代码解读复制代码const reverse = str => str.split('').reverse().join('');  reverse('hello world'); // "dlrow olleh" 

19. 过滤特殊字符

使用正则表达式可以方便地过滤字符串中的特殊字符：

javascript代码解读复制代码function filterCharacter(str) {   let pattern = new RegExp("[`~!@#$^&*()=：""'。，、？|{}':;'%,\\[\\].<>/?~！@#￥……&*（）&;—|{ }【】'；]");   let resultStr = "";   for (let i = 0; i < str.length; i++) {     resultStr = resultStr + str.substr(i, 1).replace(pattern, '');   }   return resultStr; }  filterCharacter('gyaskjdhy12316789#$%^&!@#1=123,./['); // "gyaskjdhy123167891123" 

浏览器操作：与浏览器交互

20. 将内容复制到剪贴板

使用 navigator.clipboard.writeText() 可以将文本复制到剪贴板：

javascript代码解读复制代码const copyToClipboard = (text) => navigator.clipboard.writeText(text);  copyToClipboard("Hello World");  

21. 清除所有 Cookie

使用 document.cookie 可以操作 Cookie：

javascript代码解读复制代码const clearCookies = document.cookie.split(';').forEach(   cookie => document.cookie = cookie.replace(/^ +/, '')   .replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`) ); 

22. 获取选中的文本

使用 window.getSelection().toString() 可以获取用户选中的文本：

javascript代码解读复制代码const getSelectedText = () => window.getSelection().toString(); 

23. 滚动到页面顶部

使用 window.scrollTo() 可以控制页面滚动：

javascript代码解读复制代码const goToTop = () => window.scrollTo(0, 0); 

24. 检查是否滚动到底部

使用 document.documentElement.clientHeight、window.scrollY 和 document.documentElement.scrollHeight 可以判断页面是否滚动到底部：

javascript代码解读复制代码const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY                               >= document.documentElement.scrollHeight; 

25. 检查选项卡是否处于活动状态

使用 document.hidden 可以判断当前选项卡是否处于活动状态：

javascript代码解读复制代码const isTabInView = () => !document.hidden; 

26. 重定向到 URL

使用 location.href 可以进行页面重定向：

javascript代码解读复制代码const redirect = url => location.href = url;  redirect("https://www.google.com/"); 

27. 打开打印对话框

使用 window.print() 可以打开打印对话框：

javascript代码解读复制代码const showPrintDialog = () => window.print(); 

URL 操作：解析和处理 URL 信息

28. 从 URL 获取参数并转换为对象

使用 URL.split("?") 和 JSON.parse() 可以解析 URL 参数并转换为对象：

javascript代码解读复制代码const getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")[1]).replace(/"/g, '\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`);  getParameters("https://www.google.com.hk/search?q=js+md&newwindow=1");  // {q: 'js+md', newwindow: '1'} 

其他实用技巧

29. 检查是否为函数

使用 typeof 可以判断一个对象是否为函数：

javascript代码解读复制代码const isFunction = (obj) => typeof obj === "function" && typeof obj.nodeType !== "number" && typeof obj.item !== "function"; 

30. 防抖和节流

防抖: 在一段时间内只执行一次，即使触发多次事件，也只执行最后一次。

节流: 在指定时间范围内，即使触发多次事件，也只执行一次。

javascript代码解读复制代码// 防抖 function debounce(fn, delay) {   let timer = null;   return function () {     if (timer) {       clearTimeout(timer);     }     timer = setTimeout(() => {       fn.apply(this);     }, delay);   }; }  // 节流 function throttle(fn) {   let timer = null;   return function () {     if (timer) return;     timer = setTimeout(() => {       fn.apply(this, arguments);       timer = null;     }, 1000);   }; } 

31. 常见的正则表达式验证

使用正则表达式可以对常见的输入数据进行验证：

javascript代码解读复制代码// 验证 2-9 个中文字符 const validateName = (name) => /^[\u4e00-\u9fa5]{2,9}$/.test(name);  // 验证手机号 const validatePhoneNum = (mobile) => /^1[3-9]\d{9}$/.test(mobile);  // 验证密码（6-18 个字符：字母、数字、下划线） const validatePassword = (password) => /^[a-zA-Z0-9_]{6,18}$/.test(password); 

良好的编码习惯

32. 使用解构

使用解构可以使代码更简洁：

javascript代码解读复制代码const person = { name: "Alice", age: 25 }; const { name, age } = person;  console.log(name, age); // "Alice" 25 

33. 巧妙利用 JS 隐式类型转换

使用 +、!! 和 + '' 可以快速进行类型转换：

javascript代码解读复制代码const price = +'32'; // 转换为数字 const isTrue = !!''; // 转换为布尔值 const str = 1 + ''; // 转换为字符串 

34. 使用 return 代替 if...else

使用 return 可以简化 if...else 语句，使代码更易读：

javascript代码解读复制代码if (condition1) {   // 执行 condition1    return; }  if (condition2) {   // 执行 condition2   return; } if (condition3) {   // 执行 condition3    return; } 

总结

掌握这些 JavaScript 代码片段中的实用技巧，可以帮助你提升代码效率，写出更优雅的代码。不断学习和实践，你将发现更多提升开发效率的利器！ 祝你编码愉快，创造出更精彩的应用！ 😊