企业官网建设流程全解析

1. 为什么“原始类型 vs 引用类型”是JavaScript新手绕不过去的第一道坎

我带过几十期前端新人训练营，几乎每届都有人卡在同一个地方：明明代码写得和教程一模一样，结果 console.log 出来的值却“不按常理出牌”。比如把一个对象传进函数里改了属性，外面的原对象也跟着变了；但把一个数字传进去改了，外面的数字却纹丝不动。有人归咎于“JS太奇怪”，有人怀疑自己手残——其实问题根本不在你，而在于没真正吃透“原始类型”和“引用类型”这组概念的本质区别。

这不是一个抽象的理论考点，而是贯穿整个JavaScript开发的底层逻辑。你写的每一行变量声明、每一次函数调用、每一个对象操作，背后都由它驱动。它直接决定：

• 为什么let a = {name: '张三'}; let b = a; b.name = '李四';之后a.name也变成了'李四'；
• 为什么let x = 5; let y = x; y = 10;之后x还是5；
• 为什么用===比较两个空对象{}和{}总是false；
• 为什么数组的slice()或对象的展开运算符{...obj}能“复制”数据，但又不是真正的深拷贝。

这些现象，教科书上常简单归结为“原始类型存值，引用类型存地址”。但这句话本身就有陷阱——JavaScript里根本没有“地址”这个概念，更不存在C语言意义上的指针变量。所谓“地址”，只是我们为了理解而做的类比；真实机制是内存管理模型与值传递语义的共同作用结果。网络热词里频繁出现的“指针变量”“力控的fc7.2窗口变量”“wire和reg变量”等，恰恰说明不同语言/平台对“变量如何持有数据”的实现千差万别，而JS的选择有其明确的设计哲学：简化内存管理，避免开发者直接操作内存，同时通过值传递保证函数调用的安全边界。

所以，这节不讲定义，我们直接从浏览器控制台敲几行代码开始，用最原始的方式感受差异。打开你的 Chrome DevTools（F12），清空控制台，跟我一起执行：

// 场景1：原始类型赋值 let num1 = 42; let num2 = num1; console.log(num1, num2); // 42 42 num2 = 99; console.log(num1, num2); // 42 99 ← num1完全不受影响 // 场景2：引用类型赋值 let obj1 = { age: 25 }; let obj2 = obj1; console.log(obj1.age, obj2.age); // 25 25 obj2.age = 30; console.log(obj1.age, obj2.age); // 30 30 ← obj1.age被意外修改了！

看到这里，你心里可能已经冒出疑问：为什么obj2 = obj1后，改obj2.age就等于改obj1.age？是不是obj2指向了obj1的“内存地址”？这个直觉很自然，但必须立刻纠正：JS引擎内部确实会分配内存空间来存放对象，但变量本身并不存储“地址”，而是存储一个内部标识符（internal reference），这个标识符由JS引擎完全管理，开发者无法读取、计算或比较它。你永远不能像C语言那样写&obj1获取地址，也不能做ptr + 1这类运算。所谓“引用”，指的是多个变量共享同一个对象实例的内部标识符，从而访问同一块内存中的数据。

这个设计带来两个关键后果：
第一，赋值操作永远是“值传递”。无论是原始类型还是引用类型，=号右边的值都会被复制一份给左边的变量。对原始类型，复制的是实际的数值（如42）；对引用类型，复制的是那个内部标识符（不是地址，但效果类似“指向同一对象”）。
第二，只有对象属性的修改才会影响共享状态。因为obj2.age = 30并不是在改变obj2这个变量，而是在通过obj2持有的内部标识符，找到对应的对象内存区域，然后修改其中age属性的值。既然obj1和obj2持有相同的标识符，它们自然就找到了同一块内存。

提示：这就是为什么obj2 = { age: 40 }这样的重新赋值不会影响obj1——此时obj2不再持有原来的标识符，而是获得了一个新对象的新标识符，obj1依然牢牢绑定在旧对象上。变量本身是“容器”，容器里装的东西可以换，但换的时候不影响其他容器。

很多初学者试图用“栈和堆”的内存模型来解释这一切，这容易引发更多困惑。现代JS引擎（V8、SpiderMonkey）的内存布局极其复杂，对象可能被优化到栈上，也可能被分配到堆中，还涉及逃逸分析、分代回收等机制。对新手而言，强行套用C语言的内存模型，只会让本该清晰的概念变得模糊。真正需要建立的认知是：原始类型变量“拥有自己的值”，引用类型变量“拥有对某个对象的访问权”。这个认知足够支撑你写出90%的日常代码，并且能准确预判代码行为。

