JavaScript 进阶核心文档（零基础衔接版，通俗易懂 2025最新）

前言

本文是 JavaScript基础版 的无缝衔接进阶内容，所有知识点承接基础篇（变量、数据类型、运算符、流程控制、数组），语句通俗易懂、无晦涩概念、案例充足，零基础可直接上手，所有案例均可复制运行练习。

进阶核心定位：基础篇学会「JS的基本语法规则」，进阶篇学会「JS的核心编程思想 + 高频高级语法」，是从「能写代码」到「能写好代码」的必经之路，也是前端开发的核心必备知识。 学习提示：进阶内容更注重「理解原理 + 多做案例」，每个知识点先看懂、再敲代码、最后自己仿写，就能完全掌握。

---

一、数组 进阶（重中之重，开发高频使用）

在基础篇中我们学习了数组的定义、访问、遍历，数组是JS开发中最常用的复杂数据类型 ，90%的业务逻辑都会用到数组，基础只是入门，数组的进阶方法和高阶遍历 是必须吃透的核心内容。

✅ 数组的基础回顾（快速衔接）

1. 数组是「存储多个数据的容器」，可以存放任意类型的数据：var arr = [1, '张三', true, null, [10,20]]
2. 数组的索引从 0 开始，通过 数组名[索引] 访问元素，arr.length 获取数组长度
3. 基础遍历方式：for循环 遍历数组所有元素

✅ 1. 数组的 增/删/改/查 进阶方法（必会，开发高频）

基础的数组操作是通过索引赋值/取值，但是开发中经常需要「在开头/结尾/指定位置」添加、删除元素，JS内置了6个核心方法 ，语法简单、无需自己写循环，直接调用即可，必须背会、会用，分为两组记忆：

✔️ 第一组：操作数组「尾部」的元素（最常用，无参数坑）

① 数组.push(元素1, 元素2...) → 尾部追加元素

• 作用 ：向数组的 最后面 添加一个或多个元素
• 返回值 ：数组新的长度
• 原数组 ：会被修改

var arr = [1,2,3];
var newLen = arr.push(4,5); // 尾部追加4和5
console.log(arr); // [1,2,3,4,5] 原数组被修改
console.log(newLen); // 5 → 返回新长度

② 数组.pop() → 尾部删除元素

• 作用 ：删除数组的 最后一个 元素
• 返回值：被删除的那个元素
• 原数组 ：会被修改

var arr = [1,2,3,4];
var delItem = arr.pop(); // 删除最后一个元素4
console.log(arr); // [1,2,3] 原数组被修改
console.log(delItem); //4 → 返回被删除的元素

✔️ 第二组：操作数组「头部」的元素（常用）

① 数组.unshift(元素1, 元素2...) → 头部追加元素

• 作用 ：向数组的 最前面 添加一个或多个元素
• 返回值 ：数组新的长度
• 原数组 ：会被修改

var arr = [3,4,5];
var newLen = arr.unshift(1,2); // 头部追加1和2
console.log(arr); // [1,2,3,4,5] 原数组被修改
console.log(newLen); //5 → 返回新长度

② 数组.shift() → 头部删除元素

• 作用 ：删除数组的 第一个 元素
• 返回值：被删除的那个元素
• 原数组 ：会被修改

var arr = [1,2,3,4];
var delItem = arr.shift(); // 删除第一个元素1
console.log(arr); // [2,3,4] 原数组被修改
console.log(delItem); //1 → 返回被删除的元素

✔️ 第三组：操作数组「指定位置」的元素（万能增删改，重点）

数组.splice(起始索引, 删除个数, 新增元素1, 新增元素2...) → 数组的「万能方法」

• 作用 ：可以在数组的任意位置，删除指定个数的元素，同时可以追加新元素
• 参数说明（3个） ：
  1. 第1个参数：必填，从哪个索引开始操作（索引从0开始）
  2. 第2个参数：必填，删除的元素个数（0 = 不删除）
  3. 第3个及以后参数：可选，要新增的元素，写几个加几个
• 返回值：被删除的元素组成的「新数组」（没删除则返回空数组）
• 原数组 ：会被修改

