【JS代码大全】在当今互联网快速发展的时代，JavaScript（简称JS）已经成为前端开发的核心语言。无论是网页交互、动态内容加载，还是构建复杂的单页应用（SPA），JS都扮演着不可或缺的角色。对于开发者来说，掌握丰富的JS代码和技巧，不仅能提升开发效率，还能增强代码的可维护性和性能。
本文将整理一些常见的JS代码片段，涵盖基础语法、DOM操作、事件处理、函数封装、数组与对象操作等，帮助你快速应对日常开发中的各种需求。
一、基础语法篇
1. 变量声明与类型转换
```javascript
let name = "张三";
let age = 25;
let isStudent = true;
// 类型转换
let strAge = String(age);
let numStr = "123";
let num = Number(numStr);
```
2. 条件判断与循环
```javascript
if (age >= 18) {
console.log("成年");
} else {
console.log("未成年");
}
for (let i = 0; i < 5; i++) {
console.log(i);
}
```
二、DOM操作篇
1. 获取元素并修改内容
```javascript
let element = document.getElementById("myDiv");
element.innerHTML = "Hello, JavaScript!";
```
2. 添加/移除类名
```javascript
element.classList.add("active");
element.classList.remove("hidden");
```
3. 事件绑定
```javascript
document.getElementById("btn").addEventListener("click", function() {
alert("按钮被点击了！");
});
```
三、函数与对象篇
1. 函数定义与调用
```javascript
function greet(name) {
return "你好，" + name;
}
console.log(greet("小明"));
```
2. 对象字面量
```javascript
let person = {
name: "李四",
age: 30,
sayHello: function() {
console.log("你好，我是" + this.name);
}
};
person.sayHello();
```
3. 箭头函数
```javascript
let add = (a, b) => a + b;
console.log(add(2, 3)); // 输出 5
```
四、数组与字符串处理
1. 数组遍历
```javascript
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(num) {
console.log(num 2);
});
```
2. 数组方法
```javascript
let filtered = numbers.filter(num => num > 3);
let mapped = numbers.map(num => num 2);
```
3. 字符串拼接与查找
```javascript
let str = "JavaScript 是一门强大的语言";
console.log(str.includes("强大")); // true
console.log(str.startsWith("Java")); // true
```
五、实用技巧与优化建议
- 避免全局变量污染：使用 `let` 和 `const` 替代 `var`。
- 使用模块化开发：通过 `import/export` 管理代码结构。
- 合理使用异步编程：如 `Promise` 和 `async/await` 提升用户体验。
- 代码注释与文档：良好的注释有助于团队协作与后期维护。
结语
JavaScript 的强大之处在于它的灵活性和广泛的应用场景。掌握这些常用代码片段，不仅能够提高开发效率，还能为后续学习更高级的技术打下坚实的基础。希望本文能为你提供一份实用的 JS 代码参考，助你在前端开发的道路上越走越远。
