循环与迭代

2. continue - 跳过当前迭代

// 跳过偶数
for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue; // 跳过当前迭代
    }
    console.log(i); // 1, 3, 5, 7, 9
}

// 带标签的 continue
outerLoop: for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (j === 1) {
            continue outerLoop; // 跳过外层循环当前迭代
        }
        console.log(`i=${i}, j=${j}`);
        // i=0, j=0
        // i=1, j=0
        // i=2, j=0
    }
}

数组遍历方法

1. forEach()

const numbers = [1, 2, 3, 4, 5];

// 基本用法
numbers.forEach(function (value, index, array) {
    console.log(`索引 ${index}: 值 ${value}`);
});

// 箭头函数
numbers.forEach((value, index) => {
    console.log(`numbers[${index}] = ${value}`);
});

// 无法中断或跳过
numbers.forEach(value => {
    if (value === 3) return; // 仅跳过当前元素，不会中断循环
    console.log(value); // 1, 2, 4, 5
});

2. map() - 映射

const numbers = [1, 2, 3, 4, 5];

// 返回新数组
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// 包含索引
const withIndex = numbers.map((num, index) => `${index}:${num}`);
console.log(withIndex); // ["0:1", "1:2", "2:3", "3:4", "4:5"]

3. filter() - 过滤

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

// 过滤偶数
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

// 过滤大于5的数
const greaterThan5 = numbers.filter(num => num > 5);
console.log(greaterThan5); // [6, 7, 8, 9, 10]

4. reduce() - 归约

const numbers = [1, 2, 3, 4, 5];

// 求和
const sum = numbers.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 0);
console.log(sum); // 15

// 求最大值
const max = numbers.reduce((acc, cur) => {
    return cur > acc ? cur : acc;
}, numbers[0]);
console.log(max); // 5

// 统计字符出现次数
const chars = ["a", "b", "a", "c", "b", "a"];
const charCount = chars.reduce((acc, char) => {
    acc[char] = (acc[char] || 0) + 1;
    return acc;
}, {});
console.log(charCount); // {a: 3, b: 2, c: 1}

5. find() 和 findIndex()

const users = [
    { id: 1, name: "张三", active: true },
    { id: 2, name: "李四", active: false },
    { id: 3, name: "王五", active: true },
];

// find - 查找第一个匹配的元素
const activeUser = users.find(user => user.active);
console.log(activeUser); // {id: 1, name: '张三', active: true}

// findIndex - 查找第一个匹配的索引
const inactiveIndex = users.findIndex(user => !user.active);
console.log(inactiveIndex); // 1

6. some() 和 every()

const numbers = [1, 2, 3, 4, 5];

// some - 是否有元素满足条件
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

// every - 是否所有元素都满足条件
const allPositive = numbers.every(num => num > 0);
console.log(allPositive); // true

7. flatMap() (ES2019+)

const sentences = ["Hello world", "JavaScript is fun"];

// 先 map 后 flat
const words = sentences.flatMap(sentence => sentence.split(" "));
console.log(words); // ["Hello", "world", "JavaScript", "is", "fun"]

// 过滤并展开
const numbers = [1, 2, 3, 4];
const result = numbers.flatMap(num => (num % 2 === 0 ? [num, num * 2] : []));
console.log(result); // [2, 4, 4, 8]

性能优化技巧

1. 循环性能对比

const arr = new Array(1000000).fill(0);

// 性能测试
console.time("for循环");
for (let i = 0, len = arr.length; i < len; i++) {
    // 操作
}
console.timeEnd("for循环");

console.time("forEach");
arr.forEach(() => {
    // 操作
});
console.timeEnd("forEach");

console.time("for...of");
for (let value of arr) {
    // 操作
}
console.timeEnd("for...of");

2. 最佳实践

// 1. 缓存数组长度
const arr = [1, 2, 3, 4, 5];
for (let i = 0, len = arr.length; i < len; i++) {
    // 避免每次循环都计算 length
}

// 2. 倒序循环（某些情况下更快）
for (let i = arr.length - 1; i >= 0; i--) {
    // 操作
}

// 3. 避免在循环中创建函数
// 不好
for (let i = 0; i < 10; i++) {
    arr[i].onclick = function () {
        console.log(i); // 创建了10个函数
    };
}

// 好
function createHandler(i) {
    return function () {
        console.log(i);
    };
}
for (let i = 0; i < 10; i++) {
    arr[i].onclick = createHandler(i);
}

// 4. 使用合适的迭代方法
const numbers = [1, 2, 3, 4, 5];

// 需要新数组时用 map
const doubled = numbers.map(n => n * 2);

// 需要过滤时用 filter
const evens = numbers.filter(n => n % 2 === 0);

// 需要查找时用 find/findIndex
const firstEven = numbers.find(n => n % 2 === 0);

// 需要检查条件时用 some/every
const hasEven = numbers.some(n => n % 2 === 0);

特殊场景处理

1. 遍历稀疏数组

const sparse = [1, , 3, , 5]; // 有空洞的数组

// for 循环
for (let i = 0; i < sparse.length; i++) {
    console.log(sparse[i]); // 1, undefined, 3, undefined, 5
}

// forEach 会跳过空洞
sparse.forEach(value => {
    console.log(value); // 1, 3, 5
});

// for...of 不会跳过
for (let value of sparse) {
    console.log(value); // 1, undefined, 3, undefined, 5
}

2. 遍历对象

const obj = { a: 1, b: 2, c: 3 };

// 获取键数组
const keys = Object.keys(obj); // ['a', 'b', 'c']

// 获取值数组
const values = Object.values(obj); // [1, 2, 3]

// 获取键值对数组
const entries = Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]

// 使用 for...of 遍历 entries
for (let [key, value] of Object.entries(obj)) {
    console.log(`${key}: ${value}`);
}

现代 JavaScript 循环模式

1. 管道操作（使用方法链）

const products = [
    { id: 1, name: "Laptop", price: 1000, category: "Electronics", stock: 10 },
    { id: 2, name: "Mouse", price: 50, category: "Electronics", stock: 100 },
    { id: 3, name: "Chair", price: 200, category: "Furniture", stock: 5 },
    { id: 4, name: "Desk", price: 500, category: "Furniture", stock: 2 },
];

// 链式调用处理数据
const result = products
    .filter(product => product.category === "Electronics") // 过滤电子产品
    .filter(product => product.price > 100) // 价格大于100
    .map(product => ({
        // 转换格式
        name: product.name.toUpperCase(),
        price: `$${product.price}`,
        value: product.price * product.stock,
    }))
    .sort((a, b) => b.value - a.value); // 按价值降序排序

console.log(result);