JavaScript基础

最新推荐文章于 2025-11-02 09:30:00 发布

原创最新推荐文章于 2025-11-02 09:30:00 发布 · 1.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #javascript基础 #javascript入门 #js #html

javascript 专栏收录该内容

47 篇文章

订阅专栏

文章目录

JavaScript基础

JavaScript基础

JavaScript（简称JS）是一门跨平台、面向对象的编程语言，主要用于实现网页交互逻辑，也是现代Web开发的三大核心技术（HTML结构、CSS样式、JS交互）之一。如今，JavaScript不仅能运行在浏览器中，还能通过Node.js运行在服务器端，甚至用于移动应用、桌面应用开发。

本文从“基础语法→核心概念→简单交互”三个维度，带你快速掌握JavaScript的核心基础知识。

一、JavaScript的运行环境与入门

要学习JavaScript，首先需要了解它的运行环境和最基本的执行方式。

1. 运行环境

浏览器：JavaScript最常用的环境，通过<script>标签嵌入HTML中执行。
Node.js：服务器端运行环境，需安装Node.js后通过终端执行JS文件。

2. 第一个JS程序

最简单的方式是在浏览器控制台直接运行代码，或通过HTML文件引入。

方式1：浏览器控制台（推荐新手调试）

打开任意网页，按F12或Ctrl+Shift+I打开开发者工具，切换到“Console”（控制台）面板，直接输入代码并回车执行：
```
console.log("Hello, JavaScript!"); // 输出：Hello, JavaScript!
```

方式2：嵌入HTML文件
创建一个.html文件，通过<script>标签编写JS代码：

<!DOCTYPE html>
<html>
<body>
  <h1>我的第一个JS页面</h1>
  <!-- JS代码写在script标签中 -->
  <script>
    // 向页面输出内容
    document.write("Hello, World!"); 
    // 向控制台输出内容
    console.log("这是控制台信息");
  </script>
</body>
</html>

用浏览器打开该文件，页面会显示“Hello, World!”，控制台（F12打开）会显示“这是控制台信息”。

二、变量与数据类型

变量是存储数据的容器，JavaScript是弱类型语言（变量类型可动态变化），无需提前声明类型。

1. 变量声明

ES6（2015年）后，推荐使用let和const声明变量，替代早期的var（避免作用域问题）。

声明方式	特点	适用场景
`let`	可重新赋值，块级作用域	值可能变化的变量（如计数器、临时变量）
`const`	不可重新赋值（常量），块级作用域	值固定的变量（如配置项、常量）

示例：变量声明与赋值

// 用let声明可修改的变量
let age = 18;
age = 19; // 正确：可以重新赋值
console.log(age); // 输出：19

// 用const声明不可修改的常量
const pi = 3.14;
// pi = 3.1415; // 错误：const变量不能重新赋值

// 声明时可以不立即赋值（let）
let username;
username = "张三";
console.log(username); // 输出：张三

2. 数据类型

JavaScript有7种基本数据类型和1种引用数据类型，核心区别是：基本类型存储“值”，引用类型存储“地址”（指向内存中的对象）。

类型分类	具体类型	说明
基本类型	`String`（字符串）	文本数据，用单引号`'`或双引号`"`包裹（如`'hello'`、`"JS"`）
	`Number`（数字）	整数或浮点数（如`100`、`3.14`），特殊值`NaN`表示“非数字”
	`Boolean`（布尔）	只有`true`（真）和`false`（假）两个值
	`null`	表示“空值”（主动定义的空）
	`undefined`	表示“未定义”（变量声明后未赋值时的默认值）
	`Symbol`	唯一标识符（ES6新增，用于对象属性）
	`BigInt`	超大整数（ES6新增，解决Number精度限制，如`9007199254740993n`）
引用类型	`Object`（对象）	复杂数据集合，包括普通对象、数组、函数等

示例：数据类型使用

// 字符串
let name = "张三";
let message = 'Hello';

// 数字
let score = 95;
let price = 9.9;
let notANumber = NaN; // NaN：非数字（如"abc" - 1的结果）

// 布尔
let isStudent = true;
let hasMoney = false;

// null和undefined
let emptyValue = null; // 主动赋值为空
let unassigned; // 未赋值，默认是undefined

// 对象（引用类型）
let person = { 
  name: "李四", 
  age: 20 
}; // 普通对象
let fruits = ["苹果", "香蕉"]; // 数组（特殊对象）

3. 类型转换

JavaScript会自动进行类型转换（隐式转换），也可手动转换（显式转换）。

隐式转换（运算时自动发生）：

