当前位置： 首页 > news >正文

JavaScript 基础核心知识点总结：从使用方式到核心语法

news 2025/8/30 11:43:56

JavaScript作为前端开发的核心语言，掌握其基础用法与核心语法是入门的关键。本文将系统梳理JS的使用方式、DOM加载问题、调试方法、数据类型、函数、数组、对象等核心知识点，用清晰的结构和实用案例帮助你建立完整的JS基础框架。

一、JavaScript的三种使用方式

JS在HTML中主要有三种引入方式，不同方式适用场景不同，需根据项目需求选择。

1. 内部引入（常用）

定义：将JS代码写在HTML文件的<script>标签内，通常放在<head>或<body>中。
语法：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>内部引入JS</title><!-- 内部引入：script标签包裹JS代码 --><script>alert("这是内部引入的JS");</script>
</head>
<body>
</body>
</html>

特点：

  • 优势：代码与HTML在同一文件，便于单个页面的逻辑管理，无需额外加载外部文件。
  • 局限：仅能在当前页面使用，无法复用至其他页面。
  • 适用场景：单个页面的独立JS逻辑（如简单表单验证、页面交互）。

2. 外部引入（推荐复用场景）

定义：将JS代码单独写在.js文件中，通过<script>标签的src属性引入HTML。
语法：

  1. 新建common.js文件（外部JS文件）：
// common.js 内容
console.log("这是外部引入的JS，可被多个页面复用");
function showMessage() {alert("外部JS中的函数");
}
  1. 在HTML中引入：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>外部引入JS</title><!-- 外部引入：通过src指定JS文件路径 --><script src="common.js"></script>
</head>
<body><button onclick="showMessage()">调用外部JS函数</button>
</body>
</html>

特点：

  • 优势：一个JS文件可被多个HTML页面共用，减少代码冗余，便于项目维护（修改一处，所有引用页面生效）。
  • 注意：引入外部JS的<script>标签内不能再写JS代码（若需补充，需新增一个<script>标签）。
  • 适用场景：多页面共用的逻辑（如公共导航交互、通用工具函数）。

3. 行内引入（少用）

定义：将JS代码直接写在HTML标签的事件属性中（如onclick、onload）。
语法：

<!DOCTYPE html>
<html>
<body><!-- 行内引入：直接在onclick属性中写JS代码 --><button onclick="alert('这是行内JS')">点击触发行内JS</button><!-- 也可调用已定义的函数 --><button onclick="showMessage()">点击调用函数</button><script>function showMessage() {alert("行内JS调用内部函数");}</script>
</body>
</html>

特点：

  • 优势：写法简单，适合极简单的交互逻辑。
  • 局限：代码与HTML强耦合，可读性差，难以维护（复杂逻辑会导致标签属性过长），不符合“结构与行为分离”的开发规范。
  • 适用场景：仅临时测试或极简单的交互（如单个按钮的弹窗提示）。

三种引入方式对比

引入方式复用性维护性适用场景推荐度
内部引入低（单页面）中单个页面独立逻辑★★★★☆
外部引入高（多页面）高多页面共用逻辑★★★★★
行内引入极低（单标签）低临时测试/简单交互★☆☆☆☆

二、JS DOM堵塞问题与解决方案

HTML代码按“从上到下”的顺序解析，若JS代码在DOM元素加载前执行，会导致无法获取DOM元素（即“DOM堵塞”）。

1. 为什么会出现DOM堵塞？

示例（错误代码）：

<!DOCTYPE html>
<html>
<head><script>// 问题：此时<body>尚未解析，无法获取id为"box"的元素var box = document.getElementById("box");box.innerHTML = "修改内容"; // 报错：Cannot set property 'innerHTML' of null</script>
</head>
<body><div id="box"></div>
</body>
</html>

原因：JS代码在<head>中执行时，<body>及内部的div#box尚未被解析，document.getElementById("box")返回null，后续操作自然报错。

2. 解决DOM堵塞的两种方式

方式1：将JS代码写在网页最下方（简单直接）

原理：让JS代码在所有DOM元素解析完成后执行。
语法：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS放在页面底部</title>
</head>
<body><div id="box"></div><!-- 解决：JS写在</body>闭合前，所有DOM已解析 --><script>var box = document.getElementById("box");box.innerHTML = "DOM堵塞已解决"; // 正常执行</script>
</body>
</html>
方式2：使用window.onload（推荐通用）

