JavaScript 第5章：数组与迭代

hummhumm

于 2024-10-11 18:30:00 发布

阅读量1.1k

点赞数 37

文章标签： javascript 前端开发语言 python java typescript ecmascript

本文链接：https://blog.csdn.net/hummhumm/article/details/142851192

版权

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数组的更多操作和实战案例。

实战案例：复杂数组操作

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

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

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]]