Skip to main content

JavaScript 详解

JavaScript 是网页开发的核心编程语言，广泛应用于前端交互、后端开发、数据处理等场景。本指南将介绍其基础语法、常见函数用法，以及数组操作技巧如 map、filter 等。

🔤 基础语法结构​

// 变量定义
let name = "张三";
const age = 25;

// 函数定义
function greet(person) {
  return "你好，" + person;
}
变量类型与作用域
  • var：有变量提升，函数作用域
  • let：块级作用域，推荐使用
  • const：常量，不可重新赋值

📋 常用数据类型​

let str = "Hello";       // 字符串
let num = 42;            // 数值
let bool = true;         // 布尔
let arr = [1, 2, 3];     // 数组
let obj = { name: "张三" }; // 对象
let func = () => {};     // 函数表达式

🔁 条件与循环结构​

if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

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

while (count > 0) {
  count--;
}

🔧 常用数组方法详解​

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
// [2, 4, 6]

🎯 函数与箭头函数​

function add(a, b) {
  return a + b;
}

const multiply = (x, y) => x * y;
箭头函数特点
  • 没有 this 绑定
  • 不能用作构造函数
  • 适合用在回调函数中

🧩 对象和解构​

const user = {
  name: "张三",
  age: 25,
};

const { name, age } = user;
console.log(name); // 张三
const arr = [1, 2, 3];
const [first, second] = arr;

🧠 异步操作与 Promise​

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("数据加载完成");
    }, 1000);
  });
}

fetchData().then(data => console.log(data));
async function load() {
  const data = await fetchData();
  console.log(data);
}

📦 模块导入与导出​

// utils.js
export const sum = (a, b) => a + b;

// main.js
import { sum } from './utils.js';

✅ 总结​

  • JavaScript 是网页编程的核心语言，支持函数式编程与面向对象
  • 熟练掌握数组操作方法如 map、filter 是开发关键
  • 使用模块化结构（ESM）提升可维护性
  • 推荐使用现代语法（如箭头函数、解构、async/await）

📚 推荐资源​