原理：window.onload是浏览器的全局事件，会在“整个页面（包括DOM、图片、样式表等）加载完成后”触发，确保JS执行时所有资源已就绪。
语法：

<!DOCTYPE html>
<html>
<head><script>// 解决：页面加载完毕后执行JS代码window.onload = function() {var box = document.getElementById("box");box.innerHTML = "使用window.onload解决堵塞"; // 正常执行};</script>
</head>
<body><div id="box"></div>
</body>
</html>

特点：即使JS写在<head>中，也能确保DOM加载完成后执行，兼容性好，是项目中常用的解决方案。

三、JS错误堵塞与调试方法

JS是“单线程”语言，代码执行过程中若发生错误，错误后的代码会停止执行，但错误前的代码不受影响。掌握调试方法可快速定位错误。

1. JS错误堵塞示例

<script>alert("错误前的代码：正常执行"); // 弹出提示（正常）// 故意写错误代码：未定义变量console.log(undefinedVariable); // 报错：ReferenceError: undefinedVariable is not definedalert("错误后的代码：不会执行"); // 不弹出（代码堵塞）
</script>

2. 常用调试方式

方式1：使用alert()调试（简单定位）

原理：通过alert()弹出变量值，判断代码执行到哪一步出现问题（缩小错误范围）。
语法：

<script>var num1 = 10;var num2 = 20;alert("num1的值：" + num1); // 弹出10，确认num1正常var sum = num1 + num2;alert("sum的值：" + sum); // 弹出30，确认计算正常// 后续代码若报错，可确定错误在alert之后
</script>

局限：会中断代码执行（需点击“确定”才能继续），不适用于循环或高频执行的逻辑。

方式2：使用浏览器开发者工具（专业调试）

步骤：

  1. 打开浏览器（推荐Chrome/Firefox），按F12打开开发者工具；
  2. 切换到「Console」面板：查看JS报错信息（包括错误类型、行号）；
  3. 切换到「Sources」面板：
    • 找到对应的JS文件，在代码行号前点击设置“断点”；
    • 刷新页面，代码执行到断点时暂停，可逐步执行（按F10单步执行），查看变量实时值。

示例：若代码报错“Cannot set property ‘innerHTML’ of null”，「Console」面板会显示错误行号，直接定位到“获取DOM元素失败”的问题。

方式3：使用console.log()调试（无干扰）

原理：在控制台打印变量值或执行状态，不中断代码执行，适合复杂逻辑调试。
语法：

<script>var arr = [1, 2, 3];console.log("数组初始值：", arr); // 控制台显示：数组初始值： [1,2,3]for (var i = 0; i < arr.length; i++) {arr[i] *= 2;console.log("第" + (i+1) + "次循环后：", arr); // 实时查看循环中数组变化}
</script>

优势：灵活输出多个变量，支持打印数组、对象等复杂数据类型（控制台可展开查看详情）。

四、JS变量与数据类型

JS是“弱类型语言”，变量声明时无需指定数据类型，可通过typeof关键字判断变量类型。

1. 变量声明与弱类型特性

  • 声明方式：使用var（ES5）、let/const（ES6）声明变量，其中var是弱类型的核心体现（可赋值任意类型）。
  • 弱类型特性：变量类型可动态改变，无需提前定义。

示例：

<script>var a = 10; // 初始为number类型console.log("a的类型：", typeof a); // 输出：numbera = "hello"; // 动态改为string类型console.log("a的类型：", typeof a); // 输出：stringa = true; // 动态改为boolean类型console.log("a的类型：", typeof a); // 输出：boolean
</script>

对比强类型：如Java中int a = 10;，a只能存储整数，不能改为字符串（否则编译报错）。

2. 六种数据类型（5种基本类型 + 1种复杂类型）

（1）基本数据类型（值类型）

  • number：所有数字（整数、小数、NaN）

    var num1 = 10;    // 整数
var num2 = 3.14;  // 小数
var num3 = NaN;   // Not a Number（非数字，如"abc"/10的结果）
console.log(typeof num1); // number

  • boolean：布尔值，仅true（真）和false（假）

    var isSuccess = true;
