数组创建与初始化

数组创建与初始化

JavaScript中数组是最常用的数据结构之一，用于存储有序的元素集合。数组的创建和初始化方式多样，灵活运用能大幅提升开发效率。

数组字面量创建

最直接的方式是使用方括号[]语法：

// 空数组
const emptyArr = [];

// 包含初始元素的数组
const fruits = ['apple', 'banana', 'orange'];

// 混合类型数组
const mixed = [1, 'text', true, {name: 'John'}];

Array构造函数创建

通过new Array()可以创建数组，但需要注意特殊行为：

// 创建空数组
const arr1 = new Array();

// 创建包含3个元素的数组
const arr2 = new Array('a', 'b', 'c');

// 创建长度为5的空数组（陷阱！）
const arr3 = new Array(5);
console.log(arr3); // [empty × 5]

当传入单个数字参数时，会创建指定长度的空数组而非包含该数字的数组。

Array.of方法

解决构造函数的歧义问题：

const arr1 = Array.of(5);    // [5]
const arr2 = Array.of(1,2,3); // [1,2,3]

Array.from方法

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

// 从字符串创建
const chars = Array.from('hello'); // ['h','e','l','l','o']

// 从Set创建
const set = new Set([1,2,3]);
const arrFromSet = Array.from(set); // [1,2,3]

// 带映射函数
const squares = Array.from([1,2,3], x => x*x); // [1,4,9]

填充数组的多种方式

创建后初始化数组的常用方法：

fill方法填充

// 创建并填充
const nums = new Array(5).fill(0); // [0,0,0,0,0]

// 部分填充
const arr = [1,2,3,4,5];
arr.fill('a', 1, 3); // [1,'a','a',4,5]

使用map初始化

// 创建序列数组
const seq = Array(5).fill().map((_,i) => i+1); // [1,2,3,4,5]

// 创建对象数组
const users = Array(3).fill().map((_,i) => ({
  id: i+1,
  name: `User${i+1}`
}));

扩展运算符应用

// 合并数组
const arr1 = [1,2];
const arr2 = [3,4];
const combined = [...arr1, ...arr2]; // [1,2,3,4]

// 复制数组
const original = [1,2,3];
const copy = [...original];

多维数组创建

JavaScript通过数组嵌套实现多维数组：

// 二维数组
const matrix = [
  [1,2,3],
  [4,5,6],
  [7,8,9]
];

// 动态创建3x3矩阵
const createMatrix = (size) => {
  return Array(size).fill().map(() => 
    Array(size).fill(0)
  );
};

特殊数组创建技巧

创建连续数字数组

// 使用keys
const range1 = [...Array(5).keys()]; // [0,1,2,3,4]

// 自定义范围
const range = (start, end) => {
  return Array(end - start + 1).fill().map((_, i) => start + i);
};

创建特定模式数组

// 交替模式
const alternate = Array(10).fill().map((_,i) => i%2===0 ? 'even' : 'odd');

// 斐波那契数列
function fibonacci(size) {
  return Array(size).fill().reduce((acc, _,i) => {
    return i<2 ? [...acc, 1] : [...acc, acc[i-1]+acc[i-2]];
  }, []);
}

性能考量

不同创建方式的性能差异：

// 测试填充10万个元素的数组
console.time('fill');
const arr1 = new Array(100000).fill(0);
console.timeEnd('fill');

console.time('push');
const arr2 = [];
for(let i=0; i<100000; i++) arr2.push(0);
console.timeEnd('push');

console.time('map');
const arr3 = Array(100000).fill().map(() => 0);
console.timeEnd('map');

实际应用示例

表格数据初始化

function initTableData(rows, cols) {
  return Array(rows).fill().map((_, row) => 
    Array(cols).fill().map((_, col) => ({
      row,
      col,
      value: `Cell ${row}-${col}`
    }))
  );
}

游戏地图生成

function generateMap(width, height) {
  return Array(height).fill().map(() => 
    Array(width).fill().map(() => 
      Math.random() > 0.3 ? 0 : 1 // 0表示空地，1表示障碍
    )
  );
}

ES6新增的数组创建方式

使用生成器函数

function* generateSequence(start, end) {
  for(let i=start; i<=end; i++) yield i;
}

const sequence = [...generateSequence(1, 5)]; // [1,2,3,4,5]

使用flatMap

const nested = [[1], [2,3], [4]];
const flat = nested.flatMap(x => x); // [1,2,3,4]