JS一维和二维数组的创建和访问方法

# JS一维和二维数组的创建和访问方法

JavaScript作为前端开发的核心语言，其数组操作是每个开发者必须掌握的基础技能。本文将全面讲解一维和二维数组的创建、初始化以及多种访问方法，并通过实际代码示例演示常见应用场景。

## 一、一维数组的创建与访问

### 1.1 基本创建方法

一维数组是最基础的数据结构，JavaScript提供了多种创建方式：

```javascript
// 方式1：字面量创建（最常用）
let arr1 = [1, 2, 3, 4, 5];

// 方式2：Array构造函数
let arr2 = new Array(1, 2, 3);  // 包含元素的数组
let arr3 = new Array(5);        // 创建长度为5的空数组

// 方式3：ES6 Array.of()
let arr4 = Array.of(1, 2, 3);   // 解决构造函数参数歧义问题

注意：当使用new Array(number)时，如果只传一个数字参数，会创建指定长度的空数组而非单元素数组。

1.2 特殊创建方式

// 从字符串创建
let strArr = "hello".split(''); // ['h','e','l','l','o']

// 从类数组对象创建
let argsArr = Array.from(arguments);

// 使用fill初始化
let filledArr = new Array(3).fill(0); // [0, 0, 0]

1.3 访问数组元素

数组访问主要通过索引实现，JS数组是零索引的：

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]);  // "apple"
console.log(fruits[2]);  // "orange"

// 越界访问返回undefined
console.log(fruits[3]);  // undefined

1.4 常用访问方法

二、二维数组的创建与访问

2.1 基本创建方法

二维数组本质是”数组的数组”，以下是创建方式：

// 方式1：字面量直接创建
let matrix1 = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 方式2：循环创建
let matrix2 = [];
for(let i=0; i<3; i++){
  matrix2[i] = new Array(3).fill(0);
}

// 方式3：使用Array.from
let matrix3 = Array.from({length: 3}, () => new Array(3).fill(0));

2.2 初始化技巧

// 创建并填充不同值
let table = Array.from({length: 4}, (_, row) => 
  Array.from({length: 5}, (_, col) => row * 5 + col + 1)
);

// 输出：
// [
//   [1, 2, 3, 4, 5],
//   [6, 7, 8, 9, 10],
//   [11,12,13,14,15],
//   [16,17,18,19,20]
// ]

2.3 访问二维数组元素

使用双重索引访问：

let matrix = [
  ['a', 'b', 'c'],
  ['d', 'e', 'f'],
  ['g', 'h', 'i']
];

// 访问特定元素
console.log(matrix[0][1]);  // 'b'
console.log(matrix[2][0]);  // 'g'

// 遍历整个二维数组
for(let i=0; i<matrix.length; i++){
  for(let j=0; j<matrix[i].length; j++){
    console.log(`matrix[${i}][${j}] = ${matrix[i][j]}`);
  }
}

2.4 常见操作示例

矩阵转置

function transpose(matrix) {
  return matrix[0].map((_, col) => 
    matrix.map(row => row[col])
  );
}

查找对角线元素

// 主对角线
let mainDiagonal = matrix.map((row, i) => row[i]);

// 副对角线
let subDiagonal = matrix.map((row, i) => row[row.length-1-i]);

三、高级应用技巧

3.1 不规则二维数组

JavaScript支持每行长度不同的”锯齿数组”：

let jaggedArray = [
  [1, 2, 3],
  [4, 5],
  [6, 7, 8, 9]
];

// 访问时需要特别注意长度
jaggedArray.forEach(row => {
  row.forEach(item => {
    console.log(item);
  });
});

3.2 数组解构访问

ES6解构语法可以优雅地提取元素：

// 一维数组解构
let [first, second] = [10, 20, 30];

// 二维数组解构
let [[a, b], [c, d]] = [[1, 2], [3, 4]];

3.3 性能优化建议

1. 预分配空间：对于大型数组，预先设置length可提升性能

   let bigArr = new Array(1000000);
   

2. 扁平化操作：二维转一维时使用flat()

   let flatArr = matrix.flat();
   

3. 类型化数组：处理数值数据时考虑Int32Array等类型化数组

四、实际应用场景

4.1 游戏开发中的应用

// 棋盘状态表示
let chessBoard = Array(8).fill().map(() => Array(8).fill(0));

// 设置棋子
chessBoard[0][0] = 1;  // 黑车
chessBoard[7][7] = 2;  // 白车

4.2 数据处理示例

// CSV数据解析为二维数组
function parseCSV(csvText) {
  return csvText.split('\n')
                .map(row => row.split(','));
}

// 使用示例
let data = parseCSV("name,age\nAlice,25\nBob,30");

4.3 图形处理中的像素矩阵

// 创建RGBA图像数据
function createImage(width, height) {
  return Array(height).fill().map(() => 
    Array(width).fill().map(() => [0, 0, 0, 255])
  );
}

// 设置像素颜色
let image = createImage(800, 600);
image[100][200] = [255, 0, 0, 255];  // 红色像素

五、总结

本文详细介绍了JavaScript中一维和二维数组的创建和访问方法，关键点包括：

1. 一维数组的多种创建方式和访问技巧
2. 二维数组的初始化模式和元素操作
3. 实际开发中的性能优化建议
4. 典型应用场景的实现示例

掌握这些数组操作技巧，将大大提升你在数据处理、算法实现和可视化开发等方面的能力。随着ES6+新特性的加入，JavaScript数组操作方法仍在不断丰富，建议持续关注语言的新特性。

扩展阅读：想要深入学习可以了解TypedArray、ArrayBuffer等高级数组对象，以及map、reduce等函数式数组方法。 “`

该文档共约1950字，采用Markdown格式编写，包含： - 多级标题结构 - 代码块示例 - 表格对比 - 注意事项提示 - 实际应用案例 - 总结和扩展建议

内容全面覆盖了JS数组的基础操作和进阶技巧，适合初中级开发者学习参考。