JavaScript 基础知识点总结

前言

JavaScript 作为前端开发的核心编程语言，自 1995 年诞生以来，从最初仅用于页面简单交互的脚本语言，逐步发展为覆盖前端、后端（Node.js）、移动端、桌面端的全栈式语言。它是实现网页动态交互的基础 —— 无论是页面的表单验证、动态内容渲染、样式实时修改，还是复杂的前端框架（React、Vue、Angular）底层逻辑，都离不开 JavaScript 的支撑。如今，JavaScript 已成为 Web 生态中不可或缺的一部分，掌握其核心语法与常用方法，是入门前端开发、实现各类交互需求的必经之路。本文系统梳理 JavaScript 从基础语法到实战应用的核心知识点，结合可复用的代码示例，帮助初学者夯实基础，理解并灵活运用这门语言解决实际开发问题。

---

一、基础核心语法（入门级）

1. 变量相关

1. 变量声明与赋值：涵盖 var、let、const 三种声明方式的区别，var 存在变量提升、函数级作用域，let/const 为块级作用域，const 声明只读常量（引用类型值可修改）。

// 变量定义示例
var a = 10; // 全局/函数作用域，可重复声明
let b = 20; // 块级作用域，不可重复声明
const c = 30; // 块级作用域，不可重新赋值
const obj = {name:"js"}; obj.name = "javascript"; // 引用类型 const 变量值可修改

2. 变量作用域：全局作用域（在函数外声明，整个页面可访问）、局部作用域（函数内声明，仅函数内访问）、块级作用域（let/const 在 {} 内声明，仅块内访问）。

// 变量作用域示例
let globalVar = "全局变量";
function testScope(){
  let localVar = "局部变量";
  if(true){
    let blockVar = "块级变量";
    console.log(localVar); // 可访问
  }
  console.log(blockVar); // 报错，块级变量外部不可访问
}
console.log(globalVar); // 可访问
console.log(localVar); // 报错，局部变量外部不可访问

2. 数据类型

1. 原始类型：字符串（String）、数字（Number）、布尔（Boolean）、undefined、null、Symbol（ES6）、BigInt（ES6），原始类型值不可变。

let str = "hello";
let num = 123;
let bool = true;
let und = undefined;
let nul = null;

2. 引用类型：对象（Object）、数组（Array）、函数（Function）等，引用类型值存在堆内存，变量存储的是地址。

// 基本类型 vs 引用类型示例
let num1 = 10;
let num2 = num1; num2 = 20;
console.log(num1); // 10，基本类型值独立

let arr1 = [1,2];
let arr2 = arr1; arr2.push(3);
console.log(arr1); // [1,2,3]，引用类型共享地址

3. 类型转换：隐式转换（如 1 + '2' 得到 '12'）、显式转换（Number()、String()、Boolean()）。

// 类型转换示例
let strNum = "123";
let num = Number(strNum); // 显式转换为数字
let bool = Boolean(0); // false，0 转为布尔为 false
console.log(1+"2"); // "12"，隐式转换

3. 运算符与基本运算

1. 算术运算符：+（加 / 拼接）、-（减）、*（乘）、/（除）、%（取模）、++（自增）、–（自减）。

// 基本数学运算示例
let sum = 10+20; // 30
let mod = 7%3; // 1
let n = 5; n++; // 6
let m = 8; --m; // 7

2. 赋值运算符：=、+=、-=、*=、/= 等。

let x = 5; x +=3; // 等价于 x = x + 3，结果 8

3. 比较运算符：==（值相等）、===（值 + 类型相等）、!=、!==、>、<、>=、<=。

console.log(10=="10"); // true，隐式类型转换后相等
console.log(10==="10"); // false，类型不同

4. 逻辑运算符：&&（与）、||（或）、!（非）。

let a = true, b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

---

二、流程控制（基础）

1. 分支判断

1. if/else if/else：根据条件执行不同代码块，支持嵌套。

// 分支判断示例
let score = 85;
if(score >= 90){
  console.log("优秀");
}else if(score >= 80){
  console.log("良好");
}else{
  console.log("及格/不及格");
}

2. switch-case：多分支匹配，基于值的全等比较，break 终止分支，default 处理未匹配情况。

// switch 示例
let day = 3;
switch(day){
case 1: console.log("周一"); break;
case 2: console.log("周二"); break;
default: console.log("其他日期");
}

2. 循环结构

1. for 循环：指定次数循环，适用于已知循环次数的场景（如遍历数组）。

