JavaScript 实际开发中常用代码合集
JavaScript 是前端开发中最重要的编程语言之一，广泛应用于网页交互、数据处理、异步编程等场景。在实际开发中，我们经常会用到一些常用的
JavaScript 是前端开发中最重要的编程语言之一，广泛应用于网页交互、数据处理、异步编程等场景。在实际开发中，我们经常会用到一些常用的代码片段和技巧。本文将总结一些在实际开发中常用的 JavaScript 代码，帮助你提高开发效率。
文章目录
1. 数据处理1.1 数组去重1.2 数组排序1.3 数组过滤1.4 数组映射1.5 数组求和1.6 对象深拷贝1.7 对象合并
2. 字符串操作2.1 字符串反转2.2 字符串截取2.3 字符串模板2.4 字符串去空格
3. 日期处理3.1 获取当前时间3.2 格式化日期3.3 计算日期差
4. 异步编程4.1 Promise 基本用法4.2 async/await4.3 并发请求
5. DOM 操作5.1 获取元素5.2 添加事件监听5.3 修改样式5.4 动态创建元素
6. 实用工具函数6.1 防抖函数6.2 节流函数6.3 生成随机数6.4 判断数据类型
7. 浏览器相关7.1 获取 URL 参数7.2 设置 Cookie7.3 读取 Cookie
8. 其他实用代码8.1 判断设备类型8.2 复制文本到剪贴板8.3 判断是否支持 WebP 格式
9. 总结
1. 数据处理
1.1 数组去重
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]
1.2 数组排序
const arr = [3, 1, 4, 1, 5, 9, 2, 6];
const sortedArr = arr.sort((a, b) => a - b);
console.log(sortedArr); // [1, 1, 2, 3, 4, 5, 6, 9]
1.3 数组过滤
const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter(item => item > 2);
console.log(filteredArr); // [3, 4, 5]
1.4 数组映射
const arr = [1, 2, 3];
const mappedArr = arr.map(item => item * 2);
console.log(mappedArr); // [2, 4, 6]
1.5 数组求和
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15
1.6 对象深拷贝
const obj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(obj));
console.log(deepCopy); // { a: 1, b: { c: 2 } }
1.7 对象合并
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { a: 1, b: 3, c: 4 }
2. 字符串操作
2.1 字符串反转
const str = "hello";
const reversedStr = str.split("").reverse().join("");
console.log(reversedStr); // "olleh"
2.2 字符串截取
const str = "Hello, World!";
const subStr = str.substring(0, 5);
console.log(subStr); // "Hello"
2.3 字符串模板
const name = "Alice";
const age = 25;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // "My name is Alice and I am 25 years old."
2.4 字符串去空格
const str = " Hello, World! ";
const trimmedStr = str.trim();
console.log(trimmedStr); // "Hello, World!"
3. 日期处理
3.1 获取当前时间
const now = new Date();
console.log(now); // 当前时间
3.2 格式化日期
const date = new Date();
const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
console.log(formattedDate); // "2023-10-05"
3.3 计算日期差
const date1 = new Date("2023-10-01");
const date2 = new Date("2023-10-05");
const timeDiff = date2 - date1;
const daysDiff = timeDiff / (1000 * 60 * 60 * 24);
console.log(daysDiff); // 4
4. 异步编程
4.1 Promise 基本用法
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data fetched");
}, 1000);
});
};
fetchData().then(data => console.log(data)); // "Data fetched"
4.2 async/await
const fetchData = async () => {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
return data;
};
fetchData().then(data => console.log(data));
4.3 并发请求
const fetchMultipleData = async () => {
const [data1, data2] = await Promise.all([
fetch("https://api.example.com/data1").then(res => res.json()),
fetch("https://api.example.com/data2").then(res => res.json())
]);
return { data1, data2 };
};
fetchMultipleData().then(({ data1, data2 }) => console.log(data1, data2));
5. DOM 操作
5.1 获取元素
const element = document.getElementById("myElement");
console.log(element);
5.2 添加事件监听
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
console.log("Button clicked");
});
5.3 修改样式
const element = document.getElementById("myElement");
element.style.color = "red";
5.4 动态创建元素
const newElement = document.createElement("div");
newElement.textContent = "Hello, World!";
document.body.appendChild(newElement);
6. 实用工具函数
6.1 防抖函数
const debounce = (func, delay) => {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
};
window.addEventListener("resize", debounce(() => {
console.log("Window resized");
}, 300));
6.2 节流函数
const throttle = (func, delay) => {
let lastCall = 0;
return function (...args) {
const now = new Date().getTime();
if (now - lastCall < delay) return;
lastCall = now;
func.apply(this, args);
};
};
window.addEventListener("scroll", throttle(() => {
console.log("Window scrolled");
}, 300));
6.3 生成随机数
const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
console.log(randomNum(1, 10)); // 1到10之间的随机数
6.4 判断数据类型
const getType = (obj) => Object.prototype.toString.call(obj).slice(8, -1);
console.log(getType([])); // "Array"
console.log(getType({})); // "Object"
console.log(getType("hello")); // "String"
7. 浏览器相关
7.1 获取 URL 参数
const getQueryParams = () => {
const params = {};
window.location.search.replace(/([^?&=]+)=([^&]+)/g, (_, key, value) => {
params[key] = value;
});
return params;
};
console.log(getQueryParams());
7.2 设置 Cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
7.3 读取 Cookie
const getCookie = (name) => {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
};
console.log(getCookie("username")); // "John Doe"
8. 其他实用代码
8.1 判断设备类型
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
console.log(isMobile ? "Mobile" : "Desktop");
8.2 复制文本到剪贴板
const copyToClipboard = (text) => {
navigator.clipboard.writeText(text).then(() => {
console.log("Text copied to clipboard");
});
};
copyToClipboard("Hello, World!");
8.3 判断是否支持 WebP 格式
const supportsWebP = () => {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => resolve(true);
img.onerror = () => resolve(false);
img.src = "data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==";
});
};
supportsWebP().then(supported => console.log(supported ? "Supports WebP" : "Does not support WebP"));
9. 总结
JavaScript 作为前端开发的核心语言，在实际项目里用途广泛，掌握常用代码片段能显著提升开发效率、快速解决常见问题。 在数据处理方面，数组去重与扁平化的代码可高效处理复杂数据结构，保证数据的准确性与可用性。字符串操作里，反转和替换功能让文本处理更加灵活。日期处理能精准计算日期差、获取当前时间，满足各类时间相关业务需求。 异步编程中的 Promise 和 async/await 让异步操作的处理变得清晰、简洁，避免回调地狱。DOM 操作部分，元素的创建、添加及事件监听是构建交互页面的基础。实用工具函数如随机数生成和深拷贝对象，为编程提供了便利。浏览器相关操作可用于获取 URL 参数和检测浏览器类型，适配不同的浏览器环境。 这些涵盖多个方面的代码片段，是开发者的得力助手。熟练运用它们，能让开发过程更加顺畅，有效提升项目的开发质量与进度。
本文总结了 JavaScript 在实际开发中常用的代码片段，涵盖了数据处理、字符串操作、日期处理、异步编程、DOM 操作、实用工具函数、浏览器相关操作等多个方面。这些代码片段可以帮助你提高开发效率，解决常见问题。
如果你有其他常用的代码片段或技巧，欢迎在评论区分享！
参考文献：
MDN Web DocsJavaScript: The Definitive Guide
版权声明： 本文为原创文章，版权归作者所有。转载请注明出处！