var arr = [1,2,3,4,5];
// 案例1：只删除 → 从索引2开始，删除2个元素（3和4）
var delArr = arr.splice(2,2);
console.log(arr); // [1,2,5]
console.log(delArr); // [3,4]

// 案例2：只新增 → 从索引2开始，删除0个，新增 6,7
arr.splice(2,0,6,7);
console.log(arr); // [1,2,6,7,5]

// 案例3：删了再加（替换）→ 从索引2开始，删除1个，新增 8
arr.splice(2,1,8);
console.log(arr); // [1,2,8,7,5]

✅ 2. 数组的 高阶遍历方法（基础for循环的升级版，开发必用）

基础篇我们用 for循环 遍历数组，语法繁琐（要写初始值、条件、更新变量），JS为数组内置了 3个高阶遍历方法 ，语法简洁、语义清晰，开发中99%的场景会替代基础for循环 ，也是面试高频考点，理解原理 + 会用即可，无需死记硬背。

核心共性 ：这3个方法都是「遍历数组的每一个元素」，都会接收一个 函数作为参数 （这个函数我们叫「回调函数」），回调函数会被自动执行 ，不需要手动调用。 回调函数的固定参数（3个，按顺序写）：

1. item → 数组的「当前遍历到的元素」（必用）
2. index → 当前元素的「索引」（可选）
3. arr → 原数组本身（几乎不用）

✔️ ① 数组.forEach(function(item, index){}) → 纯遍历（无返回值）

• 中文含义 ：为每个，作用就是「遍历数组的每一个元素」，等价于基础的for循环
• 核心特点 ：没有返回值，只做遍历操作（打印、累加、修改元素等）
• 适用场景：只需要遍历数组，不需要得到新数组的场景（最常用）

var arr = [10,20,30,40];
// 遍历数组，打印每个元素和对应的索引
arr.forEach(function(item, index){
  console.log(`索引${index}的元素是：${item}`);
});
// 输出结果：
// 索引0的元素是：10
// 索引1的元素是：20
// 索引2的元素是：30
// 索引3的元素是：40

// 案例：用forEach求数组所有元素的和
var sum = 0;
arr.forEach(function(item){
  sum += item;
});
console.log(sum); // 100

✔️ ② 数组.map(function(item, index){ return 新值 }) → 遍历+加工，返回新数组（开发高频）

• 中文含义 ：映射，作用是「遍历数组的每一个元素，对元素进行加工处理，返回一个新数组」
• 核心特点 ：有返回值，返回一个「和原数组长度相同」的新数组，新数组的元素是加工后的结果
• 原数组 ：不会被修改（重点，纯纯的新数组）
• 适用场景：需要对数组的每一个元素做「统一处理」，得到新数组（如：所有元素乘2、拼接字符串、提取对象属性等）

var arr = [1,2,3,4];
// 案例1：所有元素乘2，得到新数组
var newArr = arr.map(function(item){
  return item * 2;
});
console.log(arr); // [1,2,3,4] 原数组不变
console.log(newArr); // [2,4,6,8] 新数组

// 案例2：给所有元素拼接字符串
var strArr = arr.map(function(item){
  return '数字：' + item;
});
console.log(strArr); // ["数字：1", "数字：2", "数字：3", "数字：4"]

✔️ ③ 数组.filter(function(item, index){ return 布尔值 }) → 遍历+筛选，返回新数组（开发高频）

• 中文含义 ：过滤，作用是「遍历数组的每一个元素，按照指定条件筛选出符合要求的元素，返回一个新数组」
• 核心特点 ：有返回值，返回的新数组是「原数组的子集」（长度≤原数组）
• 回调函数规则：return后面写「筛选条件」，条件成立（true）则保留当前元素，不成立（false）则过滤掉
• 原数组 ：不会被修改
• 适用场景：需要从数组中「筛选符合条件的数据」（如：筛选大于10的数、筛选偶数、筛选符合条件的用户等）

var arr = [1,5,8,10,12,15];
// 案例1：筛选出数组中大于10的元素
var bigArr = arr.filter(function(item){
  return item > 10;
});
console.log(bigArr); // [12,15]