console.log(10 + "20"); // 输出："1020"（数字10转为字符串，拼接）
console.log("20" - 5); // 输出：15（字符串"20"转为数字20，减法）
console.log(!!"hello"); // 输出：true（字符串转为布尔，非空字符串为true）

显式转换（手动控制）：

// 转为字符串：String() 或 toString()
let num = 123;
console.log(String(num)); // "123"
console.log(num.toString()); // "123"

// 转为数字：Number() 或 parseInt()/parseFloat()
let str = "456";
console.log(Number(str)); // 456
console.log(parseInt("78.9")); // 78（取整数）
console.log(parseFloat("78.9")); // 78.9（保留小数）

// 转为布尔：Boolean()
console.log(Boolean(0)); // false（0、""、null、undefined、NaN转为false）
console.log(Boolean(" ")); // true（非空字符串为true）

三、运算符与表达式

运算符用于对数据进行计算或操作，表达式是运算符与数据的组合。

1. 算术运算符

用于基本数学运算：+（加）、-（减）、*（乘）、/（除）、%（取余）、++（自增）、--（自减）。

let a = 10, b = 3;
console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.333...
console.log(a % b); // 1（10除以3的余数）

let c = 5;
c++; // 等价于 c = c + 1
console.log(c); // 6

2. 赋值运算符

用于给变量赋值：=、+=、-=、*=、/=等。

let x = 10;
x += 5; // 等价于 x = x + 5 → x=15
x *= 2; // 等价于 x = x * 2 → x=30
console.log(x); // 30

3. 比较运算符

用于比较两个值，返回布尔值（true/false）：==（相等，忽略类型）、===（全等，严格比较类型和值）、!=（不等）、!==（不全等）、>、<、>=、<=。

console.log(10 == "10"); // true（只比较值，自动转换类型）
console.log(10 === "10"); // false（类型不同，数字vs字符串）
console.log(5 > 3); // true
console.log(7 <= 7); // true

建议：优先使用===和!==，避免隐式类型转换导致的意外结果。

4. 逻辑运算符

用于逻辑判断，返回布尔值或短路结果：&&（与）、||（或）、!（非）。

// &&：两边都为true，结果才为true（短路：左边为false则返回左边）
console.log(true && false); // false
console.log("a" && "b"); // "b"（两边为真，返回最后一个真的值）

// ||：至少一边为true，结果就为true（短路：左边为true则返回左边）
console.log(true || false); // true
console.log("" || "默认值"); // "默认值"（左边为假，返回右边）

// !：取反
console.log(!true); // false
console.log(!0); // true（0是假，取反为真）

5. 三元运算符

简化的条件判断，语法：条件 ? 表达式1 : 表达式2（条件为真返回表达式1，否则返回表达式2）。

let score = 85;
let result = score >= 60 ? "及格" : "不及格";
console.log(result); // "及格"

四、控制流：条件语句与循环

控制流用于控制代码的执行顺序，包括“条件判断”和“循环重复”。

1. 条件语句

根据条件执行不同代码块，常用if-else和switch。

if-else语句（适合范围判断）：

let age = 17;

if (age >= 18) {
  console.log("已成年");
} else if (age >= 13) { // 可选：多个条件判断
  console.log("青少年");
} else {
  console.log("儿童");
}
// 输出：青少年

switch语句（适合固定值匹配）：

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "周一";
    break; // 跳出switch
  case 2:
    dayName = "周二";
    break;
  case 3:
    dayName = "周三";
    break;
  default: // 所有case不匹配时执行
    dayName = "未知";
}
console.log(dayName); // "周三"

2. 循环语句

重复执行代码块，常用for、while、do-while。

for循环（已知循环次数时使用）：
语法：for (初始化; 条件; 更新) { 循环体 }

// 打印1到5
for (let i = 1; i <= 5; i++) {
  console.log(i); // 依次输出1、2、3、4、5
}

// 遍历数组
let fruits = ["苹果", "香蕉", "橙子"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]); // 依次输出每个水果
}

while循环（未知循环次数，满足条件时执行）：
语法：while (条件) { 循环体 }

let count = 1;
// 打印1到3
while (count <= 3) {
  console.log(count); // 1、2、3
  count++; // 必须更新条件，否则无限循环
}

do-while循环（至少执行一次，再判断条件）：

let num = 5;
do {
  console.log(num); // 先执行一次：5
  num++;
} while (num < 5); // 条件不满足，循环结束

3. 循环控制

break：立即跳出循环；
continue：跳过当前循环，进入下一次。

// break：找到3就停止
for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    break;
  }
  console.log(i); // 1、2
}

