JavaScript 数组学习总结

JavaScript 数组学习总结

JavaScript 数组是一种特殊的对象，用于存储有序的数据集合。它是 JavaScript 中最常用的数据结构之一，提供了丰富的内置方法来处理数据。以下是对 JavaScript 数组的全面总结：

一、数组基础

1. 数组的定义与创建

数组可以通过多种方式创建：

javascript

// 1. 数组字面量（最常用）
const fruits = ["苹果", "香蕉", "橙子"];
const mixed = [1, "字符串", true, null, { name: "对象" }];// 2. 使用 Array 构造函数
const numbers = new Array(1, 2, 3, 4, 5);
const emptyArray = new Array(5); // 创建长度为 5 的空数组// 3. Array.of() 方法（ES6）
const arrayOf = Array.of(1, 2, 3); // [1, 2, 3]
const singleElement = Array.of(5); // [5]，区别于 new Array(5)// 4. Array.from() 方法（ES6）- 从类数组或可迭代对象创建数组
const fromString = Array.from("hello"); // ['h', 'e', 'l', 'l', 'o']
const fromSet = Array.from(new Set([1, 2, 2, 3])); // [1, 2, 3]
const fromMap = Array.from(new Map([[1, 'a'], [2, 'b']])); // [[1, 'a'], [2, 'b']]// 使用映射函数
const doubled = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]

2. 数组的基本特性

javascript

// 数组是对象的一种特殊形式
console.log(typeof fruits); // "object"
console.log(Array.isArray(fruits)); // true// 数组长度
console.log(fruits.length); // 3// 访问数组元素
console.log(fruits[0]); // "苹果"
console.log(fruits[fruits.length - 1]); // "橙子"// 修改数组元素
fruits[1] = "葡萄";
console.log(fruits); // ["苹果", "葡萄", "橙子"]// 添加元素
fruits[3] = "西瓜";
console.log(fruits); // ["苹果", "葡萄", "橙子", "西瓜"]// 稀疏数组
const sparse = [];
sparse[10] = 10;
console.log(sparse.length); // 11
console.log(sparse); // [empty × 10, 10]

二、数组方法

1. 修改原数组的方法（破坏性方法）

javascript

// push() - 在数组末尾添加一个或多个元素，并返回新的长度
const length = fruits.push("草莓", "蓝莓");
console.log(fruits); // ["苹果", "葡萄", "橙子", "西瓜", "草莓", "蓝莓"]
console.log(length); // 6// pop() - 移除并返回数组的最后一个元素
const last = fruits.pop();
console.log(fruits); // ["苹果", "葡萄", "橙子", "西瓜", "草莓"]
console.log(last); // "蓝莓"// shift() - 移除并返回数组的第一个元素
const first = fruits.shift();
console.log(fruits); // ["葡萄", "橙子", "西瓜", "草莓"]
console.log(first); // "苹果"// unshift() - 在数组开头添加一个或多个元素，并返回新的长度
const newLength = fruits.unshift("猕猴桃", "菠萝");
console.log(fruits); // ["猕猴桃", "菠萝", "葡萄", "橙子", "西瓜", "草莓"]
console.log(newLength); // 6// splice() - 从数组中添加/删除元素，返回被删除的元素
// splice(start, deleteCount, itemsToAdd)
const removed = fruits.splice(2, 2, "芒果", "荔枝");
console.log(fruits); // ["猕猴桃", "菠萝", "芒果", "荔枝", "西瓜", "草莓"]
console.log(removed); // ["葡萄", "橙子"]// reverse() - 反转数组中元素的顺序
fruits.reverse();
console.log(fruits); // ["草莓", "西瓜", "荔枝", "芒果", "菠萝", "猕猴桃"]// sort() - 对数组元素进行排序（默认按字符串比较）
const numbers = [5, 3, 8, 1, 2];
numbers.sort();
console.log(numbers); // [1, 2, 3, 5, 8]// 自定义排序函数
const people = [{ name: "张三", age: 25 },{ name: "李四", age: 20 },{ name: "王五", age: 30 }
];people.sort((a, b) => a.age - b.age);
console.log(people); // 按年龄升序排列// fill() - 用一个固定值填充数组中从起始索引到终止索引内的全部元素
const filled = [1, 2, 3, 4, 5].fill(0, 2, 4);
console.log(filled); // [1, 2, 0, 0, 5]

2. 返回新数组的方法（非破坏性方法）

javascript