// 案例2：筛选出数组中的偶数
var evenArr = arr.filter(function(item){
  return item % 2 === 0;
});
console.log(evenArr); // [8,10,12]

✅ 3. 数组的其他常用进阶方法（必会，高频）

除了遍历和增删改，开发中还有几个数组方法使用率极高，语法简单，直接调用即可，记牢作用和返回值：

✔️ ① 数组.indexOf(查找的元素) → 查找元素的索引

• 作用 ：查找数组中是否包含某个元素，返回该元素的第一个索引
• 返回值 ：找到则返回「索引值」，找不到则返回 -1（重点，判断是否存在的核心）
• 原数组：不变

var arr = [10,20,30,20];
console.log(arr.indexOf(20)); // 1 → 找到第一个20的索引是1
console.log(arr.indexOf(50)); // -1 → 找不到返回-1

// 开发常用场景：判断数组中是否包含某个元素
if(arr.indexOf(30) !== -1){
  console.log('数组中包含30');
}else{
  console.log('数组中不包含30');
}

✔️ ② 数组.includes(查找的元素) → 判断元素是否存在（ES6新增，推荐）

• 作用 ：判断数组中是否包含某个元素，返回布尔值，比indexOf更直观
• 返回值 ：存在返回 true，不存在返回 false
• 原数组：不变

var arr = [10,20,30];
console.log(arr.includes(20)); // true
console.log(arr.includes(50)); // false

// 开发常用场景：判断包含
if(arr.includes(30)){
  console.log('数组中包含30');
}

✔️ ③ 数组.join(分隔符) → 数组转字符串

• 作用：将数组的所有元素拼接成一个「字符串」
• 参数 ：分隔符（可选），不写则默认用 , 分隔，写空字符串 '' 则无缝拼接
• 返回值：拼接后的字符串
• 原数组：不变

var arr = ['我','是','前端','工程师'];
console.log(arr.join()); // 我,是,前端,工程师
console.log(arr.join('')); // 我是前端工程师
console.log(arr.join('-')); // 我-是-前端-工程师

---

二、函数 核心（JS的灵魂，进阶核心中的核心）

✅ 为什么要学函数？（基础衔接，理解必要性）

在基础篇中，我们写的代码都是「顺序执行的零散代码」，比如求1~100的和、遍历数组、判断奇偶，这些代码如果需要重复使用，只能复制粘贴，会造成：

1. 代码冗余：相同逻辑写多遍，代码量变大
2. 维护困难：逻辑需要修改时，所有复制的地方都要改，容易漏改
3. 可读性差：零散代码没有语义，看不懂这段代码的作用

而 函数 就是为了解决这个问题而生的，函数的核心作用：把一段实现特定功能的代码「封装」起来，给这段代码起个名字，以后需要用的时候，直接调用名字即可，不用重复写代码。

一句话总结：函数 = 封装好的、可重复使用的「代码块」，是JS的核心编程思想。

✅ 1. 函数的基础概念（通俗易懂）

✔️ 什么是函数？

函数是一段 被命名的、可重复执行的代码块，这段代码块实现了一个「特定的功能」，比如：求和、求最大值、判断闰年、遍历数组等，只要是「需要重复使用的逻辑」，都应该封装成函数。

✔️ 函数的核心特点（3个）

1. 封装性：把实现功能的代码包起来，对外只暴露一个名字，隐藏内部细节
2. 复用性：一次封装，多次调用，不用重复写代码
3. 独立性：函数内部的代码和外部是隔离的，互不影响

✅ 2. 函数的 定义 & 调用（基础语法，必会，核心两步）

使用函数的完整流程只有两步：第一步：定义函数（封装代码），第二步：调用函数（执行代码），缺一不可，先定义后调用，顺序不能乱。

类比：定义函数 = 买了一个洗衣机（封装了洗衣服的功能），调用函数 = 按下洗衣机的开关（执行洗衣服的功能），洗衣机买了不用就不会工作，函数定义了不调用就不会执行。

✔️ 第一步：定义函数（两种方式，开发都用第一种）

