JavaScript 基础语法与核心概念实战：从变量到定时器

JavaScript 作为前端开发的核心语言，其基础语法和数据类型是入门的关键。本文将通过实际代码示例，详解 JavaScript 的变量、数据类型、复合类型及常用交互功能，帮助初学者快速掌握核心概念。

一、变量与基本数据类型

变量是存储数据的容器，JavaScript 中通过 var（ES5）、let/const（ES6）声明。基本数据类型是构建复杂程序的基础，包括以下 5 种：

// 基本数据类型示例
var a = 10; // 数字（整数）
var b = "50"; // 字符串（单引号/双引号包裹）
var c = 50.9; // 数字（小数）
var d = true; // 布尔类型（true/false）
var f; // 未赋值变量，默认值为 undefined
var e = null; // 空值（表示"无"的特殊值）

关键说明：

• undefined：变量声明后未赋值时的默认状态（如上述 f），直接使用 alert(f) 会弹出 undefined
• null：需主动赋值，表示 "空引用"，常用来清空变量（与 undefined 的区别：null 是 "有值但为空"，undefined 是 "无值"）
• 数字类型：不区分整数和小数，统一为 Number 类型（如 10、50.9 都是数字）
• 字符串：单引号或双引号包裹的文本，本质是字符序列

二、复合类型：数组与对象

当需要存储多个相关数据时，基本类型就不够用了。复合类型可以组合多种数据（包括基本类型和其他复合类型），最常用的是数组和对象。

1. 数组（Array）：有序集合

数组用 [] 表示，内部元素按顺序排列，可通过索引（从 0 开始）访问，支持任意数据类型（包括函数）。

// 数组定义：包含数字、字符串、布尔、函数等多种类型
var arr = [
  50.8, // 数字
  70, 
  'demo', // 字符串
  true, // 布尔
  undefined,
  null,
  [80, 64.6, "aaa"], // 嵌套数组（数组中的数组）
  function change(a, b) { // 数组中的函数
    console.log(a, b, "数组函数执行啦");
  }
];

// 数组访问方式
console.log(arr[0]); // 访问第1个元素：50.8
console.log(arr[6][2]); // 访问嵌套数组的第3个元素："aaa"（先取arr[6]，再取其[2]）
console.log(arr.length); // 获取数组长度：8（元素个数）

// 执行数组中的函数
arr[7](10, 20); // 调用第8个元素（函数），传入参数10和20

核心特点：

• 有序：元素有固定位置，通过索引（arr[索引]）访问
• 可嵌套：数组内部可以放另一个数组（多维数组）
• 动态：长度可动态变化（可添加 / 删除元素）

2. 对象（Object）：键值对集合

对象用 {} 表示，由键（属性名）和值（属性值） 组成，适合描述 "一个事物的多个特征"（如人有姓名、年龄、爱好等）。

// 对象定义：描述一个人的信息
var obj = {
  name: "zhangsan", // 字符串属性
  age: 20, // 数字属性
  play: ['足球', '乒乓球', '篮球'], // 数组属性
  friend: { // 嵌套对象（对象中的对象）
    name: "lisi",
    age: 21
  },
  jump: function(a, b) { // 函数属性（方法）
    console.log(a, b, "jump函数执行啦");
  }
};

// 对象访问方式
console.log(obj.name); // 访问name属性："zhangsan"
console.log(obj.friend.age); // 访问嵌套对象的age：21（先取obj.friend，再取其age）

// 执行对象中的函数（方法）
obj.jump(1, 2); // 调用jump方法，传入参数1和2

核心特点：

• 无序：元素通过 "键名" 访问（obj.键名 或 obj['键名']），与顺序无关
• 可嵌套：对象内部可以放另一个对象（多层对象）
• 扩展性：可动态添加新属性（如 obj.gender = "男"）

三、函数：可复用的代码块

函数是封装的代码片段，用于实现特定功能，可接收参数、返回结果，是代码复用的核心。

1. 函数的两种定义方式

// 1. 命名函数（有函数名）
var run = function change(a, b) {
  console.log(a, b, "命名函数执行啦");
};

// 2. 匿名函数（无函数名，直接赋值给变量）
var eat = function(a, b) {
  console.log(a, b, "匿名函数执行啦");
};

区别：

• 命名函数：有函数名（如 change），但外部只能通过变量名（run）调用（函数名仅在函数内部有效）
• 匿名函数：无函数名，只能通过变量名（eat）调用

2. 函数的调用

函数定义后不会自动执行，需通过 函数名(参数) 调用：

run(1, 2); // 调用命名函数，传入参数1和2
eat("苹果", "香蕉"); // 调用匿名函数，传入参数"苹果"和"香蕉"

四、交互与定时器：让代码 "动" 起来

JavaScript 不仅能处理数据，还能与用户交互、控制执行时机，常用的有事件响应和定时器。

1. 事件：响应用户操作

事件是用户的行为（如点击、鼠标移动），可通过 on+事件名 绑定处理函数（用户触发事件时执行）。

// 点击页面时触发：改变背景色为随机颜色
document.onclick = function() {
  // 生成0-255的随机整数（RGB颜色范围）
  var r = Math.ceil(Math.random() * 255);
  var g = Math.ceil(Math.random() * 255);
  var b = Math.ceil(Math.random() * 255);
  // 设置页面背景色
  document.body.style.background = `rgb(${r},${g},${b})`;
};

常用事件：

• onclick：点击（单击）
• ondblclick：双击
• onmouseenter：鼠标移入元素
• onmouseleave：鼠标移出元素

2. 定时器：控制代码执行时机

定时器用于延迟或周期性执行代码，有两种常用类型：

（1）周期定时器：重复执行

// 每2秒（2000毫秒）执行一次函数（改变背景色）
var timer = setInterval(function() {
  var r = Math.ceil(Math.random() * 255);
  var g = Math.ceil(Math.random() * 255);
  var b = Math.ceil(Math.random() * 255);
  document.body.style.background = `rgb(${r},${g},${b})`;
}, 2000);

// 停止定时器（需要时调用）
// clearInterval(timer); // 取消周期执行

特点：间隔固定时间重复执行，直到被 clearInterval 停止。

（2）延迟定时器：延迟后执行一次

// 2秒后执行一次（仅执行一次）
var timer = setTimeout(function() {
  console.log("2秒后执行啦");
}, 2000);

// 取消延迟执行（需在执行前调用）
// clearTimeout(timer); // 取消延迟执行

五、总结

本文通过代码示例讲解了 JavaScript 的核心基础：

• 基本类型：存储简单数据（数字、字符串、布尔、undefined、null）
• 复合类型：数组（有序集合）和对象（键值对集合），用于存储复杂数据
• 函数：封装代码，实现复用，可通过参数接收输入
• 交互与定时器：响应用户操作（事件）、控制执行时机（定时器）

这些是 JavaScript 的基础，后续的 DOM 操作、异步编程等都依赖这些概念。建议多动手修改代码（如给数组添加元素、修改对象属性、调整定时器时间），观察运行结果，加深理解。