// slice() - 返回数组的一部分浅拷贝
const sliced = fruits.slice(1, 3);
console.log(sliced); // ["西瓜", "荔枝"]
console.log(fruits); // 原数组不变// concat() - 合并多个数组，返回新数组
const moreFruits = ["香蕉", "樱桃"];
const combined = fruits.concat(moreFruits);
console.log(combined); // ["草莓", "西瓜", "荔枝", "芒果", "菠萝", "猕猴桃", "香蕉", "樱桃"]// join() - 将数组元素连接成字符串
const joined = fruits.join(", ");
console.log(joined); // "草莓, 西瓜, 荔枝, 芒果, 菠萝, 猕猴桃"// split() - 字符串方法，将字符串分割成数组
const words = "Hello,World,JavaScript".split(",");
console.log(words); // ["Hello", "World", "JavaScript"]// map() - 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果
const doubled = [1, 2, 3].map(num => num * 2);
console.log(doubled); // [2, 4, 6]// filter() - 创建一个新数组，包含通过所提供函数实现的测试的所有元素
const evenNumbers = [1, 2, 3, 4, 5].filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]// reduce() - 对数组中的每个元素执行一个由您提供的reducer函数，将其结果汇总为单个返回值
const sum = [1, 2, 3, 4, 5].reduce((acc, num) => acc + num, 0);
console.log(sum); // 15// 计算数组中每个元素出现的次数
const countOccurrences = ["a", "b", "a", "c", "b", "a"].reduce((acc, item) => {acc[item] = (acc[item] || 0) + 1;return acc;
}, {});
console.log(countOccurrences); // {a: 3, b: 2, c: 1}// flat() - 创建一个新数组，所有子数组元素递归地连接到该数组中
const nested = [1, [2, [3]]];
const flattened = nested.flat(2); // 深度为 2
console.log(flattened); // [1, 2, 3]// flatMap() - 首先使用映射函数映射每个元素，然后将结果压缩成一个新数组
const sentences = ["Hello world", "I love JavaScript"];
const words = sentences.flatMap(sentence => sentence.split(" "));
console.log(words); // ["Hello", "world", "I", "love", "JavaScript"]

3. 查找和判断方法

javascript

// indexOf() - 返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回-1
const index = fruits.indexOf("芒果");
console.log(index); // 3// lastIndexOf() - 返回指定元素在数组中的最后一个的索引，如果不存在则返回-1
const lastIndex = fruits.lastIndexOf("芒果");
console.log(lastIndex); // 3// includes() - 判断一个数组是否包含一个指定的值
const hasMango = fruits.includes("芒果");
console.log(hasMango); // true// find() - 返回数组中满足提供的测试函数的第一个元素的值
const person = people.find(p => p.age > 20);
console.log(person); // { name: "张三", age: 25 }// findIndex() - 返回数组中满足提供的测试函数的第一个元素的索引
const personIndex = people.findIndex(p => p.age > 20);
console.log(personIndex); // 0// every() - 测试一个数组内的所有元素是否都能通过某个指定函数的测试
const allAdults = people.every(p => p.age >= 18);
console.log(allAdults); // true// some() - 测试数组中是不是至少有1个元素通过了被提供的函数测试
const hasYoungPerson = people.some(p => p.age < 25);
console.log(hasYoungPerson); // true

4. 迭代方法

javascript

// forEach() - 对数组的每个元素执行一次提供的函数
fruits.forEach(fruit => {console.log(fruit);
});// for...of 循环（ES6）
for (const fruit of fruits) {console.log(fruit);
}// for...in 循环（不推荐用于数组）
for (const index in fruits) {console.log(fruits[index]);
}

三、数组排序

1. 默认排序

javascript

// 默认按字符串 Unicode 编码排序
const mixed = [10, 1, 2, "10", "2", "a", "A"];
mixed.sort();
console.log(mixed); // ['10', 1, 10, '2', 2, 'A', 'a']

2. 自定义排序

javascript

// 数字排序
const numbers = [5, 3, 8, 1, 2];
numbers.sort((a, b) => a - b); // 升序
console.log(numbers); // [1, 2, 3, 5, 8]numbers.sort((a, b) => b - a); // 降序
console.log(numbers); // [8, 5, 3, 2, 1]// 字符串排序（不区分大小写）
const words = ["banana", "Apple", "cherry"];
words.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
console.log(words); // ["Apple", "banana", "cherry"]// 对象排序
const products = [{ name: "手机", price: 3000 },{ name: "电脑", price: 5000 },{ name: "平板", price: 2000 }
];// 按价格升序
products.sort((a, b) => a.price - b.price);
console.log(products);