方式1：声明式定义函数（推荐，最常用）

语法格式（固定）：

// function 是关键字，固定写
// 函数名：自己起的名字，命名规则和变量一样（见名知意、驼峰命名）
// ()：形参列表，后面讲
// {}：函数体，写实现功能的代码
function 函数名() {
  // 函数体：实现功能的代码
  代码逻辑;
}

案例：封装一个「求两个数之和」的函数

// 定义函数：封装求和的逻辑
function getSum() {
  var a = 10;
  var b = 20;
  var sum = a + b;
  console.log('两个数的和是：', sum);
}

方式2：赋值式定义函数（了解即可）

// 把函数赋值给一个变量，变量名就是函数名
var getSum = function() {
  var a = 10;
  var b = 20;
  console.log(a + b);
}

✔️ 第二步：调用函数（执行函数的核心，语法固定）

语法格式（固定） ：函数名();

• 只要写了这行代码，函数内部的代码就会被执行
• 调用多少次，函数就执行多少次

// 定义函数
function getSum() {
  var a = 10;
  var b = 20;
  var sum = a + b;
  console.log('两个数的和是：', sum);
}

// 调用函数 → 执行函数体代码，打印结果
getSum(); // 输出：两个数的和是：30
// 再调用一次 → 再执行一次
getSum(); // 输出：两个数的和是：30

✅ 3. 函数的 参数（核心进阶，让函数更灵活，必学）

✔️ 为什么需要参数？（理解必要性）

上面的求和函数有一个问题：求和的两个数 10 和 20 是「写死的」，调用函数只能求10+20的和，如果想求其他数的和，需要修改函数内部的代码，这样的函数灵活性太差，复用性不高。

而 参数 就是为了解决这个问题，参数的核心作用：让函数的「逻辑不变，数据可变」，调用函数的时候，把需要处理的数据「传进去」，函数内部用传进来的数据执行逻辑，这样同一个函数可以处理不同的数据，灵活性拉满。

✔️ 参数的两个核心概念（形参 & 实参，通俗易懂，必记）

为了方便理解，我们用「洗衣机洗衣服」来类比：

• 洗衣机的功能是「洗衣服」（函数的逻辑不变）
• 洗衣服时需要「放衣服进去」（衣服就是传给洗衣机的「数据」）
• 洗衣机上有一个「放衣服的入口」（这个入口就是函数的「形参」）
• 你放进去的「具体衣服」（比如T恤、裤子）就是「实参」

对应到函数中，两个概念的定义：

1. 形参（形式参数） ：写在函数定义时的 () 里面，本质是「函数内部的变量」，没有具体的值 ，只是用来「接收」调用函数时传进来的数据。
   • 语法 ：多个形参用 , 分隔
   • 作用：函数内部可以直接使用这个变量
2. 实参（实际参数） ：写在函数调用时的 () 里面，是「具体的数据」，作用是「传给函数的形参」，给形参赋值。
   • 语法 ：多个实参用 , 分隔
   • 规则 ：形参和实参是一一对应的，第一个实参给第一个形参赋值，第二个给第二个赋值，以此类推。

✔️ 参数的使用语法（固定，案例理解，一看就会）

// 定义函数时：()里写 形参 → 相当于声明变量，无值
function 函数名(形参1, 形参2, ...) {
  // 函数体中直接使用形参
  代码逻辑(形参1, 形参2);
}

// 调用函数时：()里写 实参 → 给形参赋值
函数名(实参1, 实参2, ...);

案例1：封装求和函数，支持求「任意两个数」的和（核心案例）

// 定义函数：形参a和b，接收传进来的两个数
function getSum(a, b) {
  var sum = a + b;
  console.log(a + '+' + b + '=' + sum);
}

// 调用函数：传不同的实参，处理不同的数据
getSum(10, 20); // 实参10→a，20→b → 输出：10+20=30
getSum(5, 8);   // 实参5→a，8→b → 输出：5+8=13
getSum(100, 200);// 实参100→a，200→b → 输出：100+200=300

案例2：封装函数，求「任意数组」的所有元素之和（进阶案例，衔接数组）

