JavaScript 学习笔记

1. 函数

函数定义方式

// 函数声明
function greet(name) {
   
    return "Hello, " + name;
}

// 函数表达式
const add = function(a, b) {
   
    return a + b;
};

// 箭头函数
const multiply = (a, b) => a * b;

// 调用函数示例
console.log(greet("李四"));      // Hello, 李四
console.log(add(5, 3));         // 8
console.log(multiply(4, 6));    // 24

2. 数组操作

let fruits = ["苹果", "香蕉", "橙子"];

// 访问数组元素
console.log(fruits[0]);        // 苹果
console.log(fruits.length);    // 3

// 添加元素
fruits.push("葡萄");           // 末尾添加
fruits.unshift("草莓");        // 开头添加

// 删除元素
fruits.pop();                 // 删除末尾元素
fruits.shift();               // 删除开头元素

// 数组遍历
fruits.forEach(function(fruit, index) {
   
    console.log(index + ": " + fruit);
});

// 数组映射
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(x => x * 2);
console.log(doubled);         // [2, 4, 6, 8]

3. 对象操作

// 创建对象
let person = {
   
    name: "张三",
    age: 25,
    hobbies: ["读书", "游泳"],
    greet: function() {
   
        return "你好，我是" + this.name;
    }
};

// 访问对象属性
console.log(person.name);           // 张三
console.log(person["age"]);         // 25

// 添加/修改属性
person.job = "程序员";
person["city"] = "北京";

// 调用对象方法
console.log(person.greet());        // 你好，我是张三

4. DOM 操作基础

// 获取元素
let element = document.getElementById("myId");
let elements = document.getElementsByClassName("myClass");

// 修改内容
element.innerHTML = "新的HTML内容";
element.textContent = "纯文本内容";

// 修改样式
element.style.color = "blue";
element.style.fontSize = "18px";

// 事件处理
element.addEventListener("click", function() {
   
    alert("元素被点击了！");
});

5. 异步编程概念

// 回调函数示例
function delayedGreeting(name, callback) {
   
    setTimeout(() => {
   
        callback("Hello, " + name);
    }, 1000);
}

delayedGreeting("张三", function(message) {
   
    console.log(message); // 1秒后输出: Hello, 张三
});

// Promise 基础用法
let promise = new Promise((resolve, reject) => {
   
    let success = true;
    if (success) {
   
        resolve("操作成功");
    } else {
   
        reject("操作失败");
    }
});

promise.then(result => {
   
    console.log(result);
}).catch(error => {
   
    console.log(error);
});

6. 常用内置对象和方法

String 方法

let text = "Hello JavaScript";
console.log(text.length);           // 17
console.log(text.toUpperCase());    // HELLO JAVASCRIPT
console.log(text.toLowerCase());    // hello javascript
console.log(text.indexOf("Java"));  // 6
console.log(text.substring(0, 5));  // Hello

Math 对象

console.log(Math.PI);        // 3.141592653589793
console.log(Math.random());  // 0-1之间的随机数
console.log(Math.floor(3.7)); // 3 向下取整
console.log(Math.ceil(3.2));  // 4 向上取整
console.log(Math.round(3.5)); // 4 四舍五入

7. 调试和错误处理

// 控制台输出
console.log("普通信息");
console.warn("警告信息");
console.error("错误信息");

// try-catch 错误处理
try {
   
    let result = someUndefinedFunction();
} catch (error) {
   
    console.log("发生错误: " + error.message);
} finally {
   
    console.log("始终执行的代码");
}