JavaScript 第5章：数组与迭代

JavaScript中的数组是一种非常实用的数据结构，它可以存储任意类型的值。下面将详细介绍数组的操作和常用的数组方法。

1. 数组声明与初始化

数组可以通过多种方式进行声明和初始化。

// 方式一：使用数组字面量
let numbers = [1, 2, 3];// 方式二：使用Array构造函数
let emptyArray = new Array();
let arrayWithValues = new Array(1, 2, 3);// 方式三：动态长度数组
let dynamicArray = new Array(5); // 创建一个长度为5的空数组
dynamicArray[0] = 'a';
dynamicArray[1] = 'b';

2. 数组方法

常用的数组方法

• push(): 在数组末尾添加一个或多个元素，并返回新的数组长度。
• pop(): 移除数组最后一个元素，并返回该元素。
• shift(): 移除数组的第一个元素，并返回该元素。
• unshift(): 在数组开始处添加一个或多个元素，并返回新的数组长度。
• splice(): 用于添加/删除项目。第一个参数指定开始位置，第二个参数指定要移除的元素数量，之后的参数是要插入的元素列表。

let array = [1, 2, 3];
array.push(4); // array is now [1, 2, 3, 4]
array.pop(); // array is now [1, 2, 3], returns 4
array.shift(); // array is now [2, 3], returns 1
array.unshift(0); // array is now [0, 2, 3]
array.splice(1, 1); // array is now [0, 3], removes the second element

3. 数组迭代

常见的迭代方法

• forEach(): 对数组中的每个元素执行提供的函数。
• map(): 创建一个新数组，其结果是该数组中的每个元素都调用了提供的函数。
• filter(): 创建一个新数组，包含通过测试提供的函数的所有元素。
• reduce(): 对数组中的每个元素执行一个由您提供的“归约函数”，最终返回单个值。

let numbers = [1, 2, 3, 4, 5];numbers.forEach((num, index) => {console.log(`Number at index ${index}: ${num}`);
});let squares = numbers.map(num => num * num);
console.log(squares); // 输出: [1, 4, 9, 16, 25]let evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // 输出: [2, 4]let sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 输出: 15

4. 实战案例：数组操作练习

案例一：筛选偶数并计算平方

假设有一个数组，我们需要筛选出所有的偶数，并计算它们的平方。

function squareEvenNumbers(numbers) {return numbers.filter(num => num % 2 === 0).map(num => num * num);
}let input = [1, 2, 3, 4, 5, 6];
let output = squareEvenNumbers(input);
console.log(output); // 输出: [4, 16, 36]

案例二：字符串数组转数字数组

给定一个字符串数组，转换成数字数组，并对每个数字加1。

function stringToNumberAndIncrement(strings) {return strings.map(str => parseInt(str, 10) + 1);
}let stringNumbers = ['1', '2', '3'];
let incrementedNumbers = stringToNumberAndIncrement(stringNumbers);
console.log(incrementedNumbers); // 输出: [2, 3, 4]

案例三：统计数组中每个字符出现的次数

给定一个字符串数组，统计每个字符出现的次数。

function countCharacters(strings) {let counts = {};strings.forEach(str => {for (let char of str) {counts[char] = (counts[char] || 0) + 1;}});return counts;
}let words = ['hello', 'world'];
let charCounts = countCharacters(words);
console.log(charCounts); // 输出: { h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1 }

通过这些案例，我们可以看到JavaScript数组方法的强大功能，以及它们在处理数组数据时的灵活性和效率。掌握这些方法将大大提高你在处理数组时的能力。

接下来我们继续探讨JavaScript数组的更多操作和实战案例。

更多数组方法

1. 查找与比较

• find(): 返回数组中满足提供的测试函数的第一个元素的值。
• findIndex(): 返回数组中满足提供的测试函数的第一个元素的索引。

let users = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }
];let user = users.find(user => user.id === 2);
console.log(user); // 输出: { id: 2, name: 'Bob' }let index = users.findIndex(user => user.name === 'Charlie');
console.log(index); // 输出: 2

2. 排序与反转

• sort(): 排序数组元素，默认按字符串的Unicode顺序排序。
• reverse(): 反转数组元素的顺序。

let numbers = [3, 1, 4, 1, 5, 9, 2, 6];
numbers.sort(); // 默认按字符串排序，结果可能不是数字上的升序
console.log(numbers); // 输出: [1, 1, 2, 3, 4, 5, 6, 9] 或者其他顺序numbers.sort((a, b) => a - b); // 数字升序排序
console.log(numbers); // 输出: [1, 1, 2, 3, 4, 5, 6, 9]numbers.reverse(); // 反转数组
console.log(numbers); // 输出: [9, 6, 5, 4, 3, 2, 1, 1]

3. 组合与分割

• concat(): 将两个或多个数组合并成一个新的数组。
• slice(): 返回数组的一部分浅拷贝，不改变原数组。

