测试文章

JavaScript 基础入门指南

一、JavaScript 简介

JavaScript（简称 JS）是一种运行在浏览器端的脚本语言，主要用于：

• 网页交互效果
• 表单验证
• 动态内容更新
• 游戏开发
• 后端开发（Node.js）

---

二、变量与数据类型

1. 变量声明

// var（旧方式，不推荐）
var name = "张三";

// let（块级作用域，可修改）
let age = 25;

// const（常量，不可修改）
const PI = 3.14159;

2. 基本数据类型

// 字符串
let str = "Hello World";

// 数字
let num = 123;
let float = 3.14;

// 布尔值
let isTrue = true;
let isFalse = false;

// 空值
let empty = null;
let undef = undefined;

// 数组
let arr = [1, 2, 3, "four"];

// 对象
let obj = {
    name: "张三",
    age: 25
};

---

三、运算符

// 算术运算符
let sum = 10 + 5;    // 15
let diff = 10 - 3;   // 7
let product = 4 * 2; // 8
let quotient = 10 / 2; // 5

// 比较运算符
console.log(5 > 3);  // true
console.log(5 === "5"); // false（严格相等）
console.log(5 == "5");  // true（宽松相等）

// 逻辑运算符
console.log(true && false); // false
console.log(true || false); // true
console.log(!true);        // false

---

四、条件语句

// if-else
let score = 85;

if (score >= 90) {
    console.log("优秀");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

// 三元运算符
let result = score >= 60 ? "及格" : "不及格";

// switch
let fruit = "apple";

switch (fruit) {
    case "apple":
        console.log("苹果");
        break;
    case "banana":
        console.log("香蕉");
        break;
    default:
        console.log("未知水果");
}

---

五、循环

1. for 循环

// 普通 for 循环
for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}

// for...of（遍历数组）
let fruits = ["苹果", "香蕉", "橙子"];
for (let fruit of fruits) {
    console.log(fruit);
}

// for...in（遍历对象）
let person = { name: "张三", age: 25 };
for (let key in person) {
    console.log(key + ": " + person[key]);
}

2. while 循环

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

---

六、函数

1. 函数声明

// 普通函数
function greet(name) {
    return "你好，" + name + "！";
}

// 箭头函数
const add = (a, b) => a + b;

// 带默认参数
function say(message = "你好") {
    console.log(message);
}

2. 函数调用

console.log(greet("小明")); // 你好，小明！
console.log(add(3, 5));     // 8
say();                       // 你好

---

七、数组操作

let nums = [1, 2, 3, 4, 5];

// 添加元素
nums.push(6);        // 末尾添加
nums.unshift(0);     // 开头添加

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

// 查找元素
nums.includes(3);    // true
nums.indexOf(3);     // 2

// 遍历
nums.forEach((num, index) => {
    console.log(index + ": " + num);
});

// 映射
let doubled = nums.map(num => num * 2);

// 过滤
let evens = nums.filter(num => num % 2 === 0);

// 累加
let sum = nums.reduce((total, num) => total + num, 0);

---

八、DOM 操作基础

// 获取元素
let title = document.getElementById("title");
let items = document.querySelectorAll(".item");

// 修改内容
title.textContent = "新标题";
title.innerHTML = "<span>HTML内容</span>";

// 修改样式
title.style.color = "red";
title.style.fontSize = "24px";

// 添加事件
title.addEventListener("click", function() {
    alert("点击了！");
});

// 创建元素
let newDiv = document.createElement("div");
newDiv.textContent = "新元素";
document.body.appendChild(newDiv);

---

九、综合示例

// 简易待办事项
const todos = ["学习 JS", "写代码", "喝茶"];

// 渲染列表
function renderTodos() {
    const list = document.getElementById("todo-list");
    list.innerHTML = "";
    
    todos.forEach((todo, index) => {
        const li = document.createElement("li");
        li.textContent = `${index + 1}. ${todo}`;
        list.appendChild(li);
    });
}

// 初始化
renderTodos();

---

总结

主题	关键点
变量	let/const 优先使用
数据类型	字符串、数字、布尔、数组、对象
条件	if-else / switch / 三元运算符
循环	for / while / forEach / map
函数	function / 箭头函数
DOM	获取、修改、事件

---

希望这篇文章对你学习 JavaScript 有所帮助！如有任何问题，欢迎继续提问。