JavaScript 作为网页交互的核心语言，其基础语法是入门前端开发的必备知识。本文将系统梳理 JS 核心基础语法。

一、变量与数据类型

JavaScript 是弱类型语言，变量类型可动态变化，通过 let、const、var 声明（推荐优先使用 let 和 const）。

基本数据类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）、未定义（Undefined）、符号（Symbol）
引用数据类型：对象（Object）、数组（Array）、函数（Function）

// 变量声明示例
let userName = "张三"; // 字符串
const age = 25; // 数字（const 声明常量，不可修改）
let isStudent = false; // 布尔值
let emptyValue = null; // 空值
let undef; // 未定义（默认值）
const uniqueKey = Symbol("id"); // 唯一标识符

// 类型检测
console.log(typeof userName); // "string"
console.log(typeof age); // "number"
console.log(emptyValue === null); // true（typeof null 会返回"object"，需特殊判断）

二、函数定义与调用

函数是 JS 的核心模块单元，可通过函数声明、函数表达式、箭头函数等方式定义。

1. 基本定义与调用

// 1. 函数声明
function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 输出：5

// 2. 函数表达式
const multiply = function(a, b) {
  return a * b;
};
console.log(multiply(2, 3)); // 输出：6

// 3. 箭头函数（简洁语法，无this绑定）
const subtract = (a, b) => a - b;
console.log(subtract(5, 2)); // 输出：3

2. 自执行函数实现装饰器

自执行函数（IIFE）可立即执行，常用来实现简单装饰器（增强函数功能）：

// 自执行函数作为装饰器，给原函数添加日志功能
const withLog = (fn) => {
  return function(...args) {
    console.log(`调用函数：${fn.name}，参数：${args}`);
    const result = fn(...args);
    console.log(`返回结果：${result}`);
    return result;
  };
};

// 原函数
function sum(a, b) {
  return a + b;
}

// 使用装饰器增强函数
const sumWithLog = withLog(sum);
sumWithLog(3, 4); 
// 输出：
// 调用函数：sum，参数：3,4
// 返回结果：7

三、判断语句

JS 提供多种条件判断方式，满足不同场景需求。

1. 比较运算符

const num1 = 5;
const num2 = "5";

console.log(num1 == num2); // true（== 会自动转换类型）
console.log(num1 === num2); // false（=== 严格比较类型和值）
console.log(num1 !== num2); // true（不全等于）

2. 三目运算

简洁的二选一判断：

const score = 85;
const result = score >= 60 ? "及格" : "不及格";
console.log(result); // 输出：及格

3. 逻辑运算符

const hasMoney = true;
const hasTime = false;

// &&（与：全为true才返回true）
console.log(hasMoney && hasTime); // false

// ||（或：有一个true就返回true）
console.log(hasMoney || hasTime); // true

// !（非：取反）
console.log(!hasMoney); // false

4. switch case

多条件匹配：

const day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "周一";
    break;
  case 2:
    dayName = "周二";
    break;
  case 3:
    dayName = "周三";
    break;
  default:
    dayName = "未知";
}
console.log(dayName); // 输出：周三

四、数组

数组是有序集合，用于存储多个数据，支持丰富的操作方法。

1. 创建方式

// 1. 字面量创建（推荐）
const fruits = ["苹果", "香蕉", "橙子"];

// 2. 实例化对象
const numbers = new Array(1, 2, 3, 4);

console.log(fruits[0]); // 输出：苹果（通过下标访问，从0开始）
console.log(numbers.length); // 输出：4（获取长度）

2. 常用操作方法

const arr = [10, 20, 30];

// 从尾部添加/删除
arr.push(40); // 添加元素到末尾，返回新长度：4 → arr变为[10,20,30,40]
arr.pop(); // 删除最后一个元素，返回删除值：40 → arr变为[10,20,30]

// splice：添加/删除/替换元素（核心方法）
// 语法：splice(起始索引, 删除数量, 新增元素1, 新增元素2...)
arr.splice(1, 1); // 从索引1开始，删除1个元素 → arr变为[10,30]
arr.splice(1, 0, 25, 28); // 从索引1开始，删除0个元素，插入25和28 → arr变为[10,25,28,30]

console.log(arr); // 输出：[10, 25, 28, 30]

五、循环语句

用于重复执行代码块，常见有 for、while、for...of 等。

// 1. for循环
const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 依次输出：1、2、3
}

// 2. while循环
let count = 0;
while (count < 3) {
  console.log("计数：" + count);
  count++; // 输出：计数：0、计数：1、计数：2
}

