【js代码大全】在前端开发中，JavaScript 是不可或缺的一部分。无论是实现页面交互、动态加载内容，还是处理用户输入，JavaScript 都扮演着重要角色。对于开发者来说，掌握一些常用的 JS 代码片段，可以大大提高开发效率和代码质量。以下是一些实用的 JavaScript 代码示例，涵盖常用功能和常见问题解决方案。
一、基础语法
1. 变量声明与类型转换
```javascript
let name = "John";
let age = 25;
let isStudent = true;
// 类型转换
let num = parseInt("123");
let str = String(456);
```
2. 条件判断
```javascript
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}
```
3. 循环结构
```javascript
for (let i = 0; i < 5; i++) {
console.log(i);
}
let arr = [1, 2, 3, 4, 5];
arr.forEach(function(item) {
console.log(item);
});
```
二、DOM 操作
1. 获取元素
```javascript
const element = document.getElementById("myDiv");
const elements = document.querySelectorAll(".myClass");
```
2. 修改内容
```javascript
element.innerHTML = "Hello, World!";
element.textContent = "仅显示文本内容";
```
3. 事件监听
```javascript
element.addEventListener("click", function() {
alert("按钮被点击了！");
});
```
三、数组操作
1. 数组遍历
```javascript
const numbers = [1, 2, 3, 4, 5];
numbers.map(num => num 2); // 返回新数组
numbers.filter(num => num > 2); // 过滤出大于2的数
numbers.reduce((sum, num) => sum + num, 0); // 求和
```
2. 数组排序
```javascript
numbers.sort((a, b) => a - b); // 升序
numbers.sort((a, b) => b - a); // 降序
```
3. 数组去重
```javascript
const unique = [...new Set(numbers)];
```
四、对象与函数
1. 对象创建
```javascript
const person = {
name: "Alice",
age: 30,
greet: function() {
console.log(`Hello, I'm ${this.name}`);
}
};
```
2. 函数定义
```javascript
function add(a, b) {
return a + b;
}
const multiply = (a, b) => a b;
```
3. 默认参数
```javascript
function greet(name = "Guest") {
console.log(`Hello, ${name}`);
}
```
五、异步编程
1. Promise 基础
```javascript
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
```
2. async/await
```javascript
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
```
六、常见错误与调试
1. 未定义变量
```javascript
console.log(undefinedVariable); // 报错：undefinedVariable is not defined
```
2. 类型错误
```javascript
let num = "123";
console.log(num + 1); // 输出 "1231" 而不是 124
```
3. 调试方法
```javascript
console.log("调试信息");
console.error("错误信息");
debugger; // 在浏览器中暂停执行
```
七、实用小技巧
1. 快速克隆对象
```javascript
const obj = { a: 1, b: 2 };
const clone = Object.assign({}, obj);
```
2. 随机数生成
```javascript
const randomNum = Math.floor(Math.random() 100);
```
3. 日期格式化
```javascript
const date = new Date();
console.log(date.toLocaleDateString()); // 根据本地格式输出日期
```
结语
JavaScript 是一门灵活且强大的语言，掌握其核心语法和常用技巧，能帮助你更高效地进行开发。本文整理了一些常见的 JS 代码片段，适合初学者复习或进阶者参考。随着技术的不断更新，建议持续学习并关注最新的 ES6+ 特性，提升代码质量和可维护性。