四、数组与字符串的转换

1. 数组转字符串

javascript

const arr = ["a", "b", "c"];// join() 方法
const joined = arr.join(); // "a,b,c"
const customJoined = arr.join("-"); // "a-b-c"// toString() 方法
const str = arr.toString(); // "a,b,c"

2. 字符串转数组

javascript

const str = "Hello,World";// split() 方法
const chars = str.split(""); // ["H", "e", "l", "l", "o", ",", "W", "o", "r", "l", "d"]
const words = str.split(","); // ["Hello", "World"]// ES6 扩展运算符
const chars2 = [...str]; // ["H", "e", "l", "l", "o", ",", "W", "o", "r", "l", "d"]

五、数组的高级应用

1. 多维数组

javascript

// 创建二维数组
const matrix = [[1, 2, 3],[4, 5, 6],[7, 8, 9]
];// 访问多维数组元素
console.log(matrix[1][2]); // 6// 二维数组转一维数组
const flattened = matrix.flat(); // [1, 2, 3, 4, 5, 6, 7, 8, 9]// 遍历多维数组
matrix.forEach(row => {row.forEach(cell => {console.log(cell);});
});

2. 数组去重

javascript

// 使用 Set（ES6）
const duplicates = [1, 2, 2, 3, 3, 3];
const unique = [...new Set(duplicates)];
console.log(unique); // [1, 2, 3]// 使用 filter() 方法
const unique2 = duplicates.filter((value, index, self) => {return self.indexOf(value) === index;
});
console.log(unique2); // [1, 2, 3]

3. 数组扁平化

javascript

// 递归实现
function flatten(arr) {return arr.reduce((acc, val) => {return acc.concat(Array.isArray(val) ? flatten(val) : val);}, []);
}const deeplyNested = [1, [2, [3, [4]]]];
console.log(flatten(deeplyNested)); // [1, 2, 3, 4]// 使用 flat() 方法（ES6）
console.log(deeplyNested.flat(Infinity)); // [1, 2, 3, 4]

4. 数组分组

javascript

// 根据条件分组
const numbers = [1, 2, 3, 4, 5, 6];
const grouped = numbers.reduce((acc, num) => {const key = num % 2 === 0 ? "偶数" : "奇数";if (!acc[key]) {acc[key] = [];}acc[key].push(num);return acc;
}, {});console.log(grouped); // {奇数: [1, 3, 5], 偶数: [2, 4, 6]}

5. 数组的交集、并集和差集

javascript

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];// 交集
const intersection = arr1.filter(value => arr2.includes(value));
console.log(intersection); // [3, 4]// 并集
const union = [...new Set([...arr1, ...arr2])];
console.log(union); // [1, 2, 3, 4, 5, 6]// 差集（arr1 中独有的元素）
const difference = arr1.filter(value => !arr2.includes(value));
console.log(difference); // [1, 2]

六、性能考虑

1. 访问元素：数组的随机访问性能非常好，时间复杂度为 O (1)
2. 添加 / 删除元素：
   • 在数组末尾添加 / 删除元素（push/pop）：O (1)
   • 在数组开头添加 / 删除元素（unshift/shift）：O (n)，需要移动所有元素
   • 在数组中间添加 / 删除元素（splice）：O (n)
3. 迭代方法：
   • for 循环通常比 forEach、map 等方法快
   • for...of 循环比 for...in 循环性能更好
4. 大数组操作：处理大数组时，注意内存使用和性能问题
5. 避免稀疏数组：稀疏数组会降低性能

七、注意事项

1. 引用类型：数组是引用类型，赋值和传递时传递的是引用而非副本
2. 深拷贝 vs 浅拷贝：
   • 浅拷贝：slice()、concat()、扩展运算符（...）
   • 深拷贝：可以使用 JSON.parse(JSON.stringify())（但不能处理函数、RegExp 等）
3. 类数组对象：如 arguments、DOM 节点列表等，可以使用 Array.from() 或扩展运算符转换为数组
4. 数组空位：避免在数组中使用空位，会导致意外行为
5. 遍历方法的返回值：
   • forEach：返回 undefined
   • map、filter、reduce 等：返回新数组或值

JavaScript 数组是一种功能强大且灵活的数据结构，掌握数组的各种方法和应用场景对于编写高效的 JavaScript 代码至关重要。合理使用数组方法可以简化代码，提高开发效率。