当前位置：首页 > JavaScript

行js实现

2026-02-01 20:54:09JavaScript

行js实现

JavaScript 实现方法

在 JavaScript 中实现功能通常涉及多个步骤。以下是几种常见场景的实现方法：

事件监听与处理

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});

数据获取与处理

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

DOM 操作

const element = document.createElement('div');
element.textContent = 'New element';
document.body.appendChild(element);

定时器使用

setTimeout(() => {
    console.log('This runs after 2 seconds');
}, 2000);

const interval = setInterval(() => {
    console.log('This runs every second');
}, 1000);

// 清除定时器
// clearInterval(interval);

表单验证

document.forms['myForm'].addEventListener('submit', function(event) {
    const input = this.elements['username'];
    if (!input.value) {
        event.preventDefault();
        alert('Username is required');
    }
});

本地存储

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

数组操作

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((total, n) => total + n, 0);

对象操作

const person = {
    name: 'John',
    age: 30
};

// 添加属性
person.job = 'Developer';

// 删除属性
delete person.age;

// 遍历属性
for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}

异步处理

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchData().then(data => console.log(data));

模块化

// module.js
export const PI = 3.14159;
export function calculateArea(radius) {
    return PI * radius * radius;
}

// main.js
import { PI, calculateArea } from './module.js';
console.log(calculateArea(5));

这些示例涵盖了 JavaScript 开发中的常见场景。根据具体需求，可以选择合适的方法进行实现。

标签: js