数组基础

数组是什么

数组是JavaScript中最基础的数据结构之一，用于存储有序的元素集合。每个元素都有一个数字索引，从0开始计数。数组可以包含任意类型的值，甚至混合不同类型。

// 创建数组的几种方式
const arr1 = [1, 2, 3];  // 数组字面量
const arr2 = new Array(1, 2, 3);  // Array构造函数
const arr3 = Array.of(1, 2, 3);  // ES6 Array.of方法

数组的基本操作

访问元素

使用方括号语法通过索引访问数组元素：

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

修改元素

直接通过索引赋值可以修改数组元素：

fruits[1] = 'pear';
console.log(fruits); // ['apple', 'pear', 'orange']

获取数组长度

使用length属性获取数组元素数量：

console.log(fruits.length); // 3

数组的常用方法

添加/删除元素

// 末尾添加
fruits.push('grape'); 
// 开头添加
fruits.unshift('kiwi');
// 末尾删除
fruits.pop();
// 开头删除
fruits.shift();

合并数组

concat方法可以合并多个数组：

const moreFruits = ['melon', 'peach'];
const allFruits = fruits.concat(moreFruits);

查找元素

// 查找索引
const index = fruits.indexOf('banana');
// 检查是否包含
const hasApple = fruits.includes('apple');

数组遍历

for循环

最基本的遍历方式：

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

for...of循环

ES6引入的更简洁的语法：

for (const fruit of fruits) {
  console.log(fruit);
}

forEach方法

数组自带的迭代方法：

fruits.forEach(function(fruit, index) {
  console.log(index, fruit);
});

数组转换方法

map方法

创建一个新数组，其结果是该数组中的每个元素调用提供的函数后的返回值：

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
// doubled: [2, 4, 6]

filter方法

创建一个新数组，包含通过测试的所有元素：

const evenNumbers = numbers.filter(num => num % 2 === 0);
// evenNumbers: [2]

reduce方法

对数组中的每个元素执行一个reducer函数，将其结果汇总为单个返回值：

const sum = numbers.reduce((total, num) => total + num, 0);
// sum: 6

多维数组

JavaScript中的数组可以包含其他数组，形成多维数组：

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 访问二维数组元素
console.log(matrix[1][2]); // 6

数组解构

ES6引入的解构赋值语法可以方便地从数组提取值：

const [first, second] = fruits;
console.log(first); // 'apple'
console.log(second); // 'banana'

// 跳过某些元素
const [,,third] = fruits;
console.log(third); // 'orange'

扩展运算符

ES6的扩展运算符可以简化数组操作：

// 复制数组
const fruitsCopy = [...fruits];
// 合并数组
const combined = [...fruits, ...moreFruits];
// 作为函数参数
Math.max(...numbers);

类型化数组

JavaScript提供了处理二进制数据的类型化数组：

// 创建一个8字节的缓冲区
const buffer = new ArrayBuffer(8);
// 创建一个视图，将缓冲区视为32位整数数组
const int32View = new Int32Array(buffer);

数组的性能考虑

对于大型数组，某些操作可能影响性能：

// 在数组开头插入元素会导致所有元素移动
fruits.unshift('strawberry'); // 性能较差

// 使用索引直接赋值更快
fruits[fruits.length] = 'blueberry'; // 性能较好

数组与字符串转换

// 数组转字符串
const str = fruits.join(', ');
// 字符串转数组
const strToArr = 'a,b,c'.split(',');

数组的静态方法

ES6新增的Array静态方法：

// 检查是否为数组
Array.isArray(fruits);
// 从类数组对象创建数组
Array.from('hello');
// 创建包含可变数量参数的数组
Array.of(1, 2, 3);

数组的迭代器方法

ES6为数组新增的迭代器相关方法：

// 获取键的迭代器
for (const key of fruits.keys()) {
  console.log(key); // 0, 1, 2
}
// 获取值的迭代器
for (const value of fruits.values()) {
  console.log(value); // 'apple', 'banana', 'orange'
}
// 获取键值对的迭代器
for (const [index, value] of fruits.entries()) {
  console.log(index, value);
}

数组的查找方法

ES6新增的查找方法：

// 查找第一个符合条件的元素
const found = fruits.find(fruit => fruit.length > 5);
// 查找第一个符合条件的索引
const foundIndex = fruits.findIndex(fruit => fruit.length > 5);

数组的填充和包含

// 填充数组
const filled = new Array(3).fill(0); // [0, 0, 0]
// 检查是否包含某元素
const includesBanana = fruits.includes('banana');

数组的扁平化

ES2019新增的扁平化方法：

const nested = [1, [2, [3]]];
// 扁平化一层
const flat1 = nested.flat(); // [1, 2, [3]]
// 完全扁平化
const flatInf = nested.flat(Infinity); // [1, 2, 3]

数组排序

sort方法可以对数组进行排序：

const unsorted = [3, 1, 4, 2];
// 默认排序（按字符串）
unsorted.sort(); // [1, 2, 3, 4]
// 自定义排序
unsorted.sort((a, b) => b - a); // [4, 3, 2, 1]

数组与对象的关系

虽然数组是特殊类型的对象，但有一些重要区别：

typeof []; // 'object'
Array.isArray([]); // true

// 数组有自动维护的length属性
const arr = [];
arr[100] = 'value';
console.log(arr.length); // 101