// continue：跳过3
for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }
  console.log(i); // 1、2、4、5
}

五、函数：代码复用的核心

函数是可重复使用的代码块，用于封装逻辑，提高代码复用性。

1. 函数的声明与调用

声明方式：

函数声明：function 函数名(参数) { 函数体 }
函数表达式：const 函数名 = function(参数) { 函数体 }（ES6前）
箭头函数（ES6）：const 函数名 = (参数) => { 函数体 }

示例：函数声明与调用

// 1. 函数声明：计算两数之和
function add(a, b) {
  return a + b; // return返回结果（无return则返回undefined）
}
// 调用函数
let sum = add(3, 5);
console.log(sum); // 8

// 2. 函数表达式：打印问候语
const greet = function(name) {
  console.log(`你好，${name}！`);
};
greet("张三"); // 输出：你好，张三！

// 3. 箭头函数：计算平方（简化语法）
const square = (x) => {
  return x * x;
};
// 简化：只有一行return时可省略{}和return
const squareShort = x => x * x; 
console.log(squareShort(4)); // 16

2. 函数参数

形参：函数声明时的参数（如add(a, b)中的a、b）；
实参：调用函数时传入的参数（如add(3, 5)中的3、5）；
默认参数：参数未传入时使用的默认值（ES6新增）；
剩余参数：接收多个参数为数组（用...表示，ES6新增）。

示例：参数高级用法

// 默认参数：如果未传age，默认值为18
function introduce(name, age = 18) {
  console.log(`我叫${name}，今年${age}岁`);
}
introduce("李四"); // 我叫李四，今年18岁
introduce("王五", 20); // 我叫王五，今年20岁

// 剩余参数：接收任意数量的参数，转为数组
function sumAll(...nums) {
  let total = 0;
  for (let num of nums) {
    total += num;
  }
  return total;
}
console.log(sumAll(1, 2, 3)); // 6
console.log(sumAll(10, 20, 30, 40)); // 100

六、对象：复杂数据的载体

对象是键值对的集合，用于存储多个相关数据（属性）和功能（方法），是JavaScript中最核心的数据结构之一。

1. 对象的创建与访问

创建对象（常用字面量方式）：

// 字面量创建对象（键值对用逗号分隔）
const person = {
  name: "张三", // 属性：键（name）+ 值（"张三"）
  age: 20,
  isStudent: true,
  // 方法：函数作为值
  sayHello: function() {
    console.log(`你好，我是${this.name}`); // this指向当前对象
  }
};

访问对象属性/方法：

点语法：对象.键
方括号语法：对象["键"]（适合键名含特殊字符或变量时）

// 访问属性
console.log(person.name); // "张三"
console.log(person["age"]); // 20

// 调用方法
person.sayHello(); // 输出：你好，我是张三

// 修改属性值
person.age = 21;
console.log(person.age); // 21

// 添加新属性
person.gender = "男";
console.log(person.gender); // "男"

// 删除属性
delete person.isStudent;
console.log(person.isStudent); // undefined

2. 对象的遍历

用for...in循环遍历对象的所有键：

const car = {
  brand: "特斯拉",
  price: 300000,
  color: "白色"
};

// 遍历所有键
for (let key in car) {
  console.log(`${key}: ${car[key]}`); 
  // 输出：brand: 特斯拉；price: 300000；color: 白色
}

七、数组：有序数据的集合

数组是有序的元素集合（可包含任意类型数据），通过索引（从0开始）访问，提供了丰富的方法用于操作数据。

1. 数组的创建与访问

// 创建数组（字面量方式最常用）
const numbers = [1, 2, 3, 4, 5]; // 数字数组
const mixed = [1, "hello", true, { name: "张三" }]; // 混合类型数组

// 访问元素（索引从0开始）
console.log(numbers[0]); // 1（第一个元素）
console.log(numbers[2]); // 3（第三个元素）

// 修改元素
numbers[1] = 20;
console.log(numbers); // [1, 20, 3, 4, 5]

// 数组长度（length属性）
console.log(numbers.length); // 5

2. 常用数组方法

数组提供了大量内置方法，简化数据操作（以下为最常用的几个）：

