JavaScript 基础知识点总结 | 极客日志

JavaScriptNode.js大前端

JavaScript 基础知识点总结

综述由AI生成系统梳理了 JavaScript 核心基础知识，涵盖变量声明（var/let/const）、数据类型（原始与引用）、运算符、流程控制（分支与循环）。详细介绍了 Math、Date、字符串、数组及对象等内置对象的方法。同时讲解了函数定义、参数处理、闭包概念以及 DOM 页面交互操作。内容结合代码示例，帮助初学者夯实语法基础，理解动态交互逻辑，为后续学习 ES6+ 及前端框架奠定基础。

墨染流年发布于 2026/3/24更新于 2026/5/826K 浏览

前言

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

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

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 变量值可修改

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

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

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

// 基本类型 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]，引用类型共享地址

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

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

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

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

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

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

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

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

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

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

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
}

// 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 次方

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

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

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

// 字符串方法示例
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"

// 数组增删改示例
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]

// 数组内置方法示例
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

// 对象示例
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]}`);
}

// 函数示例
// 声明式
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

// 函数参数示例
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

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

// 页面交互示例
// 获取元素
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]); // 删除第一个列表项