js 怎么实现
在 JavaScript 中实现功能通常涉及多种方法，具体取决于需求。以下是几种常见场景的实现方式：
基础语法示例
变量声明和函数定义：
const message = 'Hello World';
function greet(name) {
return `${message}, ${name}!`;
}
console.log(greet('Alice'));DOM 操作
动态修改页面内容：
document.getElementById('demo').innerHTML = 'New Content';
const button = document.querySelector('button');
button.addEventListener('click', () => {
alert('Button clicked');
});异步处理
使用 Promise 和 async/await：
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:', error);
}
}
fetchData();面向对象编程
类与继承的实现：
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog('Rex');
dog.speak();模块化开发
ES6 模块的导入导出：
// math.js
export const add = (a, b) => a + b;
export const PI = 3.14159;
// app.js
import { add, PI } from './math.js';
console.log(add(2, 3));数组操作
常用数组方法示例：
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(x => x * 2);
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
const filtered = numbers.filter(x => x > 2);事件处理
事件委托模式：
document.querySelector('ul').addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
console.log('List item clicked:', e.target.textContent);
}
});闭包应用
创建私有变量：
function createCounter() {
let count = 0;
return {
increment: () => ++count,
getCount: () => count
};
}
const counter = createCounter();
counter.increment();
console.log(counter.getCount());正则表达式
字符串匹配与替换：
const text = 'The quick brown fox';
const regex = /quick/;
console.log(regex.test(text));
const newText = text.replace(/brown/, 'red');
console.log(newText);本地存储
使用 localStorage：
localStorage.setItem('username', 'JohnDoe');
const user = localStorage.getItem('username');
console.log(user);
localStorage.removeItem('username');每种实现方式都需要根据具体需求选择最合适的方案，现代 JavaScript 开发通常会结合多种技术共同实现复杂功能。
