34 个实用 JavaScript 代码片段:提升开发效率的实用技巧

1,271 阅读6分钟

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

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

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

1. 声明和初始化数组

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

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) 可以快速过滤数组中的假值(0undefinednullfalse""''):

const array = [3, 0, 6, 7, '', false];
array.filter(Boolean); // [3, 6, 7]

3. 数组查找

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

if (~arr.indexOf(item)) { // 找到元素
  // ...
}

if (!~arr.indexOf(item)) { // 未找到元素
  // ...
}

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

if (arr.includes(item)) { 
  // ...
}

4. 洗牌数组

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

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

5. 清空数组

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

// 清空原始数组:
arr.length = 0;

// 重新赋值给一个新的空数组:
arr = [];

6. 并集、交集和差集

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

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...elseswitch 语句:

function doSomething(arg1) {
  arg1 = arg1 || 10; // 如果 arg1 未设置,则将其设置为 10
  return arg1;
}

let foo = 10;
foo === 10 && doSomething(); // 输出: 10
foo === 5 || doSomething(); // 输出: 10

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

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

const user = { employee: { name: "Kapil" } };

user.employee?.name; // 输出: "Kapil"
user.employ?.name; // 输出: undefined 

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

?? 运算符可以提供默认值,当左侧操作数为 nullundefined 时,返回右侧操作数:

const foo = null ?? 'my school'; // 输出: "my school"

const baz = 0 ?? 42; // 输出: 0

10. ||=??=:条件赋值

||= 仅在左侧为假值时赋值,而 ??= 仅在左侧为 nullundefined 时赋值:

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() 方法可以将十进制数字转换为二进制、十六进制等:

const num = 10;

num.toString(2); // 输出: "1010" 
num.toString(16); // 输出: "a"
num.toString(8); // 输出: "12"

12. 获取随机整数

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

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

random(1, 50); // 返回 1 到 50 之间的随机整数

13. 字符串转数字

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

let str = '2';
console.log(Number(str));  // 2
console.log(+str);  // 2

14. 科学计数法

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

for (let i = 0; i < 1e7; i++) {}

// 这些比较都返回 true
1e0 === 1;
1e1 === 10;
1e2 === 100;
// ...

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

15. 检查对象是否为空

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

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;

isEmpty({}); // true
isEmpty({a: "not empty"}); // false

16. 动态属性名

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

const key = 'name';
const person = { [key]: 'Alice' };
console.log(person.name); // 输出: Alice

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

17. 首字母大写

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

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);

capitalize("hello world"); // "Hello world"

18. 反转字符串

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

const reverse = str => str.split('').reverse().join('');

reverse('hello world'); // "dlrow olleh"

19. 过滤特殊字符

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

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() 可以将文本复制到剪贴板:

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World"); 

21. 清除所有 Cookie

使用 document.cookie 可以操作 Cookie:

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

22. 获取选中的文本

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

const getSelectedText = () => window.getSelection().toString();

23. 滚动到页面顶部

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

const goToTop = () => window.scrollTo(0, 0);

24. 检查是否滚动到底部

使用 document.documentElement.clientHeightwindow.scrollYdocument.documentElement.scrollHeight 可以判断页面是否滚动到底部:

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY
                              >= document.documentElement.scrollHeight;

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

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

const isTabInView = () => !document.hidden;

26. 重定向到 URL

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

const redirect = url => location.href = url;

redirect("https://www.google.com/");

27. 打开打印对话框

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

const showPrintDialog = () => window.print();

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

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

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

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 可以判断一个对象是否为函数:

const isFunction = (obj) => typeof obj === "function" && typeof obj.nodeType !== "number" && typeof obj.item !== "function";

30. 防抖和节流

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

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

// 防抖
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. 常见的正则表达式验证

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

// 验证 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. 使用解构

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

const person = { name: "Alice", age: 25 };
const { name, age } = person;

console.log(name, age); // "Alice" 25

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

使用 +!!+ '' 可以快速进行类型转换:

const price = +'32'; // 转换为数字
const isTrue = !!''; // 转换为布尔值
const str = 1 + ''; // 转换为字符串

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

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

if (condition1) {
  // 执行 condition1 
  return;
}

if (condition2) {
  // 执行 condition2
  return;
}
if (condition3) {
  // 执行 condition3 
  return;
}

总结

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

最后,如果这篇文章对你有所帮助,请“点赞、收藏+关注” ,感谢支持!祝您编码愉快!