如果你是一名前端开发者，你可能会发现自己经常需要编写一些重复的 JavaScript 代码。这些代码可能涉及到 DOM 操作、事件处理、字符串处理、数组操作等等。为了帮助你更高效地完成这些任务，我们整理了以下 48 个非常有用的 JavaScript 代码片段，这些代码片段具有深度和学习以及指导意义，可以帮助你提高编程技能。
DOM 操作
1. 通过 ID 获取元素
const element = document.getElementById('myElement');2. 通过 class 名称获取元素列表
const elements = document.querySelectorAll('.myClass');3. 创建新的元素
const newElement = document.createElement('div');4. 在元素中添加子元素
parentElement.appendChild(childElement);
5. 设置元素属性
element.setAttribute('id', 'newId');6. 获取元素属性
const attributeValue = element.getAttribute('id');7. 删除元素属性
element.removeAttribute('id');8. 修改元素样式
element.style.color = 'red';
9. 获取元素尺寸
const width = element.offsetWidth; const height = element.offsetHeight;
10. 监听元素事件
element.addEventListener('click', () => {
// 处理事件
});11. 移除元素事件监听器
element.removeEventListener('click', handleClick);字符串操作
12. 拼接字符串
const str1 = 'Hello';
const str2 = 'world';
const greeting = `${str1}, ${str2}!`;13. 获取字符串长度
const str = 'Hello world!'; const length = str.length;
14. 判断字符串是否包含子字符串
const str = 'Hello world!';
const contains = str.includes('world');15. 替换字符串中的子字符串
const str = 'Hello world!';
const newStr = str.replace('world', 'everyone');16. 将字符串转为小写/大写
const str = 'Hello world!'; const lowerCase = str.toLowerCase(); const upperCase = str.toUpperCase();
17. 去除字符串首尾空格
const str = ' Hello world! '; const trimmed = str.trim();
18. 将字符串分隔成数组
const str = 'apple,banana,orange';
const arr = str.split(',');数组操作
19. 创建新数组
const newArray = [];
20. 在数组末尾添加元素
array.push(item);
21. 在数组开头添加元素
array.unshift(item);
22. 删除数组末尾的元素
array.pop();
23. 删除数组开头的元素
array.shift();
24. 获取数组长度
const length = array.length;
25. 遍历数组
array.forEach((item) => {
// 处理每个元素
});26. 创建新数组并遍历原数组
const newArray = array.map((item) => {
// 返回新元素
});27. 过滤数组元素
const filteredArray = array.filter((item) => {
// 返回一个布尔值，true 表示保留该元素，false 表示删除该元素
});28. 查找数组中第一个符合条件的元素
const foundElement = array.find((item) => {
// 返回一个布尔值，true 表示找到该元素，false 表示继续查找
});来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6722