// 3. for...of（遍历数组元素，更简洁）
for (const item of arr) {
  console.log(item); // 依次输出：1、2、3
}

六、格式化字符串

使用反引号（`）和 ${} 包裹变量，实现字符串拼接：

const name = "李四";
const age = 30;

// 传统拼接（繁琐）
const str1 = "姓名：" + name + "，年龄：" + age;

// 模板字符串（简洁）
const str2 = `姓名：${name}，年龄：${age}`;
const str3 = `计算结果：${10 + 20}`; // 支持表达式

console.log(str2); // 输出：姓名：李四，年龄：30
console.log(str3); // 输出：计算结果：30

七、对象

对象是键值对集合，用于描述复杂数据（如用户信息、商品属性）。

// 创建对象
const user = {
  name: "王五",
  age: 28,
  isAdmin: false,
  hobbies: ["读书", "跑步"],
  sayHello: function() { // 对象方法
    console.log(`你好，我是${this.name}`);
  }
};

// 访问属性
console.log(user.name); // 输出：王五
console.log(user["age"]); // 输出：28（另一种访问方式）

// 调用方法
user.sayHello(); // 输出：你好，我是王五

// 修改属性
user.age = 29;
console.log(user.age); // 输出：29

八、定时器

用于延迟或周期性执行代码，核心API有 setTimeout、setInterval 及关闭方法。

// 1. setTimeout：延迟执行一次
const timer1 = setTimeout(() => {
  console.log("2秒后执行");
}, 2000); // 2000毫秒=2秒

// 2. setInterval：周期性执行（每隔1秒）
const timer2 = setInterval(() => {
  console.log("每隔1秒执行一次");
}, 1000);

// 关闭定时器（通常在某个条件下执行）
setTimeout(() => {
  clearTimeout(timer1); // 关闭延迟定时器
  clearInterval(timer2); // 关闭周期定时器
  console.log("定时器已关闭");
}, 5000); // 5秒后关闭所有定时器

九、异步编程

JS 是单线程语言，通过异步编程处理耗时操作（如网络请求），核心方案有 Promise 和 async/await。

1. Promise 基础

// 创建Promise
const fetchData = new Promise((resolve, reject) => {
  // 模拟异步操作（如接口请求）
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("获取数据成功：{name: '测试数据'}"); // 成功状态
    } else {
      reject("获取数据失败"); // 失败状态
    }
  }, 1000);
});

// 使用Promise
fetchData
  .then(data => {
    console.log(data); // 成功时执行
  })
  .catch(error => {
    console.error(error); // 失败时执行
  });

2. async/await（Promise的语法糖）

// 定义异步函数
async function getData() {
  try {
    const result = await fetchData; // 等待Promise完成
    console.log("async/await获取结果：", result);
  } catch (error) {
    console.error("async/await错误：", error);
  }
}

// 调用异步函数
getData();

十、JSON 处理

JSON 是数据交换的标准格式，JS 提供内置方法转换 JSON 与字符串。

// 1. JSON字符串 → JS对象
const jsonStr = '{"name":"赵六","age":22,"hobbies":["游泳","篮球"]}';
const jsonObj = JSON.parse(jsonStr); // 解析
console.log(jsonObj.name); // 输出：赵六

// 2. JS对象 → JSON字符串
const newJsonStr = JSON.stringify(jsonObj); // 序列化
console.log(newJsonStr); // 输出：{"name":"赵六","age":22,"hobbies":["游泳","篮球"]}

十一、浏览器 Window 对象

Window 是浏览器全局对象，包含多个核心属性，用于操作页面和浏览器。

// 1. document：操作HTML元素
const title = document.title; // 获取页面标题
document.title = "新标题"; // 修改页面标题

// 2. location：操作URL
console.log(location.href); // 获取当前页面URL
// location.href = "https://www.baidu.com"; // 跳转到新页面

// 3. navigator：获取浏览器信息
console.log(navigator.userAgent); // 浏览器标识字符串

// 4. history：操作历史记录
// history.back(); // 后退到上一页
// history.forward(); // 前进到下一页

// 5. screen：屏幕信息
console.log(`屏幕宽度：${screen.width}px`);

总结

JavaScript 基础语法是构建复杂应用的基石，本文涵盖了变量、函数、数组、对象、异步等核心知识点，并通过代码示例直观展示其用法。掌握这些内容后，你可以开始编写简单的交互逻辑，为深入学习 DOM 操作、框架开发（如 React、Vue）打下基础。实践是巩固知识的最佳方式，建议多写多练，逐步积累经验。