从初始化到遍历解析JavaScript中数组避坑指南

// ✅ 推荐：元素确定时使用
const arr = [1, 3, 4];
console.log(arr); // [1, 3, 4]

// 内存结构：
// 栈内存：arr → 引用地址
// 堆内存：[1, 3, 4] 连续空间

// 创建空数组
const arr1 = new Array(); // []

// ⚠️ 坑点：单个数字参数创建的是"空位数组"
const arr3 = new Array(6); 
console.log(arr3); // [empty × 6]
console.log(arr3.length); // 6

// ✅ 正确用法：创建并填充
const arr2 = (new Array(6)).fill(1);
console.log(arr2); // [1, 1, 1, 1, 1, 1]

const arr = (new Array(6)).fill(3);
console.log(arr); // [3, 3, 3, 3, 3, 3]

const arr = [1, 3, 4, 5, 6, 7];

// ✅ 优化版：缓存 length，避免重复查询
const len = arr.length; // RHS 查询只做一次
for (let i = 0; i < len; i++) {
    console.log(arr[i]);
}

// ❌ 不推荐：每次循环都查询 length
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

const arr = [1, 3, 4, 5, 6, 7];

arr.forEach((item, index) => {
    console.log(item, index);
});

// ❌ 错误示范：break 无效
arr.forEach((item) => {
    if (item === 4) break; // SyntaxError!
});

// ✅ 正确做法：用 for 或 for...of
for (let item of arr) {
    if (item === 4) break; // 可以正常退出
}

const arr = [1, 2, 3, 4, 5, 6];

// forEach 只遍历，不返回
// map 遍历 + 加工，返回新数组
const newArr = arr.map(item => item + 1);
console.log(newArr); // [2, 3, 4, 5, 6, 7]
console.log(arr);    // [1, 2, 3, 4, 5, 6] 原数组不变

const arr = [1, 2, 3, 4, 5, 6];

for (let item of arr) {
    console.log(item);
}

const arr = [1, 3, 4, 5, 6, 7, 8, 8];

for (let key in arr) {
    // ⚠️ key 是字符串类型的下标！
    console.log(key, typeof key); // "0" "string"
    console.log(arr[key]);
}

const obj = {
    name: 'llili',
    age: 16,
    hobbies: ["篮球", "足球", "跑步"]
};

for (let k in obj) {
    console.log(k, obj[k]);
}
// 输出：name llili / age 16 / hobbies [...]

for (var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

// 输出：10 个 10 ❌

for (let i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

// 输出：0 1 2 3 4 5 6 7 8 9 ✅

// var 版本：所有回调共享同一个 i
var i;  // 全局/函数作用域只有 1 个变量
for (i = 0; i < 10; i++) {
    setTimeout(() => console.log(i), 1000);
}
// 循环结束 i = 10，所有回调都输出 10

// let 版本：每次循环创建新的 i
for (let i = 0; i < 10; i++) {
    // 相当于每次都有新的块级作用域
    setTimeout(() => console.log(i), 1000);
}
// 每个回调都有自己的 i，输出 0~9

// 方案 1：使用 let（推荐）⭐⭐⭐⭐⭐
for (let i = 0; i < 10; i++) {
    setTimeout(() => console.log(i), 1000);
}

// 方案 2：IIFE 立即执行函数 ⭐⭐⭐
for (var i = 0; i < 10; i++) {
    (function(j) {
        setTimeout(() => console.log(j), 1000);
    })(i);
}

// 方案 3：setTimeout 传参 ⭐⭐⭐⭐
for (var i = 0; i < 10; i++) {
    setTimeout(function(j) {
        console.log(j);
    }, 1000, i);
}

// 元素已知 → 字面量
const arr = [1, 2, 3];

// 需要指定长度 → Array + fill
const arr = new Array(10).fill(0);

// 性能敏感 → for 循环
for (let i = 0, len = arr.length; i < len; i++) {}

// 日常遍历 → for...of
for (let item of arr) {}

// 数据转换 → map
const newArr = arr.map(item => item * 2);

// 遍历对象 → for...in
for (let key in obj) {}

// 永远优先使用 let/const
for (let i = 0; i < arr.length; i++) {}

// 避免使用 var（除非有特殊原因）