var isError = false;
console.log(typeof isSuccess); // boolean

  • string：字符串，用""或''包裹（不可混着用）

    var str1 = "Hello JS"; // 双引号
var str2 = '前端开发';  // 单引号
console.log(typeof str1); // string

  • null：表示“空值”，通常用于主动清空变量（类型判断需注意：typeof null返回object，是JS历史遗留问题）

    var obj = null;
console.log(obj); // null
console.log(typeof obj); // object（特殊情况）

  • undefined：表示“未定义”，变量声明后未赋值时的默认值

    var b; // 声明未赋值
console.log(b); // undefined
console.log(typeof b); // undefined
（2）复杂数据类型（引用类型）
  • Object：所有引用类型的统称，包括数组、对象、函数、DOM元素等。
    // 1. 普通对象
var person = { name: "张三", age: 20 };
// 2. 数组（本质是特殊的对象）
var arr = [1, 2, 3];
// 3. DOM元素（本质是对象）
var div = document.getElementById("box");console.log(typeof person); // object
console.log(typeof arr);    // object
console.log(typeof div);    // object

3. 数据类型转换

（1）转为number类型：Number(值)
var str = "123";
var num = Number(str);
console.log(num, typeof num); // 123, number// 特殊情况：无法转为数字时返回NaN
var str2 = "abc";
console.log(Number(str2)); // NaN
（2）转为boolean类型：Boolean(值)
  • 转为false的情况：0、""（空字符串）、null、undefined、NaN
  • 其他情况均转为true
console.log(Boolean(0));      // false
console.log(Boolean(""));     // false
console.log(Boolean("abc"));  // true
console.log(Boolean(123));    // true
（3）转为string类型：值.toString()或String(值)
var num = 123;
var str1 = num.toString();    // 方法1：通过toString()
var str2 = String(num);       // 方法2：通过String()函数
console.log(str1, typeof str1); // "123", string

五、JS函数

函数是“封装特定功能的代码块”，分为系统函数（如alert()）和自定义函数（开发者自己定义）。

1. 自定义函数的两种声明方式

（1）函数声明（命名函数）

语法：

// 声明函数
function 函数名(参数列表) {// 函数体（功能逻辑）[return 返回值]; // 可选：无return则返回undefined
}// 调用函数
函数名(实参列表);

示例：

<script>// 声明：计算两个数的和function add(num1, num2) {var sum = num1 + num2;return sum; // 返回计算结果}// 调用：传入实参10和20var result = add(10, 20);console.log("和为：", result); // 输出：30
</script>
（2）函数表达式（匿名函数赋值给变量）

语法：

// 声明：匿名函数赋值给变量
var 变量名 = function(参数列表) {// 函数体[return 返回值];
};// 调用：通过变量名调用
变量名(实参列表);

示例：

<script>// 声明：计算两个数的积var multiply = function(num1, num2) {return num1 * num2;};// 调用var result = multiply(5, 6);console.log("积为：", result); // 输出：30
</script>

2. 函数的核心特性

（1）参数灵活：无需严格匹配

JS函数的参数不强制要求“形参数量=实参数量”：

  • 实参多于形参：多余实参被忽略（可通过arguments获取所有实参）；
  • 实参少于形参：未传值的形参默认为undefined。

示例：

function sum(a, b) {console.log("a:", a, "b:", b);console.log("所有实参：", arguments); // arguments是伪数组，存储所有实参return a + b;
}sum(10);          // a:10, b:undefined → 返回NaN
sum(10, 20, 30);  // a:10, b:20 → 返回30（30被忽略，arguments包含[10,20,30]）
（2）返回值灵活：可返回任意类型

函数可返回任意数据类型（包括函数），无return时默认返回undefined：

// 返回对象
function createPerson(name) {return { name: name, age: 18 };
}var person = createPerson("李四");
console.log(person); // { name: "李四", age: 18 }

六、JS数组

数组是“有序的集合”，可存储任意类型数据（数字、字符串、对象等），下标从0开始。

1. 数组的三种创建方式

