揭秘 JavaScript 开发者私藏工具箱：100+个代码片段剖析

2024-01-20 10:31:20

JavaScript 工具箱：程序员必备的随身宝剑

在软件开发的江湖中，JavaScript 工具箱就如同武侠小说里的随身宝剑，乃是程序员的必备神器。从数组操作到字符串操作，再到对象操作与函数操作，无所不能、无所不包。今天，我们就来盘点一下 JavaScript 中那些令人惊叹的工具片段。

数组操作是编程中的基本任务，而 JavaScript 为此提供了丰富的工具。

数组去重： const uniqueArray = [...new Set(array)];
数组扁平化： const flatArray = array.flat(Infinity);
数组交集： const intersection = array1.filter(element => array2.includes(element));
数组差集： const difference = array1.filter(element => !array2.includes(element));
数组并集： const union = [...new Set([...array1, ...array2])];
数组随机排序： const shuffledArray = array.sort(() => Math.random() - 0.5);

字符串也是 JavaScript 中经常需要处理的对象，而这些工具片段可以让你轻松应对各种字符串操作需求。

字符串首字母大写： const capitalizedString = string[0].toUpperCase() + string.slice(1);
字符串末尾添加省略号： const truncatedString = string.length > 10 ? string.slice(0, 10) + "..." : string;
字符串反转： const reversedString = string.split("").reverse().join("");
字符串转换为数字： const number = parseInt(string, 10);
字符串转换为布尔值： const boolean = string === "true" ? true : false;
字符串去除空格： const trimmedString = string.trim();

对象是 JavaScript 中强大的数据结构，而这些工具片段可以帮助你高效地处理对象。

对象键值对互换： const swappedObject = Object.fromEntries(Object.entries(object).map(([key, value]) => [value, key]));
对象合并： const mergedObject = {...object1, ...object2};
对象克隆： const clonedObject = JSON.parse(JSON.stringify(object));
对象查找： const foundObject = object[key];
对象删除属性： delete object[key];
对象遍历： for (const [key, value] of Object.entries(object)) { // Do something with the key and value }

函数是 JavaScript 中的核心概念，而这些工具片段可以让你灵活地处理函数。

函数柯里化： const curriedFunction = (a) => (b) => (c) => a + b + c;
函数防抖： const debouncedFunction = _.debounce(function, delay);
函数节流： const throttledFunction = _.throttle(function, delay);
函数柯里化： const curriedFunction = (a) => (b) => (c) => a + b + c;
函数组合： const composedFunction = (...functions) => (argument) => functions.reduceRight((result, fn) => fn(result), argument);
函数绑定： const boundFunction = function.bind(context, ...arguments);

日期操作也是 JavaScript 中的常见任务，而这些工具片段可以让你轻松处理日期。

正则表达式是 JavaScript 中处理文本的强大工具，而这些工具片段可以让你快速解决各种文本匹配需求。

匹配电子邮件地址： const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
匹配网址： const urlRegex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/;
匹配电话号码： const phoneRegex = /^$?([0-9]{3})$?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
匹配信用卡号： const creditCardRegex = /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9]{2})[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/;
匹配密码： const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
匹配颜色值： const colorRegex = /^#?([a-f\d]{3}|[a-f\d]{6})$/i;