// 定义函数：形参arr接收传进来的数组
function getArrSum(arr) {
  var sum = 0;
  arr.forEach(function(item){
    sum += item;
  });
  console.log('数组的和是：', sum);
}

// 调用函数：传不同的数组
var arr1 = [1,2,3,4];
var arr2 = [10,20,30];
getArrSum(arr1); // 输出：数组的和是：10
getArrSum(arr2); // 输出：数组的和是：60

✅ 4. 函数的 返回值（核心进阶，函数的精髓，必学）

✔️ 为什么需要返回值？（理解必要性）

上面的函数都是「执行逻辑后直接打印结果」，比如求和函数打印和、求数组和函数打印数组和，但是开发中，我们经常需要「使用函数的执行结果」做后续处理，比如：

• 求两个数的和后，再把和乘2
• 求数组的和后，再判断和是否大于100
• 求最大值后，再把最大值赋值给一个变量

如果函数只是打印结果，我们无法拿到这个结果做后续处理，而 返回值 就是为了解决这个问题，返回值的核心作用：函数执行完逻辑后，把「执行结果」返回给调用者，调用者可以拿到这个结果，赋值给变量、做运算、做判断等，想怎么用就怎么用。

一句话总结：函数的「参数」是「往函数里传数据」，函数的「返回值」是「从函数里拿数据出来」，有了参数和返回值，函数才是一个完整的「数据处理容器」。

✔️ 返回值的核心语法（固定，必记）

1. 关键字 ：return → 写在函数体内部，固定关键字
2. 语法 ：return 要返回的结果;
3. 核心规则（3个，必背） ：
   • 函数执行到 return 时，会立刻停止执行，后面的代码都不会执行（return 是函数的「出口」）
   • 一个函数只能有「一个返回值」，写多个return只有第一个生效
   • 如果函数没有写 return，则默认返回 undefined

✔️ 返回值的使用案例（核心，开发必用，一看就会）

案例1：求和函数，返回求和结果，调用者拿到结果后做后续处理

// 定义函数：求和后，return返回结果
function getSum(a, b) {
  var sum = a + b;
  return sum; // 返回求和结果
}

// 调用函数：用变量接收返回值，后续可以任意使用
var res1 = getSum(10,20);
console.log(res1); // 30 → 拿到结果
console.log(res1 * 2); //60 → 用结果做运算
var res2 = getSum(5,8);
console.log(res1 + res2); //30+13=43 → 多个结果做运算

案例2：封装函数，返回「任意数组」的最大值（进阶案例，开发高频）

// 定义函数：接收数组，返回数组的最大值
function getMax(arr) {
  var max = arr[0]; // 假设第一个元素是最大值
  arr.forEach(function(item){
    if(item > max){
      max = item;
    }
  });
  return max; // 返回最大值
}

// 调用函数：拿到最大值，做后续处理
var arr = [10,5,20,15,8];
var maxNum = getMax(arr);
console.log('数组的最大值是：', maxNum); //20
console.log('最大值加10是：', maxNum +10); //30

✅ 5. 函数的 作用域（进阶重点，理解即可，面试高频）

✔️ 什么是作用域？（通俗易懂，无晦涩概念）

作用域 = 变量的「生效范围」，就是一个变量「能在哪个区域被访问、被使用」，超出这个区域就访问不到了。

类比：你在自己家里可以随便用自己的东西（变量），但是到了别人家就不能用别人的东西，这就是「作用域」的本质。

✔️ JS的两种核心作用域（必记，通俗易懂）

在JS中，根据变量的声明位置，分为两种作用域，所有变量都遵守这个规则：

① 全局作用域（全局变量）

• 定义：在「函数外部」声明的变量，就是「全局变量」
• 作用范围 ：整个JS文件都能访问到，函数内部也能访问全局变量
• 生命周期：页面打开时创建，页面关闭时销毁

② 局部作用域（局部变量）

• 定义：在「函数内部」声明的变量（包括函数的「形参」），就是「局部变量」
• 作用范围 ：只能在当前函数内部访问，函数外部完全访问不到
• 生命周期：函数调用时创建，函数执行结束后立刻销毁（节省内存）

