创建数组首选字面量[],安全直观;new Array()易出错:单数字参数创建空数组,多参数才等价于字面量。

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包
如何创建数组:字面量最常用,构造函数要小心
直接用方括号 [] 创建是最安全、最直观的方式。比如 const arr = [1, 2, 3]。
而 new Array() 构造函数行为容易出错:
- 传一个数字参数,如
new Array(5),会创建长度为 5 的空数组(arr.length === 5,但所有索引都未定义),不是包含五个 undefined 的数组
- 传多个参数,如
new Array(1, 2, 3),才等价于 [1, 2, 3]
- 在 JSON 解析或函数参数不确定时,
[] 更稳定,不会因单个数字触发歧义
修改原数组 vs 返回新数组:必须分清这两类方法
JavaScript 数组方法分两类,混淆会导致意外副作用:
- **会修改原数组**:
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- **不修改原数组,返回新数组**:
map()、filter()、slice()、concat()、flat()、toSorted()(ES2024)、toReversed()
常见错误:对 props 或 state 直接调用 sort(),导致原始数据被改;应该用 toSorted() 或先 slice() 再 sort()。
const original = [3, 1, 4];
original.sort(); // ❌ 原数组被修改
const sorted = [...original].sort(); // ✅ 安全
// 或
const sorted2 = original.toSorted(); // ✅ ES2024+,更语义化
遍历与查找:forEach/map/filter/find 的核心区别
它们都接收回调函数,但用途和返回值完全不同:
-
forEach():只执行,无返回值(返回 undefined),不能中断(break 无效)
-
map():返回一个新数组,长度与原数组一致,每个元素是回调的返回值
-
filter():返回新数组,只包含回调返回真值的元素
-
find():返回第一个满足条件的元素(或 undefined),适合查单个对象
-
findIndex():返回第一个满足条件的索引(或 -1),适合后续修改
注意:includes() 和 indexOf() 查找基本类型没问题,但对象比较要用 find() + 深比较逻辑,因为 [{a:1}] .includes({a:1}) 是 false。
扁平化与合并:flat() 和 concat() 不是等价替代
concat() 只浅合并一层,且对嵌套数组不做处理:
const a = [1, 2];
const b = [3, [4, 5]];
const merged = a.concat(b); // [1, 2, 3, [4, 5]]
flat() 默认也只扁平一层,但可指定深度:
const nested = [1, [2, [3, [4]]]];
nested.flat(); // [1, 2, [3, [4]]]
nested.flat(2); // [1, 2, 3, [4]]
nested.flat(Infinity); // [1, 2, 3, 4]
如果要合并并完全扁平,组合使用更可靠:[...a, ...b].flat(Infinity) 或 [].concat(...arr).flat()(需确保内部也是数组)。
实际写业务时,嵌套层级不固定就别硬靠 flat(1),先判断结构再处理更稳妥。
new Array(5),会创建长度为 5 的空数组(arr.length === 5,但所有索引都未定义),不是包含五个 undefined 的数组new Array(1, 2, 3),才等价于 [1, 2, 3]
[] 更稳定,不会因单个数字触发歧义- **会修改原数组**:
push()、pop()、shift()、unshift()、splice()、sort()、reverse() - **不修改原数组,返回新数组**:
map()、filter()、slice()、concat()、flat()、toSorted()(ES2024)、toReversed()
sort(),导致原始数据被改;应该用 toSorted() 或先 slice() 再 sort()。
const original = [3, 1, 4]; original.sort(); // ❌ 原数组被修改 const sorted = [...original].sort(); // ✅ 安全 // 或 const sorted2 = original.toSorted(); // ✅ ES2024+,更语义化
遍历与查找:forEach/map/filter/find 的核心区别
它们都接收回调函数,但用途和返回值完全不同:
-
forEach():只执行,无返回值(返回 undefined),不能中断(break 无效)
-
map():返回一个新数组,长度与原数组一致,每个元素是回调的返回值
-
filter():返回新数组,只包含回调返回真值的元素
-
find():返回第一个满足条件的元素(或 undefined),适合查单个对象
-
findIndex():返回第一个满足条件的索引(或 -1),适合后续修改
注意:includes() 和 indexOf() 查找基本类型没问题,但对象比较要用 find() + 深比较逻辑,因为 [{a:1}] .includes({a:1}) 是 false。
扁平化与合并:flat() 和 concat() 不是等价替代
concat() 只浅合并一层,且对嵌套数组不做处理:
const a = [1, 2];
const b = [3, [4, 5]];
const merged = a.concat(b); // [1, 2, 3, [4, 5]]
flat() 默认也只扁平一层,但可指定深度:
const nested = [1, [2, [3, [4]]]];
nested.flat(); // [1, 2, [3, [4]]]
nested.flat(2); // [1, 2, 3, [4]]
nested.flat(Infinity); // [1, 2, 3, 4]
如果要合并并完全扁平,组合使用更可靠:[...a, ...b].flat(Infinity) 或 [].concat(...arr).flat()(需确保内部也是数组)。
实际写业务时,嵌套层级不固定就别硬靠 flat(1),先判断结构再处理更稳妥。
forEach():只执行,无返回值(返回 undefined),不能中断(break 无效)map():返回一个新数组,长度与原数组一致,每个元素是回调的返回值filter():返回新数组,只包含回调返回真值的元素find():返回第一个满足条件的元素(或 undefined),适合查单个对象findIndex():返回第一个满足条件的索引(或 -1),适合后续修改concat() 只浅合并一层,且对嵌套数组不做处理:
const a = [1, 2]; const b = [3, [4, 5]]; const merged = a.concat(b); // [1, 2, 3, [4, 5]]
flat() 默认也只扁平一层,但可指定深度:
const nested = [1, [2, [3, [4]]]]; nested.flat(); // [1, 2, [3, [4]]] nested.flat(2); // [1, 2, 3, [4]] nested.flat(Infinity); // [1, 2, 3, 4]如果要合并并完全扁平,组合使用更可靠:
[...a, ...b].flat(Infinity) 或 [].concat(...arr).flat()(需确保内部也是数组)。
实际写业务时,嵌套层级不固定就别硬靠 flat(1),先判断结构再处理更稳妥。