2. 七种原始类型：从undefined到symbol，每个都藏着实用细节

JavaScript官方定义的原始类型（Primitive Types）共有七种：undefined、null、boolean、number、string、bigint、symbol。别被“七种”吓到，其中undefined、null、boolean、number、string是绝大多数项目天天打交道的“老五样”；bigint和symbol是ES2015之后新增的，解决特定场景痛点。网络热词里反复出现的“基本数据类型”“python变量和数据类型”“c语言数据类型”，恰恰说明不同语言对“基础类型”的划分逻辑不同——JS的原始类型是语言内建的、不可变的、按值传递的最小数据单元，它不等同于C的“基本类型”或Python的“内置类型”，理解这点才能避免概念混淆。

我们逐个拆解，重点不是背定义，而是看它们在真实开发中如何“露脸”、有哪些易踩的坑：

2.1undefined：未定义的“默认值”，不是错误而是状态

undefined是变量声明后未赋值时的默认值，也是函数没有显式返回值时的默认返回值。它常出现在这些地方：

• let name; console.log(name); // undefined
• function foo() {} console.log(foo()); // undefined
• 访问对象不存在的属性：const user = {age: 25}; console.log(user.name); // undefined

很多人误以为undefined表示“出错了”，其实它是JS设计的主动状态标识。比如判断一个配置项是否被用户设置，用if (config.timeout === undefined)比if (!config.timeout)更安全，因为后者在timeout为0、false、''时也会进入分支，而0是合法的超时值。

注意：undefined是一个全局变量（在非严格模式下可被重写！），但void 0是获取undefined值的绝对安全方式。现代代码中，typeof x === 'undefined'是检测变量是否声明的推荐写法，因为它不抛错。

2.2null：空对象指针？不，它是“有意为之的空值”

null是一个字面量，代表“此处本应有一个对象，但现在为空”。它和undefined最大区别在于语义：undefined是“还没给”，null是“明确给了一个空”。比如DOM API中，document.getElementById('nonexistent')返回null，表示“我找过了，没找到这个元素”，而不是“我不知道”。

一个经典陷阱是typeof null === 'object'。这是JS历史遗留bug（V8引擎早期实现时的错误），ECMAScript标准已将其列为“必须保留的兼容性行为”。所以永远不要用typeof来判断null，而要用value === null或Object.is(value, null)。

2.3boolean：只有true和false，但“真值/假值”概念更常用

boolean类型本身很简单，但JS的类型转换规则让它影响深远。在if、while等条件判断中，JS会将任意值转换为布尔值，规则是：falsy值有6个：false、0、-0、0n（BigInt零）、''（空字符串）、null、undefined、NaN；其余都是truthy。

这个规则导致常见误判：

const arr = []; if (arr) { console.log('arr is truthy'); } // 会执行！因为[]是truthy if (arr.length) { console.log('arr has items'); } // 正确判断是否有元素

所以，判断数组/对象是否为空，永远不要用if (arr)，而要用if (arr.length > 0)或if (Object.keys(obj).length > 0)。网络热词里“混杂变量”“双变量空间自相关”等术语，本质也是在提醒：数据的“存在性”和“有效性”是两个维度，不能混为一谈。

2.4number：64位浮点数，精度陷阱无处不在

JS的number类型基于IEEE 754双精度标准，这意味着：

• 它能精确表示的整数范围是-(2^53 - 1)到2^53 - 1（即±9007199254740991）；
• 超出此范围的整数会丢失精度，比如9007199254740992 === 9007199254740993返回true；
• 小数运算存在二进制表示误差：0.1 + 0.2 === 0.3是false，实际值是0.30000000000000004。

解决方案不是回避，而是建立正确预期：

• 处理金钱等高精度场景，用字符串或专门库（如decimal.js）；
• 比较小数，用Math.abs(a - b) < Number.EPSILON替代===；
• 大整数运算，用bigint（见下文）。

2.5string：不可变的字符序列，所有方法都返回新字符串

string是原始类型，因此它是不可变的（immutable）。str.toUpperCase()不会修改原字符串，而是创建并返回一个新字符串。这看似低效，实则是JS设计的精妙之处：不可变性让字符串可以被引擎深度优化（如字符串驻留），也避免了多线程下的竞态问题（虽然JS单线程，但理念一致）。