✔️ 作用域的核心规则（黄金规则，必背，开发不会出错）

1. 变量的访问规则 ：「就近原则」→ 访问变量时，先在当前作用域找，如果有就用；没有就去上一级作用域找，直到全局作用域；全局作用域没有则报错 undefined。
2. 变量的赋值规则：给变量赋值时，先在当前作用域找，如果有就赋值；没有就去上一级作用域找，直到全局作用域；全局作用域没有则「自动声明为全局变量」（不推荐）。

✔️ 作用域的案例（一看就会，理解即可）

// 全局变量：在函数外部声明
var num = 100;

function fn() {
  // 局部变量：在函数内部声明
  var a = 200;
  // 形参也是局部变量
  console.log(num); // 100 → 访问全局变量，能拿到
  console.log(a); //200 → 访问局部变量，能拿到
}
fn();

// 函数外部访问局部变量 → 报错，访问不到
console.log(a); // Uncaught ReferenceError: a is not defined
// 函数外部访问全局变量 → 能拿到
console.log(num); //100

✅ 6. 函数的 进阶使用：匿名函数 & 立即执行函数（开发常用，了解即可）

✔️ 匿名函数

就是「没有名字的函数」，语法：function() { 函数体 }

• 特点：无法直接调用，因为没有名字，一般和其他语法结合使用（如：数组遍历的回调函数、事件绑定）
• 开发场景：数组的forEach/map/filter的回调函数，就是匿名函数，这也是匿名函数的最常用场景。

// 数组遍历的回调函数，就是匿名函数
var arr = [1,2,3];
arr.forEach(function(item){ // 这个function就是匿名函数
  console.log(item);
});

✔️ 立即执行函数（IIFE）

就是「定义后立刻执行的函数」，语法：(function(){ 函数体 })();

• 特点：定义和调用合二为一，执行完后立刻销毁，不会污染全局变量
• 开发场景：页面加载时需要执行的一次性逻辑，比如初始化数据、页面渲染前的准备工作。

// 立即执行函数：定义后立刻执行
(function(){
  console.log('我是立即执行函数，定义后马上执行');
})();

---

三、对象 核心（JS的核心数据类型，开发高频，进阶必备）

✅ 为什么要学对象？（基础衔接，理解必要性）

在基础篇中，我们用「数组」存储多个数据，但是数组有一个缺点：数据是无序的，只能通过索引访问，无法直观的表示数据的含义。

比如：存储一个人的信息，用数组是这样的：var person = ['张三', 18, '男', '北京'];

• 我们无法直观的知道 person[0] 是姓名，person[1] 是年龄
• 如果数据顺序变了，访问的结果就错了

而 对象 就是为了解决这个问题而生的，对象的核心特点：用「键值对」的形式存储数据，键（属性名）表示数据的含义，值（属性值）表示数据的内容，可以直观的表示「一个事物的多个属性」，比如人、商品、文章等，都是用对象存储。

一句话总结：数组是「有序的、无含义的」数据集合，对象是「无序的、有含义的」数据集合，数组适合存储「同类型的多个数据」，对象适合存储「一个事物的多个属性」。

✅ 1. 对象的基础概念（通俗易懂，必记）

✔️ 什么是对象？

对象是JS中的一种 复杂数据类型，是一个「键值对的集合」，用来表示「一个具体的事物」，比如：一个人、一个商品、一个汽车。

• 键（key）：也叫「属性名」，是字符串类型，用来表示数据的「含义」（如：name、age、sex）
• 值（value）：也叫「属性值」，可以是任意类型的数据（数字、字符串、布尔值、数组、甚至对象、函数）
• 键值对之间用 , 分隔，键和值之间用 : 分隔

✔️ 对象的核心特点

1. 无序性：对象的属性没有顺序，不像数组有索引，访问属性只能通过「属性名」
2. 灵活性：对象的属性可以随时添加、修改、删除
3. 可读性：属性名有明确的含义，一看就知道存储的是什么数据

✅ 2. 对象的 创建 & 访问（基础语法，必会）

