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

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

一、JavaScript的三种使用方式

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

1. 内部引入（常用）

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

html 复制代码

<!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。
语法：

新建common.js文件（外部JS文件）：

javascript 复制代码

// common.js 内容
console.log("这是外部引入的JS，可被多个页面复用");
function showMessage() {
  alert("外部JS中的函数");
}

在HTML中引入：

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）。
语法：

html 复制代码

<!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堵塞？

示例（错误代码）：

html 复制代码

<!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元素解析完成后执行。
语法：

html 复制代码

<!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执行时所有资源已就绪。
语法：

html 复制代码

<!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错误堵塞示例

html 复制代码

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

2. 常用调试方式

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

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

html 复制代码

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

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

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

步骤：

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

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

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

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

html 复制代码

<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是弱类型的核心体现（可赋值任意类型）。
弱类型特性：变量类型可动态改变，无需提前定义。

示例：

html 复制代码

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

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

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

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

null ：表示"空值"，通常用于主动清空变量（类型判断需注意：typeof null返回object，是JS历史遗留问题）
javascript 复制代码
```
var obj = null;
console.log(obj); // null
console.log(typeof obj); // object（特殊情况）
```
undefined：表示"未定义"，变量声明后未赋值时的默认值
javascript 复制代码
```
var b; // 声明未赋值
console.log(b); // undefined
console.log(typeof b); // undefined
```

（2）复杂数据类型（引用类型）

Object ：所有引用类型的统称，包括数组、对象、函数、DOM元素等。

javascript 复制代码

// 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(值)`

javascript 复制代码

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

javascript 复制代码

console.log(Boolean(0));      // false
console.log(Boolean(""));     // false
console.log(Boolean("abc"));  // true
console.log(Boolean(123));    // true

（3）转为string类型：`值.toString()`或`String(值)`

javascript 复制代码

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）函数声明（命名函数）

语法：

javascript 复制代码

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

// 调用函数
函数名(实参列表);

示例：

html 复制代码

<script>
  // 声明：计算两个数的和
  function add(num1, num2) {
    var sum = num1 + num2;
    return sum; // 返回计算结果
  }

  // 调用：传入实参10和20
  var result = add(10, 20);
  console.log("和为：", result); // 输出：30
</script>

（2）函数表达式（匿名函数赋值给变量）

语法：

javascript 复制代码

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

// 调用：通过变量名调用
变量名(实参列表);

示例：

html 复制代码

<script>
  // 声明：计算两个数的积
  var multiply = function(num1, num2) {
    return num1 * num2;
  };

  // 调用
  var result = multiply(5, 6);
  console.log("积为：", result); // 输出：30
</script>

2. 函数的核心特性

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

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

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

示例：

javascript 复制代码

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：

javascript 复制代码

// 返回对象
function createPerson(name) {
  return { name: name, age: 18 };
}

var person = createPerson("李四");
console.log(person); // { name: "李四", age: 18 }

六、JS数组

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

1. 数组的三种创建方式

（1）隐式创建（数组字面量，最常用）

javascript 复制代码

// 存储不同类型数据，包括嵌套数组
var arr1 = [10, "hello", true, { name: "张三" }, [1, 2, 3]];
console.log(arr1); // [10, "hello", true, {...}, [1,2,3]]

（2）构造函数创建（`new Array()`）

javascript 复制代码

// 方式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）下标赋值创建

javascript 复制代码

// 先创建空数组，再通过下标赋值（数组长度自动扩展）
var arr4 = new Array();
arr4[0] = "苹果";
arr4[1] = "香蕉";
arr4[2] = "橙子";
console.log(arr4); // ["苹果", "香蕉", "橙子"]

2. 数组的三种遍历方式

（1）`for`循环（最灵活，支持break/continue）

javascript 复制代码

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`循环（遍历下标，适合查看索引）

javascript 复制代码

var arr = [10, 20, 30];
for (var index in arr) {
  console.log("下标：", index, "值：", arr[index]); // 输出下标和对应值
}

（3）`for...of`循环（遍历值，ES6新增，简洁）

javascript 复制代码

var arr = [10, 20, 30];
for (var value of arr) {
  console.log("值：", value); // 直接输出值：10、20、30
}

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

创建与遍历：

html 复制代码

<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, ..., 方法名: 函数 };

javascript 复制代码

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

（2）`new Object()`创建

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

javascript 复制代码

// 创建空对象
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：对象名["键"]（适合键名含特殊字符或动态键名）

javascript 复制代码

var person = { name: "张三", age: 20 };

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

// 访问方法
person.sayHello();             // 方式1：调用方法
person["sayHello"]();          // 方式2：调用方法

（2）增：添加新属性/方法

javascript 复制代码

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）改：修改属性值/方法

javascript 复制代码

var person = { name: "张三", age: 20 };

// 修改属性
person.age = 21;          // 方式1
person["name"] = "李四";  // 方式2

// 修改方法
person.sayHello = function() {
  console.log("新的打招呼方法：你好！");
};

（4）删：删除属性（`delete`关键字）

javascript 复制代码

var person = { name: "张三", age: 20 };

// 删除age属性
delete person.age;

console.log(person.age); // undefined（属性已删除）

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

javascript 复制代码

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。

示例：

javascript 复制代码

// 生成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需唯一）：

html 复制代码

<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中：

html 复制代码

<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从"使用方式"到"核心语法"的关键知识点，重点包括：

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

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

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

一、JavaScript的三种使用方式

1. 内部引入（常用）

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

3. 行内引入（少用）

三种引入方式对比

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

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

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

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

方式2：使用window.onload（推荐通用）

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

1. JS错误堵塞示例

2. 常用调试方式

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

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

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

四、JS变量与数据类型

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

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

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

（2）复杂数据类型（引用类型）

3. 数据类型转换

（1）转为number类型：Number(值)

（2）转为boolean类型：Boolean(值)

（3）转为string类型：值.toString()或String(值)

五、JS函数

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

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

（2）函数表达式（匿名函数赋值给变量）

2. 函数的核心特性

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

（2）返回值灵活：可返回任意类型

六、JS数组

1. 数组的三种创建方式

（1）隐式创建（数组字面量，最常用）

（2）构造函数创建（new Array()）

（3）下标赋值创建

2. 数组的三种遍历方式

（1）for循环（最灵活，支持break/continue）

（2）for...in循环（遍历下标，适合查看索引）

（3）for...of循环（遍历值，ES6新增，简洁）

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

七、JS对象

1. 对象的两种创建方式

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

（2）new Object()创建

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

（1）查：访问属性/方法

（2）增：添加新属性/方法

（3）改：修改属性值/方法

（4）删：删除属性（delete关键字）

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

八、JS常用工具与DOM操作

1. 随机数：Math.random()

2. DOM操作核心方法

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

（2）创建DOM元素：document.createElement("标签名")

总结

方式2：使用`window.onload`（推荐通用）

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

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

（1）转为number类型：`Number(值)`

（2）转为boolean类型：`Boolean(值)`

（3）转为string类型：`值.toString()`或`String(值)`

（2）构造函数创建（`new Array()`）

（1）`for`循环（最灵活，支持break/continue）

（2）`for...in`循环（遍历下标，适合查看索引）

（3）`for...of`循环（遍历值，ES6新增，简洁）

（2）`new Object()`创建

（4）删：删除属性（`delete`关键字）

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

1. 随机数：`Math.random()`

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

（2）创建DOM元素：`document.createElement("标签名")`