一个易错点是字符串拼接性能。str += 'new'在循环中会产生大量中间字符串。现代引擎对此有优化，但若需拼接大量内容，Array.join('')或模板字符串仍是更可控的选择。

2.6bigint：解决大整数精度问题的专用类型

当需要处理超过2^53的整数（如密码学、大型ID、天文计算），bigint是唯一选择。声明方式是在数字末尾加n：123n、0xffn。注意：

• bigint不能与number混合运算，10n + 5会报错；
• typeof 123n返回'bigint'，不是'number'；
• JSON不支持bigint，JSON.stringify(123n)会抛错。

2.7symbol：独一无二的标识符，用于创建私有属性

Symbol()每次调用都返回一个全新且唯一的值，即使描述相同：Symbol('foo') !== Symbol('foo')。它的核心用途是：

• 作为对象属性名，避免命名冲突：const key = Symbol('id'); obj[key] = 123;
• 创建“伪私有”属性：for...in和Object.keys()都不会枚举symbol属性，但它并非真正私有（Object.getOwnPropertySymbols()可获取）。

实操心得：在写工具库时，用symbol存储内部状态比用_开头的字符串更可靠。比如一个防抖函数，可以用const timerId = Symbol('debounceTimer')作为实例的私有定时器键，彻底杜绝外部误操作。

3. 引用类型：对象、数组、函数……它们共享同一套内存管理逻辑

如果说原始类型是“独立个体”，那么引用类型就是“共享社区”。所有引用类型（Object、Array、Function、Date、RegExp、Map、Set、Promise、Error等）在JS中都遵循同一套底层机制：它们的值是一个指向内存中对象实例的内部引用（internal reference）。这个引用本身是原始值（可以被复制），但通过它访问到的对象数据是共享的。理解这一点，就能统一解释所有引用类型的共性行为。

3.1 对象（Object）：引用类型的“元类型”，一切皆对象的起点

Object是JS中最基础的引用类型，其他如Array、Date都是它的派生。创建对象的方式有多种，但核心都是生成一个新实例：

// 字面量（最常用） const user = { name: 'Alice', age: 30 }; // 构造函数 const user2 = new Object({ name: 'Bob', age: 25 }); // Object.create() const user3 = Object.create(null); // 创建无原型的对象

关键认知：对象字面量{}每次执行都创建一个新对象。所以{} === {}是false，因为它们是两个不同的实例，持有不同的内部引用。这解释了为什么用对象做 Map 的 key 时，每次{}都是新 key：

const map = new Map(); map.set({}, 'value1'); map.set({}, 'value2'); // 这是另一个key，map.size === 2

3.2 数组（Array）：特殊的对象，索引是字符串化的数字

数组本质上是对象，其“数字索引”会被自动转为字符串属性名。arr[0]等价于arr['0']。这带来两个重要特性：

• 稀疏数组：const arr = []; arr[1000] = 'hello';创建的数组长度为1001，但只有索引1000有值，其余是空槽（empty slot），for...in不会遍历空槽，但forEach会。
• 动态长度：length属性不是只读的。arr.length = 0会清空数组；arr.length = 5会在末尾添加空槽。

踩坑实录：曾有个项目用arr.push(item)往数组里加数据，但忘了初始化arr = []，结果arr是undefined，push报错Cannot read property 'push' of undefined。根源在于没理解“数组是对象实例”，而undefined不是对象，没有push方法。解决方案永远是：声明变量时明确初始值——let list = []或const list = new Array()。

3.3 函数（Function）：一等公民，既是代码又是对象

函数在JS中是特殊的引用类型，它既是可执行的代码块，也是一个对象（有属性、可扩展）。function foo() {}和const foo = function() {}都创建函数对象。关键点：

• 函数名是变量名：function foo() {}中的foo是一个指向函数对象的变量，不是函数的一部分；
• 函数有length属性：表示形参个数，function(a,b,c){}.length === 3；
• 函数对象有prototype属性：用于构造函数模式，这是JS继承的基础。

网络热词里“javascript函数”“oc和javascript互相调用”高频出现，正是因为函数作为“可传递、可存储、可返回”的一等公民，是JS实现回调、高阶函数、模块化的核心载体。

3.4 其他内置引用类型：各司其职，但共享引用语义

