编辑“︁JavaScript数组创建”︁

{{Note|本节内容适用于JavaScript初学者及需要巩固数组基础知识的开发者。}}

= JavaScript数组创建 =

'''JavaScript数组'''是一种用于存储多个值的有序集合，每个值称为元素，元素可以是任意数据类型（数字、字符串、对象，甚至其他数组）。数组是JavaScript中最常用的数据结构之一，本节将详细介绍创建数组的多种方法。

== 数组基础 ==
数组通过索引（从0开始的整数）访问元素，其长度（元素数量）可通过<code>length</code>属性动态获取。例如：
<syntaxhighlight lang="javascript">
let fruits = ["Apple", "Banana"];
console.log(fruits[0]); // 输出: "Apple"
console.log(fruits.length); // 输出: 2
</syntaxhighlight>

== 创建数组的方法 ==
=== 1. 数组字面量（最常用） ===
直接使用方括号<code>[]</code>定义元素：
<syntaxhighlight lang="javascript">
let emptyArray = [];
let numbers = [1, 2, 3, 4];
let mixed = [1, "text", true, { name: "Alice" }];
</syntaxhighlight>

=== 2. Array构造函数 ===
通过<code>new Array()</code>创建，但需注意参数差异：
<syntaxhighlight lang="javascript">
let arr1 = new Array(); // 空数组
let arr2 = new Array(5); // 长度为5的空槽数组（非真实元素）
let arr3 = new Array(1, 2, 3); // 等价于 [1, 2, 3]
</syntaxhighlight>
{{Warning|避免单参数为数字时的歧义：<code>new Array(3)</code>创建的是长度为3的空槽数组，而非包含元素3的数组。}}

=== 3. Array.of() ===
解决构造函数歧义问题，参数直接作为元素：
<syntaxhighlight lang="javascript">
let arr = Array.of(3); // [3]
let arrMulti = Array.of(1, "a", false); // [1, "a", false]
</syntaxhighlight>

=== 4. Array.from() ===
从类数组对象或可迭代对象创建数组：
<syntaxhighlight lang="javascript">
// 字符串转字符数组
let chars = Array.from("hello"); // ["h", "e", "l", "l", "o"]

// 转换Map的键
let map = new Map([[1, "a"], [2, "b"]]);
let keys = Array.from(map.keys()); // [1, 2]
</syntaxhighlight>

=== 5. 使用扩展运算符（ES6） ===
合并或复制现有数组：
<syntaxhighlight lang="javascript">
let original = [1, 2];
let copied = [...original]; // [1, 2]
let combined = [...original, 3, 4]; // [1, 2, 3, 4]
</syntaxhighlight>

== 特殊数组创建技巧 ==
=== 生成数值序列 ===
利用<code>Array.from()</code>的映射功能：
<syntaxhighlight lang="javascript">
let sequence = Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]
</syntaxhighlight>

=== 创建多维数组 ===
通过嵌套数组实现：
<syntaxhighlight lang="javascript">
let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(matrix[1][2]); // 输出: 6
</syntaxhighlight>

== 实际应用案例 ==
'''场景：动态生成下拉菜单选项'''
<syntaxhighlight lang="javascript">
const colors = ["Red", "Green", "Blue"];
const select = document.createElement("select");

colors.forEach(color => {
  let option = document.createElement("option");
  option.value = color.toLowerCase();
  option.textContent = color;
  select.appendChild(option);
});

document.body.appendChild(select);
</syntaxhighlight>

== 性能考虑 ==
{| class="wikitable"
|+ 不同创建方法的性能比较（相对值）
! 方法 !! 适用场景 !! 备注
|-
| 字面量 <code>[]</code> || 已知元素时 || 最快
|-
| <code>Array(n)</code> || 预分配空间 || 空槽需后续填充
|-
| <code>Array.from()</code> || 转换迭代对象 || 功能最灵活
|}

== 常见问题 ==
=== 空槽数组 vs 含undefined的数组 ===
<mermaid>
flowchart LR
    A[new Array(3)] --> B[空槽: , , ]
    C[Array.from({length:3})] --> D[含undefined: undefined, undefined, undefined]
</mermaid>
空槽数组在部分方法（如<code>map()</code>）中会被跳过，而显式undefined则会被处理。

=== 判断数组类型 ===
优先使用<code>Array.isArray()</code>而非<code>typeof</code>：
<syntaxhighlight lang="javascript">
console.log(Array.isArray([1, 2])); // true
console.log(typeof [1, 2]); // "object"（不准确）
</syntaxhighlight>

== 总结 ==
* 优先使用字面量法<code>[]</code>创建数组
* 需要动态构建时考虑<code>Array.from()</code>或扩展运算符
* 注意构造函数<code>new Array(n)</code>的特殊行为
* 多维数组通过嵌套实现

{{Exercise|尝试用不同方法创建包含字母A-Z的数组，并比较代码可读性。}}

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript数组]]