（1）隐式创建（数组字面量，最常用）
// 存储不同类型数据，包括嵌套数组
var arr1 = [10, "hello", true, { name: "张三" }, [1, 2, 3]];
console.log(arr1); // [10, "hello", true, {…}, [1,2,3]]
（2）构造函数创建（new Array()）
// 方式1：传入元素列表
var arr2 = new Array(1, 2, "world");
console.log(arr2); // [1, 2, "world"]// 方式2：传入单个数字（表示数组长度，元素默认undefined）
var arr3 = new Array(3);
console.log(arr3); // [empty × 3]（长度3，无实际元素）
（3）下标赋值创建
// 先创建空数组，再通过下标赋值（数组长度自动扩展）
var arr4 = new Array();
arr4[0] = "苹果";
arr4[1] = "香蕉";
arr4[2] = "橙子";
console.log(arr4); // ["苹果", "香蕉", "橙子"]

2. 数组的三种遍历方式

（1）for循环（最灵活，支持break/continue）
var arr = [10, 20, 30];
for (var i = 0; i < arr.length; i++) {console.log("下标" + i + "：", arr[i]); // 输出：下标0：10，下标1：20，下标2：30
}
（2）for...in循环（遍历下标，适合查看索引）
var arr = [10, 20, 30];
for (var index in arr) {console.log("下标：", index, "值：", arr[index]); // 输出下标和对应值
}
（3）for...of循环（遍历值，ES6新增，简洁）
var arr = [10, 20, 30];
for (var value of arr) {console.log("值：", value); // 直接输出值：10、20、30
}

3. 二维数组（数组嵌套数组）

创建与遍历：

<script>// 创建二维数组：3行2列var twoDArr = [["张三", 20],["李四", 21],["王五", 22]];// 遍历二维数组：外层循环遍历行，内层循环遍历列for (var row of twoDArr) { // 外层：遍历每一行（一维数组）for (var col of row) {   // 内层：遍历当前行的每一列（元素）console.log(col + " ");}console.log("\n"); // 每行结束换行}
</script>

七、JS对象

对象是“键值对的集合”，用于存储复杂数据（如人员信息、商品信息），是JS中最重要的引用类型。

1. 对象的两种创建方式

（1）对象字面量（最常用）

语法：var 对象名 = { 键1: 值1, 键2: 值2, ..., 方法名: 函数 };

var person = {id: 1,name: "张三",age: 20,// 对象方法（功能）sayHello: function() {alert("你好，我是" + this.name); // this指向当前对象}
};
（2）new Object()创建

语法：先创建空对象，再通过对象名.键或对象名["键"]赋值。

// 创建空对象
var product = new Object();// 给对象添加属性
product.id = 101;
product.name = "手机";
product.price = 3999;// 给对象添加方法
product.showInfo = function() {console.log("商品：" + this.name + "，价格：" + this.price);
};

2. 对象的操作（增删改查）

（1）查：访问属性/方法
  • 方式1：对象名.键（推荐，简洁）
  • 方式2：对象名["键"]（适合键名含特殊字符或动态键名）
var person = { name: "张三", age: 20 };// 访问属性
console.log(person.name);      // 方式1：张三
console.log(person["age"]);    // 方式2：20// 访问方法
person.sayHello();             // 方式1：调用方法
person["sayHello"]();          // 方式2：调用方法
（2）增：添加新属性/方法
var person = { name: "张三" };// 添加属性
person.age = 20;          // 方式1
person["gender"] = "男";  // 方式2// 添加方法
person.run = function() {console.log(this.name + "在跑步");
};console.log(person); // { name: "张三", age: 20, gender: "男", run: ƒ }
（3）改：修改属性值/方法
var person = { name: "张三", age: 20 };// 修改属性
person.age = 21;          // 方式1
person["name"] = "李四";  // 方式2// 修改方法
person.sayHello = function() {console.log("新的打招呼方法：你好！");
};
（4）删：删除属性（delete关键字）
var person = { name: "张三", age: 20 };// 删除age属性
delete person.age;console.log(person.age); // undefined（属性已删除）

3. 对象的遍历（for...in循环）

var person = { name: "张三", age: 20, gender: "男" };// for...in遍历对象的所有键
for (var key in person) {console.log("键：" + key + "，值：" + person[key]);
}
// 输出：
// 键：name，值：张三
// 键：age，值：20
// 键：gender，值：男