let a = [1, 2];
let b = [3, 4];
let c = a.concat(b);
console.log(c); // 输出: [1, 2, 3, 4]let slice = a.slice(0, 1); // 获取从索引0开始的一个元素
console.log(slice); // 输出: [1]

4. 填充与重复

• fill(): 使用指定的值填充数组的一部分或全部。
• repeat(): （不是数组方法，而是字符串方法，但可以用于数组）创建一个重复的字符串。

let zeros = new Array(5).fill(0);
console.log(zeros); // 输出: [0, 0, 0, 0, 0]let repeatString = 'abc'.repeat(3);
console.log(repeatString); // 输出: 'abcabcabc'

实战案例：复杂数组操作

案例四：提取数组中的唯一值

给定一个数组，从中提取唯一的值，并保持原来的顺序。

function uniqueValues(array) {let seen = new Set();return array.filter(item => {if (!seen.has(item)) {seen.add(item);return true;}return false;});
}let items = [1, 2, 2, 3, 4, 4, 4, 5];
let uniqueItems = uniqueValues(items);
console.log(uniqueItems); // 输出: [1, 2, 3, 4, 5]

案例五：数组扁平化

给定一个多维数组，将其扁平化为一维数组。

function flattenArray(array) {return array.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenArray(val)) : acc.concat(val), []);
}let nestedArray = [1, [2, [3, 4], 5], 6];
let flatArray = flattenArray(nestedArray);
console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6]

案例六：数组分组

给定一个数组和一个分组条件，根据条件将数组分组成对象。

function groupBy(array, keyGetter) {return array.reduce((accumulator, currentValue) => {const key = keyGetter(currentValue);if (!accumulator[key]) {accumulator[key] = [];}accumulator[key].push(currentValue);return accumulator;}, {});
}let data = [{ id: 1, type: 'fruit' },{ id: 2, type: 'vegetable' },{ id: 3, type: 'fruit' }
];let groupedData = groupBy(data, item => item.type);
console.log(groupedData); // 输出: { fruit: [{ id: 1, type: 'fruit' }, { id: 3, type: 'fruit' }], vegetable: [{ id: 2, type: 'vegetable' }] }

通过这些实战案例，我们可以看到如何在实际应用中综合使用各种数组方法来解决复杂的问题。掌握这些技巧将极大地增强你在日常开发中的效率和代码质量。

我们继续深入探讨JavaScript数组的更多高级用法和实战案例。

高级数组操作

1. 数组的高级迭代

除了常见的迭代方法（如forEach, map, filter, reduce），还有一些其他的迭代方法可以帮助我们更方便地处理数组：

• every(): 测试数组中的所有元素是否都通过了被提供的函数测试。
• some(): 测试数组中是否有至少一个元素通过了被提供的函数测试。

let numbers = [1, 2, 3, 4, 5];// 检查数组中的所有元素是否都大于0
let allPositive = numbers.every(num => num > 0);
console.log(allPositive); // 输出: true// 检查数组中是否存在至少一个偶数
let containsEven = numbers.some(num => num % 2 === 0);
console.log(containsEven); // 输出: true

2. 数组的搜索

• includes(): 判断数组中是否包含某个元素。
• indexOf(): 返回数组中第一个匹配指定值的元素的索引，如果没有找到则返回-1。
• lastIndexOf(): 类似于indexOf，但是返回的是最后一个匹配元素的索引。

let letters = ['a', 'b', 'c', 'd'];// 检查数组中是否包含 'c'
let containsC = letters.includes('c');
console.log(containsC); // 输出: true// 查找 'c' 的索引
let indexC = letters.indexOf('c');
console.log(indexC); // 输出: 2// 查找最后一个 'c' 的索引
let lastIndexC = letters.lastIndexOf('c');
console.log(lastIndexC); // 输出: 2

实战案例：数组的综合运用

案例七：数组去重

给定一个数组，去除重复的元素，并保持原有的顺序。

function removeDuplicates(array) {let seen = new Set();return array.filter(item => {if (!seen.has(item)) {seen.add(item);return true;}return false;});
}let items = [1, 2, 2, 3, 4, 4, 4, 5];
let uniqueItems = removeDuplicates(items);
console.log(uniqueItems); // 输出: [1, 2, 3, 4, 5]

案例八：数组交集

给定两个数组，找出它们之间的交集。

function findIntersection(arr1, arr2) {return arr1.filter(item => arr2.includes(item));
}let arr1 = [1, 2, 3, 4, 5];
let arr2 = [4, 5, 6, 7, 8];
let intersection = findIntersection(arr1, arr2);
console.log(intersection); // 输出: [4, 5]

案例九：数组并集

给定两个数组，找出它们的并集，并去除重复元素。

function findUnion(arr1, arr2) {let combined = arr1.concat(arr2);let uniqueCombined = [...new Set(combined)];return uniqueCombined;
}let union = findUnion(arr1, arr2);
console.log(union); // 输出: [1, 2, 3, 4, 5, 6, 7, 8]

案例十：数组差集

给定两个数组，找出第一个数组中不在第二个数组中的元素。