• Date：new Date()创建日期对象，getTime()返回毫秒数（原始类型），toString()返回字符串。注意：date1 === date2永远为false，即使时间相同，因为它们是不同实例。
• RegExp：正则表达式对象，/abc/g是字面量，new RegExp('abc', 'g')是构造函数。全局正则有lastIndex属性，多次执行会改变它，这是状态共享的典型例子。
• Map/Set：ES6引入的集合类型，比普通对象更适合存储键值对（Map支持任意类型key）和去重（Set）。它们的size属性是只读的，clear()方法会清空所有条目——这正是引用类型“共享状态”的体现：map1.clear()只影响map1，因为map1和map2持有不同的内部引用。

实操心得：当需要频繁增删键值对时，优先用Map而非普通对象。因为Map的has()、get()、set()时间复杂度是O(1)，而对象的属性访问虽快，但Object.keys()等操作是O(n)，且无法保证插入顺序（ES2015+已保证，但Map更明确）。

4. 引入JavaScript的三种方式：从<script>标签到模块化，选对方式事半功倍

代码写好了，怎么让它在浏览器里跑起来？引入方式看似简单，却是影响项目结构、加载性能、依赖管理的根基。网络热词里“hbuilder配置html、css、javascript”“css样式引入方式”“头歌css样式引入方式”反复出现，说明开发者对“如何把资源接入页面”这一基础动作极为关注。JS的引入方式主要有三种，它们不是简单的“替代关系”，而是适应不同场景的演进方案。

4.1 内联脚本（Inline Script）：最直接，也最容易失控

在HTML中直接写<script>标签：

<!DOCTYPE html> <html> <head> <title>内联示例</title> </head> <body> <script> console.log('Hello from inline script!'); let count = 0; function increment() { count++; console.log(count); } </script> </body> </html>

优点：简单粗暴，无需额外文件，适合极小的演示或调试。
缺点致命：

• 污染全局作用域：所有变量、函数都成为window的属性，极易命名冲突；
• 无法缓存：每次HTML加载都要重新下载脚本，浪费带宽；
• 阻塞渲染：浏览器解析HTML时遇到<script>会暂停DOM构建，直到脚本下载、解析、执行完毕（除非加async或defer）。

提示：现代项目中，内联脚本仅限于极少量初始化代码（如埋点SDK的加载器），或服务端渲染（SSR）注入的初始状态。绝不用它写业务逻辑。

4.2 外部脚本（External Script）：工程化的第一步

将JS代码写在.js文件中，通过<script src="path/to/script.js">引入：

<script src="./main.js"></script>

这是最主流的方式，但细节决定成败。关键参数有三个：

• async：异步下载，下载完成后立即执行，不保证执行顺序。适用于互不依赖的第三方脚本（如统计代码、广告）。
• defer：异步下载，但等到DOM解析完成（DOMContentLoaded事件前）才按顺序执行。适用于需要操作DOM的主业务脚本。
• 无参数（默认）：同步下载并执行，阻塞HTML解析。应避免。

执行顺序对比表：

实操心得：在HBuilder或VSCode中配置HTML模板时，养成习惯：主JS文件一律用<script defer src="main.js">，第三方脚本用<script async src="analytics.js">。这样既能保证DOM可用，又能最大化并行加载。

4.3 ES模块（ES Modules）：现代前端的基石，解决依赖与作用域难题

ES6引入的模块系统（import/export）是当前最佳实践。它要求：

• 文件以.mjs结尾，或HTML中<script type="module">；
• 模块代码默认在严格模式下运行；
• 模块作用域隔离，变量不会泄漏到全局；
• 支持静态分析，便于Tree-shaking（移除未使用代码）。

// math.js export function add(a, b) { return a + b; } export const PI = 3.14159; // main.js import { add, PI } from './math.js'; console.log(add(2, 3), PI); // 5 3.14159

HTML中引入：

<script type="module" src="./main.js"></script> <!-- 或 --> <script type="module"> import { add } from './math.js'; console.log(add(1, 1)); </script>

优势显著：

• 显式依赖：import语句清晰声明了模块依赖，便于维护和工具分析；
• 作用域安全：每个模块是独立作用域，var/let/const都不会污染全局；
• 天然支持异步加载：import()函数可动态导入，实现代码分割（Code Splitting）。

