当前位置：首页 > JavaScript

代码实现js

2026-02-02 09:04:19JavaScript

JavaScript 基础语法

JavaScript 是一种动态类型的脚本语言，常用于网页开发。以下是一个简单的 JavaScript 代码示例，展示了变量声明、函数定义和事件处理：

// 变量声明
let greeting = "Hello, World!";

// 函数定义
function displayGreeting() {
    console.log(greeting);
}

// 调用函数
displayGreeting();

// 事件处理
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

DOM 操作

JavaScript 可以通过 DOM（文档对象模型）操作网页元素。以下代码展示了如何获取元素、修改内容和样式：

// 获取元素
const header = document.querySelector("h1");

// 修改内容
header.textContent = "New Header Text";

// 修改样式
header.style.color = "blue";
header.style.fontSize = "24px";

异步编程

JavaScript 支持异步编程模式，如回调、Promise 和 async/await：

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

// 使用 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();

数组操作

JavaScript 提供了丰富的数组操作方法：

const numbers = [1, 2, 3, 4, 5];

// map 方法
const squared = numbers.map(num => num * num);

// filter 方法
const evens = numbers.filter(num => num % 2 === 0);

// reduce 方法
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(squared); // [1, 4, 9, 16, 25]
console.log(evens);   // [2, 4]
console.log(sum);     // 15

对象操作

JavaScript 中的对象是键值对的集合：

const person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

// 访问属性
console.log(person.name); // "Alice"

// 调用方法
person.greet(); // "Hello, my name is Alice"

// 添加新属性
person.job = "Developer";

// 删除属性
delete person.age;

类与继承

ES6 引入了类的概念：

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(); // "Rex barks."

模块化

现代 JavaScript 支持模块化开发：

// math.js
export function add(a, b) {
    return a + b;
}

export const PI = 3.14159;

// main.js
import { add, PI } from './math.js';

console.log(add(2, 3)); // 5
console.log(PI);        // 3.14159

错误处理

JavaScript 使用 try-catch 语句处理错误：

try {
    // 可能抛出错误的代码
    const result = riskyOperation();
    console.log(result);
} catch (error) {
    // 处理错误
    console.error("An error occurred:", error.message);
} finally {
    // 无论是否发生错误都会执行的代码
    console.log("Operation attempted");
}

定时器

JavaScript 提供了定时执行代码的方法：

代码实现js

// 延时执行
setTimeout(() => {
    console.log("This runs after 2 seconds");
}, 2000);

// 间隔执行
let counter = 0;
const intervalId = setInterval(() => {
    console.log(`Tick ${++counter}`);
    if (counter === 5) {
        clearInterval(intervalId);
    }
}, 1000);