function findDifference(arr1, arr2) {return arr1.filter(item => !arr2.includes(item));
}let difference = findDifference(arr1, arr2);
console.log(difference); // 输出: [1, 2, 3]

性能考量

在处理大量数据时，数组操作的性能尤为重要。以下是一些提高数组操作性能的建议：

• 减少嵌套层次：尽量减少数组操作中的嵌套层次，以减少计算负担。
• 使用适当的迭代方法：不同的迭代方法有不同的性能特点，比如map和filter通常比forEach更快，因为它们返回新的数组。
• 避免不必要的数组复制：使用像slice这样的方法会创建新的数组副本，这可能会消耗更多的内存和时间。尽可能使用原地操作（如sort）来避免不必要的复制。

总结

通过上述案例和技巧，我们可以看到JavaScript数组的强大功能和灵活性。掌握这些方法不仅可以帮助我们写出更简洁、高效的代码，还可以解决实际开发中遇到的各种复杂问题。在实践中不断尝试和优化，将使我们在处理数组数据时更加得心应手。

我们继续探讨JavaScript数组的一些进阶用法和应用场景。

高级数组操作与应用

1. 数组的扁平化与嵌套

有时我们需要处理嵌套的数组结构，例如将多层嵌套的数组扁平化为一层数组。

function deepFlatten(array) {return array.reduce((acc, val) => {return Array.isArray(val) ? acc.concat(deepFlatten(val)) : acc.concat(val);}, []);
}let nestedArray = [1, [2, [3, 4], 5], 6];
let flatArray = deepFlatten(nestedArray);
console.log(flatArray); // 输出: [1, 2, 3, 4, 5, 6]

2. 数组的分页

处理大量数据时，可能需要将数组分成小段，以便分页显示。

function paginateArray(array, pageSize, pageNumber) {const startIndex = (pageNumber - 1) * pageSize;const endIndex = startIndex + pageSize;return array.slice(startIndex, endIndex);
}let largeArray = Array.from({ length: 100 }, (_, i) => i + 1);
let paginatedArray = paginateArray(largeArray, 10, 2);
console.log(paginatedArray); // 输出: [11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

3. 数组的批处理

在处理大量数据时，可能需要将数据分批处理，例如每批处理一定数量的数据项。

function batchProcess(array, batchSize, processor) {let results = [];for (let i = 0; i < array.length; i += batchSize) {let batch = array.slice(i, i + batchSize);results.push(processor(batch));}return results;
}function processBatch(batch) {return batch.map(item => item * 2);
}let numbers = Array.from({ length: 20 }, (_, i) => i + 1);
let processedBatches = batchProcess(numbers, 5, processBatch);
console.log(processedBatches); // 输出: [[2, 4, 6, 8, 10], [12, 14, 16, 18, 20], [22, 24, 26, 28, 30]]

多维数组处理

多维数组在处理表格数据、矩阵运算等方面非常有用。下面是一个处理多维数组的例子。

案例十一：矩阵转置

给定一个二维数组（矩阵），将其转置。

function transpose(matrix) {return matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex]));
}let matrix = [[1, 2, 3],[4, 5, 6],[7, 8, 9]
];let transposedMatrix = transpose(matrix);
console.log(transposedMatrix); // 输出: [[1, 4, 7], [2, 5, 8], [3, 6, 9]]

案例十二：矩阵乘法

实现两个矩阵的乘法运算。

function multiplyMatrices(m1, m2) {if (m1[0].length !== m2.length) {throw new Error('Matrix dimensions must agree.');}let result = [];for (let i = 0; i < m1.length; i++) {result[i] = [];for (let j = 0; j < m2[0].length; j++) {let sum = 0;for (let k = 0; k < m1[0].length; k++) {sum += m1[i][k] * m2[k][j];}result[i][j] = sum;}}return result;
}let m1 = [[1, 2],[3, 4]
];let m2 = [[5, 6],[7, 8]
];let product = multiplyMatrices(m1, m2);
console.log(product); // 输出: [[19, 22], [43, 50]]

性能优化

在处理大量数据时，性能优化非常重要。以下是一些优化技巧：

1. 减少函数调用

在循环中尽量减少函数调用次数，因为每次调用函数都有一定的开销。

2. 使用尾递归优化

对于递归算法，如果语言支持尾递归优化，可以改写递归为尾递归形式以提高性能。

3. 使用缓存

对于重复计算的结果，可以使用缓存来避免多次计算。

4. 减少数组操作

尽量减少数组的创建和销毁，特别是对于大数组。

实战练习

为了巩固所学的知识，下面是一些实战练习题目：

1. 数组旋转：给定一个数组和一个旋转步数，将数组向右旋转指定的步数。
2. 数组的最大连续子数组和：给定一个数组，找到其中最大和的连续子数组，并返回其和。
3. 数组的K个最近邻居：给定一个数组和一个目标值，找出数组中最接近目标值的K个数。

通过这些实战练习，你可以更好地掌握JavaScript数组的各种操作，并能够灵活运用到实际开发中。