// 循环示例 - 遍历数组
let arr = [10,20,30];
for(let i = 0; i < arr.length; i++){
  console.log(arr[i]); // 依次输出 10、20、30
}

2. while 循环：先判断条件，满足则执行循环体，需避免无限循环。

let count = 0;
while(count < 3){
  console.log(count); // 0、1、2
  count++; // 必须更新条件变量
}

3. do-while 循环：先执行一次循环体，再判断条件，至少执行一次。

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

4. 循环控制：break 终止整个循环，continue 跳过当前次循环。

for(let i = 0; i < 5; i++){
  if(i === 2) continue; // 跳过 i=2 的循环
  if(i === 4) break; // 终止 i=4 时的循环
  console.log(i); // 0、1、3
}

---

三、内置对象与方法

1. Math 对象

1. 核心方法：Math.random()（生成 0-1 随机数）、Math.floor()（向下取整）、Math.ceil()（向上取整）、Math.round()（四舍五入）、Math.max()/Math.min()（取最大 / 最小值）、Math.pow()（幂运算）等。

// Math 对象示例
let randomNum = Math.random(); // 0-1 随机数
let random100 = Math.floor(Math.random()*100); // 0-99 随机整数
let maxNum = Math.max(10,20,30); // 30
let powNum = Math.pow(2,3); // 8，2 的 3 次方

2. 随机数专项：生成指定范围随机数（如 1-100）。

// 随机数示例 - 生成 1-100 随机整数
function getRandom(min, max){
  return Math.floor(Math.random()*(max - min +1))+ min;
}
console.log(getRandom(1,100));

2. Date 日期对象

1. 日期创建：new Date()（当前时间）、new Date(2024, 5, 1)（指定时间，月份从 0 开始）、new Date('2024-06-01')。
2. 核心方法：getFullYear()（年）、getMonth()（月）、getDate()（日）、getHours()（时）、getMinutes()（分）、getSeconds()（秒）、getTime()（时间戳）。

// 日期对象示例
let now = new Date();
let year = now.getFullYear(); // 当前年份
let month = now.getMonth()+1; // 当前月份（+1 修正 0 开始）
let day = now.getDate(); // 当前日期
let timestamp = now.getTime(); // 时间戳（毫秒）

3. 字符串操作

1. 基本操作：拼接（+/concat()）、长度（length）、索引访问（str[0]）。

// 字符串基本操作示例
let str1 = "hello";
let str2 = "world";
let str3 = str1 + " " + str2; // "hello world"
let len = str1.length; // 5
let firstChar = str1[0]; // "h"

2. 核心方法：charAt()（取指定索引字符）、indexOf()/lastIndexOf()（查找字符 / 子串位置）、slice()/substring()（截取）、replace()（替换）、split()（分割为数组）、toUpperCase()/toLowerCase()（大小写转换）、trim()（去首尾空格）。

// 字符串方法示例
let str = " JavaScript ";
let trimStr = str.trim(); // "JavaScript"
let upperStr = trimStr.toUpperCase(); // "JAVASCRIPT"
let splitArr = trimStr.split(""); // ["J","a","v","a","S","c","r","i","p","t"]
let replaceStr = trimStr.replace("Java","Type"); // "TypeScript"

4. 数组操作

1. 基础操作：长度（length）、索引访问 / 修改（arr[0] = 10）。
2. 增删改查方法：push()（末尾加）、pop()（末尾删）、unshift()（开头加）、shift()（开头删）、splice()（指定位置增删改）。

// 数组增删改示例
let arr = [1,2,3];
arr.push(4); // [1,2,3,4]
arr.pop(); // [1,2,3]
arr.unshift(0); // [0,1,2,3]
arr.shift(); // [1,2,3]
arr.splice(1,1,5); // 从索引 1 删 1 个，加 5，结果 [1,5,3]

3. 遍历 / 处理方法：forEach()（遍历）、map()（映射新数组）、filter()（筛选）、reduce()（聚合）、find()（查找元素）、some()/every()（判断是否存在 / 全部满足条件）。

// 数组内置方法示例
let nums = [1,2,3,4];
// forEach 遍历
nums.forEach((item, index)=>{
  console.log(`索引${index}：${item}`);
});
// map 生成新数组（每个数*2）
let doubleNums = nums.map(item=> item *2); // [2,4,6,8]
// filter 筛选偶数
let evenNums = nums.filter(item=> item %2===0); // [2,4]
// reduce 求和
let sum = nums.reduce((prev, curr)=> prev + curr,0); // 10