八、JS常用工具与DOM操作

1. 随机数：Math.random()

  • 功能：生成[0, 1)之间的随机小数（包含0，不包含1）。
  • 扩展：生成[min, max]之间的随机整数：Math.floor(Math.random() * (max - min + 1)) + min。

示例：

// 生成0-29的随机整数（Math.floor()向下取整）
var randomNum = Math.floor(Math.random() * 30);
console.log("随机数：", randomNum); // 0-29之间的整数

2. DOM操作核心方法

（1）获取DOM元素：document.getElementById("id")

通过元素的id属性获取单个DOM元素（id需唯一）：

<body><div id="box"></div><script>// 获取id为"box"的div元素var box = document.getElementById("box");box.innerHTML = "通过JS修改DOM内容";</script>
</body>
（2）创建DOM元素：document.createElement("标签名")

创建新的DOM元素，需通过appendChild()添加到现有DOM中：

<body><div id="container"></div><script>// 1. 创建新div元素var newDiv = document.createElement("div");// 2. 设置新元素的样式和内容newDiv.style.width = "100px";newDiv.style.height = "100px";newDiv.style.backgroundColor = "red";newDiv.innerHTML = "新创建的div";// 3. 将新元素添加到container中var container = document.getElementById("container");container.appendChild(newDiv);</script>
</body>

总结

本文覆盖了JS从“使用方式”到“核心语法”的关键知识点，重点包括：

  1. 三种引入方式的适用场景与区别；
  2. DOM堵塞的原因与两种解决方案；
  3. 错误调试的三种常用方法；
  4. 弱类型变量与六种数据类型；
  5. 函数的两种声明方式与灵活特性；
  6. 数组的创建与遍历；
  7. 对象的操作与遍历；
  8. 常用工具（随机数）与DOM操作。

这些知识点是JS开发的基础，建议结合实际案例多练习（如表单验证、动态列表），逐步掌握“弱类型语言”的灵活性，为后续学习复杂交互（如事件绑定、AJAX）打下基础。

http://www.dtcms.com/a/357482.html

相关文章：

  • 不止于价格，DigitalOcean、AWS和Linode该选谁？
  • 蘑兔音乐：音乐创作板块的槿汐姑姑
  • 抗干扰、高冗余、快部署：KAXA工业无线方案赋能注塑车间稳定联网
  • OpenCV的轮廓检测
  • 手写MyBatis第41弹：MyBatis动态代理黑魔法：MapperProxy如何智能处理增删改的返回值？
  • 【完整源码+数据集+部署教程】胚胎发育阶段检测系统源码和数据集：改进yolo11-SCConv
  • 如何从 iCloud 存储中删除消息的 4 种方法
  • ubuntu24.04 QT中配置opencv4.12
  • 引力场能量为负，物质能量为正，这是在存在物质的空间中说的，如果是空无一物的空间呢，引力场能量还是负吗（或者说引力场还存在吗）
  • 2025年09月计算机二级Java选择题每日一练——第十一期
  • Vue3 kkfileview 的使用
  • Hal aidl 模板
  • Django开发规范：构建可维护的AWS资源管理应用
  • 第八章 惊喜01 测试筹备会
  • 【Flask】测试平台开发，产品管理实现编辑功能-第六篇
  • 对接连连支付（七）-- 退款查询
  • CSS设置滚动条显示时机及样式
  • R 语言 + 卒中 Meta 分析（续）：机器学习 Meta 与结构方程 Meta 完整实现
  • STM32之IIC详解
  • GY-BMP280压强传感器完整工程stm32控制
  • 嵌入式滤波算法模块
  • 换公司如何快速切入软件项目工程
  • vant Overlay 遮罩层内元素无法滚动解决方案
  • 命令扩展与重定向
  • 【完整源码+数据集+部署教程】硬币分类与识别系统源码和数据集：改进yolo11-SWC
  • 【序列晋升】20 Spring Cloud Function 函数即服务(FaaS)
  • 明远智睿 RK3568 核心板：以硬核性能解锁多领域应用新可能
  • java_web 日志配置
  • KNN算法（K近邻算法）
  • leetcode 191 位1的个数