✔️ 方式1：字面量创建对象（推荐，开发最常用，简洁高效）

语法格式（固定）：

var 对象名 = {
  属性名1: 属性值1,
  属性名2: 属性值2,
  属性名3: 属性值3,
  // ... 可以写多个属性
};

案例：创建一个「人的对象」，存储姓名、年龄、性别、地址

var person = {
  name: '张三',
  age: 18,
  sex: '男',
  address: '北京市',
  hobby: ['打球', '听歌', '编程'] // 属性值可以是数组
};

✔️ 方式2：构造函数创建对象（了解即可）

var person = new Object();
person.name = '张三';
person.age = 18;
person.sex = '男';

✔️ 对象的属性访问（两种方式，必会，开发都用）

语法格式（两种，都要会）：

1. 点语法 ：对象名.属性名 → 推荐，语法简洁，可读性高（开发99%用这个）
2. 方括号语法 ：对象名['属性名'] → 适合属性名是变量、或者属性名有特殊字符的场景

var person = {
  name: '张三',
  age: 18,
  sex: '男'
};

// 点语法访问
console.log(person.name); // 张三
console.log(person.age); //18

// 方括号语法访问
console.log(person['name']); //张三
console.log(person['age']); //18

✅ 3. 对象的 属性 增/删/改/查（进阶，必会，开发高频）

对象的属性是「动态的」，可以随时添加、修改、删除，语法简单，和访问属性的语法一致，必记：

✔️ ① 查：访问属性 → 两种方式，同上

✔️ ② 改：修改属性值 → 访问属性后直接赋值

var person = {name: '张三', age:18};
person.age = 20; // 修改年龄为20
person.name = '李四'; // 修改姓名为李四
console.log(person); // {name: '李四', age: 20}

✔️ ③ 增：添加新属性 → 直接给对象的新属性赋值

var person = {name: '张三', age:18};
person.sex = '男'; // 添加性别属性
person.address = '北京市'; // 添加地址属性
console.log(person); // {name: '张三', age:18, sex:'男', address:'北京市'}

✔️ ④ 删：删除属性 → 关键字 delete

语法 ：delete 对象名.属性名

var person = {name: '张三', age:18, sex:'男'};
delete person.sex; // 删除性别属性
console.log(person); // {name: '张三', age:18}

✅ 4. 对象的 方法（核心进阶，对象的灵魂，必会）

✔️ 什么是对象的方法？

对象的属性值可以是「任意类型的数据」，如果属性值是「函数」，那么这个属性就叫做「方法」。

一句话总结：对象的属性是「描述事物的特征」（如：姓名、年龄），对象的方法是「描述事物的行为」（如：吃饭、跑步、说话、工作）。

✔️ 方法的定义 & 调用（语法固定，必会）

① 定义方法：属性值是函数

var person = {
  name: '张三',
  age: 18,
  // 定义方法：属性名是sayHi，属性值是函数
  sayHi: function() {
    console.log('你好，我是' + this.name);
  },
  // 定义带参数的方法
  eat: function(food) {
    console.log('我喜欢吃' + food);
  }
};

重点关键字 ：this → 在对象的方法中，this 指向「当前对象」，可以通过 this.属性名 访问对象的属性，这是对象方法的核心语法，必记！

② 调用方法：对象名.方法名() → 方法是函数，必须加括号调用

person.sayHi(); // 输出：你好，我是张三
person.eat('红烧肉'); // 输出：我喜欢吃红烧肉

✅ 5. 对象的 遍历（进阶，必会，开发高频）

对象是「键值对的集合」，没有索引，所以不能用for循环遍历，JS提供了专门的遍历对象的语法：for...in 循环，语法固定，必记。

✔️ for...in 循环遍历对象

语法格式（固定）：

for(var key in 对象名) {
  // key 是对象的「属性名」（字符串类型）
  // 对象名[key] 是对象的「属性值」
  console.log('属性名：', key);
  console.log('属性值：', 对象名[key]);
}

案例：遍历人的对象，打印所有属性名和属性值

