JavaScript基础

原创于 2025-10-24 17:01:43 发布 · 487 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

JavaScript基础

JavaScript是一种轻量级、解释型的编程语言，主要用于为网页添加交互功能。以下是核心概念：

1. 变量声明

使用var、let或const声明变量：

var name = "张三";    // 函数作用域
let age = 25;        // 块级作用域
const PI = 3.14;     // 不可重新赋值

2. 数据类型

7种基本类型：

typeof 42;           // "number"
typeof "Hello";      // "string"
typeof true;         // "boolean"
typeof undefined;    // "undefined"
typeof null;         // "object" (历史遗留)
typeof Symbol();     // "symbol"
typeof 10n;          // "bigint"

3. 运算符

算术运算符： $+ - * /$
比较运算符： $=====! =! ==><$
逻辑运算符： $KaTeX parse error: Expected 'EOF', got '&' at position 1: &̲& || !$

4. 控制流程

// 条件语句
if (score > 90) {
  console.log("优秀");
} else if (score > 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

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

5. 函数

// 函数声明
function add(a, b) {
  return a + b;
}

// 箭头函数 (ES6)
const multiply = (x, y) => x * y;

6. 对象与数组

// 对象
const person = {
  name: "李四",
  age: 30,
  greet() {
    console.log(`你好，我是${this.name}`);
  }
};

// 数组
const colors = ["红", "绿", "蓝"];
colors.push("黄");  // 添加元素

7. DOM操作

// 获取元素
const btn = document.getElementById("myButton");

// 事件监听
btn.addEventListener("click", () => {
  document.body.style.backgroundColor = "lightblue";
});

8. 异步编程

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

// Async/Await (ES2017)
async function getData() {
  try {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.log(err);
  }
}