踩坑实录：新手常犯的错误是忘记type="module"，导致浏览器将模块语法当作普通JS执行，报错Unexpected token 'export'。另一个坑是路径问题：模块路径必须是相对路径（./或../）或绝对路径（/），不能是裸路径（math.js）。HBuilder中若提示“找不到模块”，先检查路径是否正确，再确认文件扩展名是否为.js（现代浏览器支持.js作为模块）。

5. 变量声明：var、let、const的战争，以及作用域的真相

变量是程序的基石，但JS的变量声明机制曾是最大的混乱源。var、let、const三者表面相似，实则在作用域（Scope）、提升（Hoisting）、重复声明三个维度有本质区别。网络热词里“python变量”“c语言变量的类型转换”“comsol塑性变形变量”等，都在强调：变量的生命周期和可见范围，是任何编程语言的核心契约。JS的演变，就是不断收紧这个契约的过程。

5.1var：函数作用域的“老古董”，为何还在用？

var声明的变量具有函数作用域和变量提升（Hoisting）特性：

console.log(a); // undefined（不是ReferenceError！） var a = 10; // 等价于： // var a; // 声明被提升 // console.log(a); // undefined // a = 10; // 赋值留在原地

在函数内：

function foo() { if (false) { var x = 100; // 即使条件为false，x仍被声明（提升到函数顶部） } console.log(x); // undefined，因为x已声明但未赋值 }

var的问题在于：提升导致变量在声明前可访问（值为undefined），容易引发难以追踪的bug；函数作用域让块级逻辑（如if、for）内的变量泄露到整个函数。

5.2let和const：块级作用域的救星，ES6的标配

let和const是ES6引入的，它们：

• 具有块级作用域（Block Scope）：只在{}包裹的代码块内有效；
• 存在暂时性死区（Temporal Dead Zone, TDZ）：在声明语句之前访问会报ReferenceError，而非undefined；
• 不允许在同一作用域内重复声明。

if (true) { let blockVar = 'inside'; const blockConst = 'also inside'; console.log(blockVar); // 'inside' } console.log(blockVar); // ReferenceError: blockVar is not defined

let和const的核心区别在于赋值限制：

• const声明的变量不能重新赋值，但如果是对象，其属性可以修改；
• let声明的变量可以重新赋值。

const obj = { name: 'Alice' }; obj.name = 'Bob'; // ✅ 允许，修改对象属性 obj = { name: 'Charlie' }; // ❌ 报错，不能重新赋值obj变量 let arr = [1, 2]; arr = [3, 4]; // ✅ 允许 arr.push(5); // ✅ 允许，修改数组内容

实操心得：我的团队规范是：默认用const，只有确定需要重新赋值时才用let。这样能强制思考变量的不变性，减少意外修改。比如循环计数器for (let i = 0; i < 10; i++)必须用let，因为i++是重新赋值；而API URLconst API_URL = 'https://api.example.com'用const，确保不会被误改。

5.3 作用域链：变量查找的“寻宝地图”

理解变量声明，必须理解JS的作用域链（Scope Chain）。当访问一个变量时，JS引擎会：

1. 先在当前作用域（如函数体、块）查找；
2. 找不到，就向上一级作用域（外层函数）查找；
3. 一直找到全局作用域（window或globalThis）；
4. 还找不到，则抛出ReferenceError。

const globalVar = 'I am global'; function outer() { const outerVar = 'I am outer'; function inner() { const innerVar = 'I am inner'; console.log(innerVar); // 'I am inner'（当前作用域） console.log(outerVar); // 'I am outer'（外层作用域） console.log(globalVar); // 'I am global'（全局作用域） } inner(); } outer();

这个链条是闭包（Closure）的基础。闭包就是函数与其词法作用域的组合。inner函数记住了outerVar和globalVar的位置，即使outer执行结束，inner仍能访问它们。

提示：网络热词里“redis数据类型”“pandas数据类型转换”等，本质也是在处理不同作用域的数据流转。JS的作用域链是静态的（定义时确定），而Python的LEGB规则、C的块作用域，都是为了解决同一问题：变量在哪里定义、在哪里可见、在哪里有效。

6. 类型检测与转换：typeof、instanceof、Object.prototype.toString.call()的实战选择

写JS时，经常要判断一个值是什么类型，以便做不同处理。但JS的类型检测工具各有局限，选错会导致逻辑错误。网络热词里“数据类型强制转换”“javascript运行时报错”“vscode高亮c++未声明的变量”等，都指向一个核心痛点：如何准确、安全地识别数据类型。

6.1typeof：原始类型的“速查表”，引用类型的“失语者”

typeof是最常用的检测操作符，但它对引用类型“撒谎”：

typeof 42; // 'number' typeof 'hello'; // 'string' typeof true; // 'boolean' typeof undefined; // 'undefined' typeof function(){}; // 'function' typeof null; // 'object' ← 历史bug！ typeof {}; // 'object' typeof []; // 'object' typeof new Date(); // 'object' typeof /regex/; // 'object'

typeof的适用场景非常明确：只用于检测原始类型和函数。检测null时，必须单独用value === null；检测数组、日期等，typeof无能为力。

6.2instanceof：检测对象的“出身”，依赖原型链

instanceof用于判断一个对象是否是某个构造函数的实例：

[] instanceof Array; // true new Date() instanceof Date; // true {} instanceof Object; // true（所有对象都继承自Object）

但它有严重缺陷：

• 跨iframe失效：iframe中的数组arr instanceof Array会返回false，因为不同iframe有不同的Array构造函数；
• 无法检测原始类型：42 instanceof Number是false（42是原始值，不是Number对象）。

6.3Object.prototype.toString.call()：最可靠的“全科医生”

这是检测类型的终极方案。Object.prototype.toString方法被所有对象继承，调用时会返回[object Type]格式的字符串：

Object.prototype.toString.call(42); // '[object Number]' Object.prototype.toString.call('hello'); // '[object String]' Object.prototype.toString.call([]); // '[object Array]' Object.prototype.toString.call({}); // '[object Object]' Object.prototype.toString.call(new Date()); // '[object Date]' Object.prototype.toString.call(null); // '[object Null]' Object.prototype.toString.call(undefined); // '[object Undefined]'

封装成工具函数：

function getType(value) { return Object.prototype.toString.call(value).slice(8, -1); } getType([]); // 'Array' getType(/regex/); // 'RegExp'

实操心得：在写通用工具函数（如深拷贝、类型校验）时，必须用Object.prototype.toString.call()。比如一个isArray函数，如果只用typeof arr === 'object' && arr.constructor === Array，在跨iframe场景就会失败。而getType(arr) === 'Array'百分百可靠。

7. 原始类型与引用类型的实战避坑指南：从“为什么改了别人”到“如何安全复制”

理论懂了，代码还是出错？因为真实世界比概念更复杂。这一节不讲原理，只列真实项目中高频出现的坑，以及我验证过的解决方案。

7.1 坑1：函数参数修改了外部对象——如何避免“意外共享”

场景：你写了一个函数，想修改传入对象的某个属性，但不希望影响原对象。

function updateName(user, newName) { user.name = newName; // 直接修改了原user！ } const alice = { name: 'Alice' }; updateName(alice, 'Bob'); console.log(alice.name); // 'Bob' —— 不是你想要的！

解决方案：创建副本

• 浅拷贝（Shallow Copy）：只复制第一层属性，嵌套对象仍共享。

  // 展开运算符（推荐） function updateName(user, newName) { const newUser = { ...user, name: newName }; return newUser; } // Object.assign() const newUser = Object.assign({}, user, { name: newName });

• 深拷贝（Deep Copy）：递归复制所有层级。简单场景用JSON.parse(JSON.stringify(obj))，但会丢失函数、undefined、Date等。

  // 使用structuredClone（现代浏览器） const deepCopy = structuredClone(originalObj); // 或用lodash的cloneDeep

经验：90%的场景，浅拷贝够用。深拷贝性能开销大，只在必要时用。判断标准：对象是否有多层嵌套，且你确定需要完全隔离。

7.2 坑2：数组操作“原地修改” vs “返回新数组”——混淆导致状态污染

JS数组方法分为两类：

• 原地修改（Mutating）：push()、pop()、shift()、unshift()、splice()、sort()、reverse()；
• 返回新数组（Non-mutating）：concat()、slice()、filter()、map()、flatMap()。

错误用法：

const original = [1, 2, 3]; const doubled = original.map(x => x * 2); // ✅ 返回新数组 console.log(original); // [1, 2, 3] —— 未变 original.push(4); // ❌ 原地修改，original变成[1,2,3,4] console.log(doubled); // [2,4,6] —— 但original已变，后续逻辑可能出错

解决方案：坚持函数式编程原则

• 优先使用map、filter、reduce等返回新数组的方法；
• 如果必须用push，先const newArray = [...original]