作为前端新手，扎实掌握 JavaScript 的核心基础知识点是入门的关键。我为你梳理了最核心、最常用的 10 个 JS 基础知识点，每个知识点都用通俗易懂的语言解释，并搭配简单示例，帮你快速理解和掌握。
1. 变量与数据类型
这是 JS 的入门基石，你需要知道如何存储数据，以及 JS 中有哪些基础数据类型。
核心概念：
声明变量的关键字：
let（块级作用域，推荐）;
const（声明常量，不可修改）;
var（函数级作用域，尽量避免）。
基础数据类型：
字符串 (string)、
数字 (number)、
布尔值 (boolean)、
null、
undefined、
Symbol、
BigInt；
引用数据类型：
对象 (object，包含数组、函数等)。
示例：
// 变量声明
let name = "前端新手"; // 字符串
const age = 20; // 数字（常量）
let isStudy = true; // 布尔值
let score = null; // 空值
let hobby; // undefined（未赋值）
let arr = [1, 2, 3]; // 数组（引用类型）
let obj = { name: "小明" }; // 对象（引用类型）
2. 运算符
用于对数据进行计算或判断，是实现逻辑的基础。
核心概念：
算术运算符：+、-、*、/、%（取余）、++（自增）、--（自减）。
比较运算符：==（值相等）、===（值和类型都相等，推荐）、!=、!==、>、<等。
逻辑运算符：&&（与）、||（或）、!（非）。
示例：
// 算术运算
console.log(10 + 5); // 15
console.log(10 % 3); // 1
// 比较运算（重点区分==和===）
console.log(10 == "10"); // true（只比数值）
console.log(10 === "10"); // false（类型不同）
// 逻辑运算
console.log(true && false); // false
console.log(true || false); // true
console.log(!true); // false
3. 条件语句
让代码根据不同条件执行不同逻辑，是实现 “判断” 的核心。
核心概念：if/else、if/else if/else、switch。
示例：
let score = 85;
// if/else
if (score >= 90) {
console.log("优秀");
} else if (score >= 80) {
console.log("良好");
} else {
console.log("继续努力");
}
// switch
let day = 1;
switch (day) {
case 1:
console.log("周一");
break;
case 2:
console.log("周二");
break;
default:
console.log("其他日期");
}
4. 循环语句
用于重复执行一段代码，避免冗余操作。
核心概念：for、while、for...of（遍历数组 / 字符串）、for...in（遍历对象属性）。
示例：
// for循环（遍历数组）
let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); // 依次输出1、2、3
}
// while循环
let num = 1;
while (num <= 3) {
console.log(num);
num++;
}
// for...of（遍历数组）
for (let item of arr) {
console.log(item);
}
5. 函数
封装可复用的代码块，是 JS 的核心组成部分。
核心概念：
函数声明：
function 函数名(参数) { 执行逻辑 }。
函数表达式：const 函数名 = function(参数) { 执行逻辑 }。
箭头函数：const 函数名 = (参数) => { 执行逻辑 }（简化写法）。
参数与返回值：return 用于返回函数执行结果。
示例：
// 函数声明
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // 5
// 箭头函数（简化）
const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 6
6. 数组及常用方法
数组用于存储一组数据，其内置方法是日常开发中使用频率最高的工具。
核心概念：
常用方法（增删改查）：
push()：末尾添加元素；
pop()：末尾删除元素。
unshift()：开头添加元素；
shift()：开头删除元素。
forEach()：遍历数组；
map()：遍历并返回新数组；
filter()：筛选符合条件的元素；
find()：查找第一个符合条件的元素。
let arr = [1, 2, 3];
// 添加元素
arr.push(4); // arr变为[1,2,3,4]
// 遍历
arr.forEach(item => console.log(item));
// map（返回新数组）
let newArr = arr.map(item => item * 2); // [2,4,6,8]
// filter（筛选）
let filterArr = arr.filter(item => item > 2); // [3,4]
7. 对象
JS 中几乎所有事物都是对象，是存储键值对数据的核心方式。
核心概念：
对象的结构：{ 键1: 值1, 键2: 值2 }（键是字符串，值可以是任意类型）。
访问属性：对象.属性名 或 对象['属性名']。
修改 / 添加属性：对象.属性名 = 新值。
示例
let person = {
name: "小明",
age: 20,
sayHi: function() {
console.log("你好");
}
};
// 访问属性
console.log(person.name); // 小明
console.log(person['age']); // 20
// 调用方法
person.sayHi(); // 你好
// 修改属性
person.age = 21;
// 添加属性
person.gender = "男";
8. 作用域与闭包
理解变量的可访问范围，是避免变量冲突、写出健壮代码的关键。
核心概念：
全局作用域：变量在整个页面中可访问；
局部作用域：变量仅在函数 / 代码块内可访问。
闭包：内层函数可以访问外层函数的变量，即使外层函数执行完毕（简单说：“函数套函数，内层用外层的变量”）。
示例：
// 作用域
let globalVar = "全局变量";
function fn() {
let localVar = "局部变量";
console.log(globalVar); // 能访问全局变量
}
// console.log(localVar); // 报错：局部变量外部无法访问
// 闭包示例
function outer() {
let num = 10;
return function inner() {
console.log(num); // 内层函数访问外层变量，形成闭包
};
}
const innerFn = outer();
innerFn(); // 输出10（即使outer已执行完，num仍能被访问）
9. 事件监听
前端交互的核心，让页面能响应用户的操作（如点击、输入）。
核心概念：
元素.addEventListener('事件类型', 处理函数)。
常见事件：
click（点击）、input（输入）、mouseover（鼠标悬停）、load（页面加载完成）。
示例
<button id="btn">点击我</button>
<script>
// 获取按钮元素
const btn = document.getElementById("btn");
// 监听点击事件
btn.addEventListener("click", function() {
alert("你点击了按钮！");
});
</script>
10. 异步编程（基础）
JS 是单线程语言，异步是处理 “耗时操作”（如请求数据、延时）的核心，新手先掌握基础的setTimeout和回调函数。
核心概念：
同步：代码按顺序执行；
异步：耗时操作不阻塞后续代码（如延时、网络请求）。
setTimeout(回调函数, 延时毫秒数)：延时执行代码。
示例
// 异步示例：setTimeout
console.log("第一步");
setTimeout(function() {
console.log("第二步（延时1秒执行）");
}, 1000);
console.log("第三步");
// 执行顺序：第一步 → 第三步 → 第二步（异步不阻塞）
总结
1. 基础基石：变量 / 数据类型、运算符是 JS 的入门基础，===比==更严谨，推荐优先使用。
2. 逻辑控制：条件语句（if/switch）实现 “判断”，循环语句（for/while）实现 “重复执行”，是代码逻辑的核心。
3. 核心复用：函数封装可复用代码，数组 / 对象是存储数据的核心方式，事件监听实现页面交互，异步编程处理耗时操作。