5. 对象

1. 对象创建：字面量方式（{}）、构造函数方式（new Object()）。
2. 属性 / 方法操作：访问（obj.name/obj['name']）、修改（obj.name = 'new'）、新增（obj.age = 18）、删除（delete obj.age）。
3. 对象遍历：for…in 循环遍历可枚举属性。

// 对象示例
let person = {
  name:"张三",
  age:20,
  sayHi:function(){
    console.log(`你好，我是${this.name}`);
  }
};
console.log(person.name); // 张三
person.age = 21; // 修改属性
person.gender = "男"; // 新增属性
delete person.gender; // 删除属性
person.sayHi(); // 调用方法：你好，我是张三
// 遍历对象
for(let key in person){
  console.log(`${key}：${person[key]}`);
}

---

四、函数与页面交互

1. 函数

1. 函数声明与调用：声明式（function fn() {}）、表达式（let fn = function() {}）、箭头函数（let fn = () => {}）。

// 函数示例
// 声明式
function add(a, b){
  return a + b;
}
// 表达式
let sub = function(a, b){
  return a - b;
};
// 箭头函数
let mul = (a, b)=> a * b;
console.log(add(1,2)); // 3
console.log(sub(5,3)); // 2
console.log(mul(2,4)); // 8

2. 参数：形参 / 实参、默认参数（function fn(a=10) {}）、剩余参数（function fn(…args) {}）。

// 函数参数示例
function fn(a, b =5){ // 默认参数
  console.log(a + b);
}
fn(3); // 8（b 使用默认值 5）

function sumAll(...args){ // 剩余参数
  return args.reduce((prev, curr)=> prev + curr,0);
}
console.log(sumAll(1,2,3)); // 6

3. 作用域与闭包：函数作用域内变量外部不可访问；闭包（函数嵌套，内层函数访问外层函数变量）。

// 闭包示例
function outer(){
  let num = 10;
  return function inner(){
    console.log(num); // 访问外层变量，形成闭包
  };
}
let fn = outer();
fn(); // 10

2. 页面交互（DOM）

1. 元素获取：getElementById()（通过 ID）、getElementsByClassName()（通过类名）、getElementsByTagName()（通过标签名）、querySelector()/querySelectorAll()（通过选择器）。
2. 样式修改：element.style.属性 = 值（行内样式）、element.className/element.classList（类名操作）。
3. 事件绑定：addEventListener() 绑定点击、输入、鼠标等事件。
4. 元素操作：创建（createElement()）、插入（appendChild()/insertBefore()）、删除（removeChild()）。

// 页面交互示例
// 获取元素
let btn = document.getElementById("btn");
let list = document.querySelector(".list");
let items = document.querySelectorAll(".list li");

// 绑定点击事件
btn.addEventListener("click", function(){
  // 创建新元素
  let li = document.createElement("li");
  li.textContent = "新列表项";
  // 修改样式
  li.style.color = "red";
  li.classList.add("active"); // 添加类名
  // 插入元素
  list.appendChild(li);
});

// 删除元素
list.removeChild(items[0]); // 删除第一个列表项

---

总结

本文从入门到实战，逐层拆解了 JavaScript 的核心知识点：

1. 基础核心语法：覆盖变量声明（var/let/const）、数据类型（原始类型与引用类型）、各类运算符的使用规则，这是编写 JavaScript 代码的底层基础，决定了数据的存储、运算与类型处理逻辑；
2. 流程控制：讲解 if/switch 分支判断、for/while/do-while 循环结构及循环控制关键字，解决了代码'按需执行'和'重复执行'的核心需求，是实现业务逻辑分支与批量处理的关键；
3. 内置对象与方法：详细介绍 Math、Date、字符串、数组、对象等常用内置对象的核心方法，这些内置能力是处理数学计算、时间操作、数据格式化与批量处理的高效工具，避免重复造轮子；
4. 函数与页面交互：涵盖函数的声明、参数处理、闭包特性，以及 DOM 操作的核心方法，函数实现了代码的复用与逻辑封装，DOM 操作则打通了 JavaScript 与 HTML/CSS 的交互通道，是实现页面动态效果的核心手段。

这些知识点构成了 JavaScript 前端开发的基础体系，掌握这些内容不仅能解决日常开发中的基础交互需求，也为后续学习 ES6+ 新特性、前端框架、异步编程等进阶内容奠定了坚实的基础。