JavaScript数组创建

JavaScript数组创建

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

数组基础

数组通过索引（从0开始的整数）访问元素，其长度（元素数量）可通过length属性动态获取。例如：

let fruits = ["Apple", "Banana"];
console.log(fruits[0]); // 输出: "Apple"
console.log(fruits.length); // 输出: 2

创建数组的方法

1. 数组字面量（最常用）

直接使用方括号[]定义元素：

let emptyArray = [];
let numbers = [1, 2, 3, 4];
let mixed = [1, "text", true, { name: "Alice" }];

2. Array构造函数

通过new Array()创建，但需注意参数差异：

let arr1 = new Array(); // 空数组
let arr2 = new Array(5); // 长度为5的空槽数组（非真实元素）
let arr3 = new Array(1, 2, 3); // 等价于 [1, 2, 3]

3. Array.of()

解决构造函数歧义问题，参数直接作为元素：

let arr = Array.of(3); // [3]
let arrMulti = Array.of(1, "a", false); // [1, "a", false]

4. Array.from()

从类数组对象或可迭代对象创建数组：

// 字符串转字符数组
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]

5. 使用扩展运算符（ES6）

合并或复制现有数组：

let original = [1, 2];
let copied = [...original]; // [1, 2]
let combined = [...original, 3, 4]; // [1, 2, 3, 4]

特殊数组创建技巧

生成数值序列

利用Array.from()的映射功能：

let sequence = Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]

创建多维数组

通过嵌套数组实现：

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(matrix[1][2]); // 输出: 6

实际应用案例

场景：动态生成下拉菜单选项

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);

性能考虑

不同创建方法的性能比较（相对值）

方法	适用场景	备注
字面量 []	已知元素时	最快
Array(n)	预分配空间	空槽需后续填充
Array.from()	转换迭代对象	功能最灵活

常见问题

空槽数组 vs 含undefined的数组

flowchart LR A[new Array(3)] --> B[空槽: , , ] C[Array.from({length:3})] --> D[含undefined: undefined, undefined, undefined]

空槽数组在部分方法（如map()）中会被跳过，而显式undefined则会被处理。

判断数组类型

优先使用Array.isArray()而非typeof：

console.log(Array.isArray([1, 2])); // true
console.log(typeof [1, 2]); // "object"（不准确）

总结

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