JavaScript 常用实例代码合集
2023-09-15 13:04:07
JavaScript 常用实例代码：提高开发效率的 30 个妙招
简介
JavaScript 开发中经常遇到的重复性任务，如数组去重、字符串格式化和日期处理，会影响开发效率。本文汇总了 30 个精心挑选的 JavaScript 常用实例代码，涵盖了数组操作、字符串操作、函数操作、对象操作和日期操作等各个方面，旨在帮助开发人员提高效率，轻松应对常见开发难题。
数组操作
1.1 数组去重
function unique(array) {
return [...new Set(array)];
}
此代码利用 Set 数据结构的唯一性，巧妙地去除了数组中的重复元素。
1.2 数组排序
function sortArray(array) {
return array.sort((a, b) => a - b);
}
此代码使用数组的 sort() 方法对数字数组进行升序排序。
1.3 数组打乱
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
此代码通过随机交换数组元素，实现了数组的打乱效果，适用于抽奖或洗牌等场景。
字符串操作
2.1 字符串首字母大写
function capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
此代码将字符串的首字母转换为大写，适用于标题或人名处理。
2.2 字符串末尾添加省略号
function truncateString(string, length) {
if (string.length > length) {
return string.substring(0, length - 3) + "...";
} else {
return string;
}
}
此代码在超过指定长度的字符串末尾添加省略号，便于在空间受限的情况下展示内容。
2.3 字符串转义 HTML 字符
function escapeHtml(string) {
const map = {
"&": "&",
"<": "<",
">": ">",
'"': """,
"'": "'",
};
return string.replace(/[&<>"']/g, (m) => map[m]);
}
此代码将 HTML 特殊字符转换为 HTML 实体，防止浏览器错误解析并显示。
函数操作
3.1 函数防抖
function debounce(func, wait) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
此代码防止函数在短时间内被多次触发，适用于防止按钮连点或搜索框输入时的频繁请求。
3.2 函数节流
function throttle(func, wait) {
let lastTime = 0;
return function (...args) {
const now = new Date().getTime();
if (now - lastTime > wait) {
func.apply(this, args);
lastTime = now;
}
};
}
此代码与防抖类似，但只允许函数在指定时间间隔内执行一次，适用于滚动或鼠标移动等高频事件处理。
3.3 函数柯里化
function curry(func) {
return function (...args) {
if (args.length >= func.length) {
return func.apply(this, args);
} else {
return (...rest) => curry(func)(...args, ...rest);
}
};
}
此代码将多参数函数转换为单参数函数，便于函数组合和代码复用。
对象操作
4.1 对象深度克隆
function deepClone(object) {
return JSON.parse(JSON.stringify(object));
}
此代码通过 JSON 序列化和反序列化实现对象的深度克隆，适用于复杂对象或包含循环引用的情况。
4.2 对象合并
function mergeObjects(...objects) {
return Object.assign({}, ...objects);
}
此代码将多个对象合并为一个新的对象，适用于合并来自不同来源的数据。
4.3 对象转 URL 参数
function objectToParams(object) {
return Object.keys(object)
.map((key) => `${key}=${object[key]}`)
.join("&");
}
此代码将对象转换为 URL 参数字符串，适用于将数据提交到服务器或构建查询字符串。
日期操作
5.1 获取当前时间戳
function getCurrentTimestamp() {
return new Date().getTime();
}
此代码获取当前时间戳，用于计算时间差或作为唯一标识符。
5.2 时间戳转日期字符串
function timestampToDateString(timestamp) {
return new Date(timestamp).toLocaleDateString();
}
此代码将时间戳转换为可读的日期字符串，适用于显示日期信息。
5.3 日期字符串转时间戳
function dateStringToTimestamp(dateString) {
return new Date(dateString).getTime();
}
此代码将日期字符串转换为时间戳，适用于将用户输入的日期转换为机器可理解的格式。
结语
本文提供的 30 个 JavaScript 常用实例代码，涵盖了广泛的开发场景，旨在为 JavaScript 开发人员提供即时可用的解决方案。这些代码不仅可以提高开发效率，还可以帮助开发人员应对常见的开发难题。
常见问题解答
- 这些代码是否适用于所有 JavaScript 版本？
这些代码适用于大多数 JavaScript 版本，包括 ES5、ES6 和更新版本。
- 如何使用这些代码？
可以直接将这些代码复制到 JavaScript 代码中，或将其封装为函数或类进行复用。
- 如何扩展这些代码？
这些代码可以作为基础，根据具体需求进行扩展或修改。
- 是否可以将这些代码用于商业项目？
这些代码没有版权限制，可以自由用于商业项目。
- 如何获得代码的更新？
随着 JavaScript 的不断发展，这些代码可能会更新。建议关注权威的技术博客或社区，获取最新代码和信息。
