JavaScript 基础知识点总结

文章目录

• 前言
• 一、基础核心语法（入门级）
  • 1. 变量相关
  • 2. 数据类型
  • 3. 运算符与基本运算
• 二、流程控制（基础）
  • 1.分支判断
  • 2. 循环结构
• 三、内置对象与方法
  • 1. Math 对象
  • 2. Date 日期对象
  • 3. 字符串操作
  • 4. 数组操作
  • 5. 对象
• 四、函数与页面交互
  • 1. 函数
  • 2. 页面交互（DOM ）
• 总结

前言

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 ="全局变量";functiontestScope(){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;// 30let mod =7%3;// 1let n =5; n++;// 6let 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("优秀");}elseif(score >=80){ console.log("良好");}else{ console.log("及格/不及格");}

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

// switch示例let day =3;switch(day){case1: console.log("周一");break;case2: 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);// 30let powNum = Math.pow(2,3);// 8，2的3次方

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

// 随机数示例-生成1-100随机整数functiongetRandom(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 =newDate();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;// 5let 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 = () => {}）。

// 函数示例// 声明式functionadd(a, b){return a + b;}// 表达式letsub=function(a, b){return a - b;};// 箭头函数letmul=(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) {}）。

// 函数参数示例functionfn(a, b =5){// 默认参数 console.log(a + b);}fn(3);// 8（b使用默认值5）functionsumAll(...args){// 剩余参数return args.reduce((prev, curr)=> prev + curr,0);} console.log(sumAll(1,2,3));// 6

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

// 闭包示例functionouter(){let num =10;returnfunctioninner(){ 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+ 新特性、前端框架、异步编程等进阶内容奠定了坚实的基础。