方法	作用	示例
`push()`	在数组末尾添加元素，返回新长度	`numbers.push(6);` → `[1,20,3,4,5,6]`
`pop()`	删除并返回数组最后一个元素	`numbers.pop();` → 返回6，数组变为`[1,20,3,4,5]`
`shift()`	删除并返回数组第一个元素	`numbers.shift();` → 返回1，数组变为`[20,3,4,5]`
`unshift()`	在数组开头添加元素，返回新长度	`numbers.unshift(0);` → `[0,20,3,4,5]`
`slice(start, end)`	截取数组（不修改原数组），返回子数组	`numbers.slice(1,3);` → `[20,3]`
`splice(index, count)`	从index开始删除count个元素（修改原数组）	`numbers.splice(1,2);` → 删除20、3，数组变为`[0,4,5]`
`forEach()`	遍历数组，执行回调函数	`numbers.forEach(item => console.log(item));`
`map()`	遍历数组，返回新数组（每个元素经处理后）	`numbers.map(item => item * 2);` → `[0,8,10]`

示例：数组方法实战

const fruits = ["苹果", "香蕉", "橙子"];

// 添加元素到末尾
fruits.push("葡萄");
console.log(fruits); // ["苹果", "香蕉", "橙子", "葡萄"]

// 遍历数组并打印
fruits.forEach((fruit, index) => {
  console.log(`第${index+1}个水果：${fruit}`);
});

// 生成新数组：每个水果名加"很好吃"
const deliciousFruits = fruits.map(fruit => `${fruit}很好吃`);
console.log(deliciousFruits); 
// ["苹果很好吃", "香蕉很好吃", "橙子很好吃", "葡萄很好吃"]

八、事件：JS与HTML的交互桥梁

事件是用户操作或浏览器行为的触发点（如点击、输入、页面加载），JavaScript通过“事件监听”响应用户行为，实现交互效果。

1. 事件绑定方式

最常用的是通过addEventListener绑定事件（推荐，可绑定多个事件处理函数）。

示例：点击按钮弹出提示

<button id="myBtn">点击我</button>

<script>
  // 获取按钮元素
  const btn = document.getElementById("myBtn");

  // 绑定点击事件（click）
  btn.addEventListener("click", function() {
    alert("按钮被点击了！"); // 弹出提示框
  });

  // 再绑定一个点击事件（可多个）
  btn.addEventListener("click", function() {
    console.log("按钮点击事件触发");
  });
</script>

2. 常用事件类型

事件类型	触发时机
`click`	点击元素
`dblclick`	双击元素
`mouseover`	鼠标移到元素上
`mouseout`	鼠标移出元素
`input`	输入框内容变化时
`submit`	表单提交时
`load`	页面或图片加载完成时

示例：输入框实时显示内容

<input type="text" id="myInput" placeholder="输入内容...">
<p id="output"></p>

<script>
  const input = document.getElementById("myInput");
  const output = document.getElementById("output");

  // 绑定input事件（内容变化时触发）
  input.addEventListener("input", function() {
    // this.value获取输入框当前值
    output.textContent = `你输入了：${this.value}`;
  });
</script>

九、DOM操作：JS控制网页元素

DOM（文档对象模型）是网页元素的树形结构表示，JavaScript通过DOM API操作网页元素（如修改内容、样式、结构）。

1. 获取DOM元素

常用方法：

getElementById(id)：通过ID获取元素（唯一）；
getElementsByClassName(class)：通过类名获取元素集合；
getElementsByTagName(tag)：通过标签名获取元素集合；
querySelector(selector)：通过CSS选择器获取第一个匹配元素；
querySelectorAll(selector)：通过CSS选择器获取所有匹配元素。

示例：获取元素

<div id="box" class="container">这是一个盒子</div>
<p class="text">段落1</p>
<p class="text">段落2</p>

<script>
  // 通过ID获取
  const box = document.getElementById("box");
  console.log(box); // <div id="box" class="container">...</div>

  // 通过类名获取（返回集合）
  const texts = document.getElementsByClassName("text");
  console.log(texts[0]); // 第一个p标签

  // 通过CSS选择器获取
  const firstText = document.querySelector(".text"); // 第一个.text元素
  const allPs = document.querySelectorAll("p"); // 所有p标签
</script>

2. 修改元素内容与样式

修改内容：textContent（纯文本）、innerHTML（可解析HTML）；
修改样式：style属性（驼峰命名，如style.backgroundColor）。

示例：动态修改元素

<p id="demo">原始文本</p>
<div id="styleBox" style="width: 100px; height: 100px;">样式盒子</div>

<script>
  const demo = document.getElementById("demo");
  // 修改文本内容
  demo.textContent = "修改后的文本";

  const styleBox = document.getElementById("styleBox");
  // 修改样式（驼峰命名：background-color → backgroundColor）
  styleBox.style.backgroundColor = "lightblue";
  styleBox.style.border = "2px solid blue";

  // 用innerHTML添加HTML内容
  demo.innerHTML = "<strong>加粗文本</strong>"; // 显示为“加粗文本”
</script>