var person = {
  name: '张三',
  age: 18,
  sex: '男',
  address: '北京市'
};

for(var key in person) {
  console.log(key + '：' + person[key]);
}
// 输出：
// name：张三
// age：18
// sex：男
// address：北京市

---

四、JS的 内置对象（进阶，开发高频，不用记，会查即用）

✅ 什么是内置对象？（通俗易懂）

JS为了方便开发者开发，提前内置了一些常用的对象，这些对象封装了很多常用的功能和方法，我们不需要自己封装，直接调用即可，比如：数组、字符串、数字、日期等，都是JS的内置对象。

一句话总结：内置对象 = JS官方给我们写好的「工具包」，里面有很多现成的方法，拿来即用，节省开发时间。

✅ 开发中最常用的3个内置对象（必会，高频）

✔️ 1. 字符串内置对象（String）

字符串本质上就是一个「字符数组」，JS为字符串内置了很多方法，用于处理字符串（如：截取、替换、转大小写、查找等），所有字符串都可以直接调用这些方法，原字符串不变，返回新字符串。

常用方法（必记，开发高频）：

• 字符串.length → 获取字符串长度（基础）
• 字符串.indexOf(字符) → 查找字符的索引，找不到返回-1
• 字符串.includes(字符) → 判断是否包含某个字符，返回布尔值
• 字符串.toUpperCase() → 转大写
• 字符串.toLowerCase() → 转小写
• 字符串.slice(起始索引, 结束索引) → 截取字符串，含头不含尾

var str = 'Hello JavaScript';
console.log(str.length); //16
console.log(str.indexOf('Java')); //6
console.log(str.includes('Java')); //true
console.log(str.toUpperCase()); //HELLO JAVASCRIPT
console.log(str.toLowerCase()); //hello javascript
console.log(str.slice(0,5)); //Hello

✔️ 2. 数字内置对象（Number）

封装了数字的常用方法，开发中主要用两个常量：

• Number.MAX_VALUE → JS中最大的数字
• Number.MIN_VALUE → JS中最小的正数

✔️ 3. 日期内置对象（Date）（开发高频，必会）

用于处理「日期和时间」，开发中经常用到（如：获取当前时间、格式化时间、计算时间差），语法固定，会用即可。

// 创建日期对象：获取当前时间
var date = new Date();
console.log(date); // 打印当前完整时间

// 常用方法：获取年、月、日、时、分、秒
console.log(date.getFullYear()); // 获取年份（4位）
console.log(date.getMonth() + 1); // 获取月份（0-11，所以要+1）
console.log(date.getDate()); // 获取日期
console.log(date.getHours()); // 获取小时
console.log(date.getMinutes()); // 获取分钟
console.log(date.getSeconds()); // 获取秒

---

最后：进阶篇学习建议（零基础友好，2025良心建议）

1. 学习顺序：先吃透「数组进阶」→ 再学「函数核心」→ 最后学「对象核心」，这三个模块是进阶篇的核心，也是开发的核心，循序渐进，不要跳着学。
2. 学习方法：进阶内容的核心是「理解原理 + 多做案例」，每个知识点先看懂案例，再自己仿写，比如：封装求和函数、封装求最大值函数、封装数组去重函数、创建对象并遍历，这些都是经典案例，一定要自己敲一遍。
3. 核心重点：函数的「参数和返回值」是函数的精髓，对象的「键值对和方法」是对象的精髓，数组的「高阶遍历方法」是数组的精髓，这三个点吃透，你就掌握了JS的核心编程思想。
4. 心态调整：进阶内容比基础内容难一点，遇到不懂的地方不要慌，多看几遍案例、多敲几遍代码，就能理解，这是所有前端开发者的必经之路，坚持下去就会突破。

---

结语 ：本文档是JavaScript基础版的无缝衔接进阶内容，涵盖了开发中90%的高频进阶知识点，语句通俗易懂、案例充足，零基础可直接上手。学好这些内容，你就具备了编写「复杂业务逻辑」的能力，后续可以继续学习「DOM操作、BOM操作、事件、AJAX」等前端实战内容，向真正的前端开发工程师迈进！加油！💪