從初始化到遍歷解析JavaScript中數(shù)組避坑指南
一、數(shù)據(jù)結(jié)構(gòu)基礎(chǔ)：為什么要學(xué)數(shù)組？
在開始之前，先快速了解一下數(shù)據(jù)結(jié)構(gòu)的世界：
數(shù)據(jù)結(jié)構(gòu)分類
├── 線性結(jié)構(gòu)
│ ├── 數(shù)組 ? 連續(xù)內(nèi)存，隨機訪問
│ ├── 棧 先進后出 FILO
│ ├── 隊列 先進先出 FIFO
│ └── 鏈表 離散內(nèi)存，指針連接
└── 非線性結(jié)構(gòu)
└── 樹（二叉樹）層級關(guān)系
數(shù)組的優(yōu)勢：
- 開箱即用，無需額外實現(xiàn)
- 連續(xù)內(nèi)存，訪問速度快 O(1)
- API 豐富，JS 內(nèi)置大量方法
二、數(shù)組的初始化方法（面試高頻考點）
2.1 字面量創(chuàng)建（最常用）
// ? 推薦：元素確定時使用 const arr = [1, 3, 4]; console.log(arr); // [1, 3, 4] // 內(nèi)存結(jié)構(gòu)： // 棧內(nèi)存：arr → 引用地址 // 堆內(nèi)存：[1, 3, 4] 連續(xù)空間
2.2 Array 構(gòu)造函數(shù)
// 創(chuàng)建空數(shù)組 const arr1 = new Array(); // [] // ?? 坑點：單個數(shù)字參數(shù)創(chuàng)建的是"空位數(shù)組" const arr3 = new Array(6); console.log(arr3); // [empty × 6] console.log(arr3.length); // 6 // ? 正確用法：創(chuàng)建并填充 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]
2.3 初始化方法對比
| 方法 | 代碼 | 結(jié)果 | 推薦度 |
|---|---|---|---|
| 字面量 | [1,2,3] | [1,2,3] | ????? |
| Array 空參 | new Array() | [] | ??? |
| Array 數(shù)字 | new Array(6) | [empty×6] | ??（有坑） |
| Array+fill | new Array(6).fill(1) | [1,1,1,1,1,1] | ???? |
三、數(shù)組遍歷方法大比拼（核心考點）
3.1 for 循環(huán)（性能王者）
const arr = [1, 3, 4, 5, 6, 7];
// ? 優(yōu)化版：緩存 length，避免重復(fù)查詢
const len = arr.length; // RHS 查詢只做一次
for (let i = 0; i < len; i++) {
console.log(arr[i]);
}
// ? 不推薦：每次循環(huán)都查詢 length
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
性能分析：
- CPU 友好：計數(shù)循環(huán)與 CPU 指令契合
- 性能最好：無函數(shù)調(diào)用開銷
- 可讀性差：
i=0; i<len; i++過于死板
3.2 forEach（簡潔但有限制）
const arr = [1, 3, 4, 5, 6, 7];
arr.forEach((item, index) => {
console.log(item, index);
});
三大限制：
- 不能 break：無法提前退出循環(huán)
- 不能 return：return 只退出當前回調(diào)
- 性能較差：函數(shù)入棧出棧有開銷
// ? 錯誤示范：break 無效
arr.forEach((item) => {
if (item === 4) break; // SyntaxError!
});
// ? 正確做法：用 for 或 for...of
for (let item of arr) {
if (item === 4) break; // 可以正常退出
}
3.3 map（遍歷 + 轉(zhuǎn)換）
const arr = [1, 2, 3, 4, 5, 6]; // forEach 只遍歷，不返回 // map 遍歷 + 加工，返回新數(shù)組 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] 原數(shù)組不變
使用場景：
- 數(shù)據(jù)轉(zhuǎn)換（如 API 響應(yīng)處理）
- 保持函數(shù)式編程的不可變性
- 不需要新數(shù)組時別用（浪費內(nèi)存）
3.4 for...of（ES6 新寵）
const arr = [1, 2, 3, 4, 5, 6];
for (let item of arr) {
console.log(item);
}
優(yōu)勢：
- 可讀性好：語義清晰
- 支持 break/continue
- 支持 async/await
- 性能略低于 for 循環(huán)
3.5 for...in（數(shù)組慎用?。?/h3>
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 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]);
}
為什么不建議用于數(shù)組：
key是字符串，不是數(shù)字- 會遍歷原型鏈上的屬性
- 順序不保證（雖然現(xiàn)代引擎通常有序）
正確用途：遍歷對象
const obj = {
name: 'llili',
age: 16,
hobbies: ["籃球", "足球", "跑步"]
};
for (let k in obj) {
console.log(k, obj[k]);
}
// 輸出：name llili / age 16 / hobbies [...]
3.6 遍歷方法對比表
| 方法 | 可 break | 可 continue | 返回值 | 性能 | 推薦場景 |
|---|---|---|---|---|---|
| for | ? | ? | 無 | ????? | 性能敏感 |
| for...of | ? | ? | 無 | ???? | 日常遍歷 |
| forEach | ? | ? | 無 | ??? | 簡單遍歷 |
| map | ? | ? | 新數(shù)組 | ??? | 數(shù)據(jù)轉(zhuǎn)換 |
| for...in | ? | ? | 無 | ?? | 遍歷對象 |
四、let vs var 在 for 循環(huán)中的區(qū)別（閉包經(jīng)典題）
這是 JavaScript 面試最高頻考點，沒有之一！
4.1 var 版本（錯誤示范）
for (var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
// 輸出：10 個 10 ?
4.2 let 版本（正確示范）
for (let i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
// 輸出：0 1 2 3 4 5 6 7 8 9 ?
為什么結(jié)果不同？
┌─────────────────────────────────────────────────────────┐
│ var vs let 本質(zhì)區(qū)別 │
├─────────────────────────────────────────────────────────┤
│ var i │
│ ├── 函數(shù)作用域 │
│ ├── 整個循環(huán)只有 1 個 i 變量 │
│ └── 所有 setTimeout 共享同一個 i │
│ │
│ let i │
│ ├── 塊級作用域 │
│ ├── 每次循環(huán)創(chuàng)建新的 i 變量 │
│ └── 每個 setTimeout 捕獲獨立的 i │
└─────────────────────────────────────────────────────────┘
閉包原理解析
// var 版本：所有回調(diào)共享同一個 i
var i; // 全局/函數(shù)作用域只有 1 個變量
for (i = 0; i < 10; i++) {
setTimeout(() => console.log(i), 1000);
}
// 循環(huán)結(jié)束 i = 10，所有回調(diào)都輸出 10
// let 版本：每次循環(huán)創(chuàng)建新的 i
for (let i = 0; i < 10; i++) {
// 相當于每次都有新的塊級作用域
setTimeout(() => console.log(i), 1000);
}
// 每個回調(diào)都有自己的 i，輸出 0~9
三種解決方案
// 方案 1：使用 let（推薦）?????
for (let i = 0; i < 10; i++) {
setTimeout(() => console.log(i), 1000);
}
// 方案 2：IIFE 立即執(zhí)行函數(shù) ???
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);
}
五、最佳實踐總結(jié)
數(shù)組初始化
// 元素已知 → 字面量 const arr = [1, 2, 3]; // 需要指定長度 → Array + fill const arr = new Array(10).fill(0);
數(shù)組遍歷
// 性能敏感 → for 循環(huán)
for (let i = 0, len = arr.length; i < len; i++) {}
// 日常遍歷 → for...of
for (let item of arr) {}
// 數(shù)據(jù)轉(zhuǎn)換 → map
const newArr = arr.map(item => item * 2);
// 遍歷對象 → for...in
for (let key in obj) {}
循環(huán)變量聲明
// 永遠優(yōu)先使用 let/const
for (let i = 0; i < arr.length; i++) {}
// 避免使用 var（除非有特殊原因）
六、面試考點速記
| 考點 | 關(guān)鍵知識點 |
|---|---|
| 數(shù)組初始化 | new Array(n) 創(chuàng)建空位數(shù)組 |
| 遍歷性能 | for > for...of > forEach > map |
| forEach 限制 | 不能 break/continue/return |
| let vs var | 塊級作用域 vs 函數(shù)作用域 |
| 閉包陷阱 | setTimeout + for 循環(huán)經(jīng)典題 |
| for...in | 適合對象，不適合數(shù)組 |
結(jié)語
數(shù)組是 JavaScript 最基礎(chǔ)也最重要的數(shù)據(jù)結(jié)構(gòu)，掌握它的初始化、遍歷方法，以及 let/var 的區(qū)別，是成為合格前端工程師的必備技能。
以上就是從初始化到遍歷解析JavaScript中數(shù)組避坑指南的詳細內(nèi)容，更多關(guān)于JavaScript數(shù)組的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細介紹了js實現(xiàn)移動端簡易滑動表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要為大家詳細介紹了js仿3366小游戲選字游戲2016-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)隨機點名程序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
JavaScript實現(xiàn)輸入驗證的常見方法總結(jié)
在前端開發(fā)中,JavaScript是一種強大的工具,用于實現(xiàn)表單和其他用戶輸入的客戶端驗證,通過這種方式可以提高用戶體驗并減少服務(wù)器負載,JavaScript提供多種方式來驗證用戶的輸入數(shù)據(jù),這些技術(shù)可以從簡單的正則表達式到復(fù)雜的異步請求不等,下面是一些常見的方法及其應(yīng)用實例2025-05-05
這篇文章主要介紹了JS實現(xiàn)的base64加密解密操作,結(jié)合實例形式分析了基于javascript的base64加密與解密函數(shù)定義與使用相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
在本篇文章中我們給大家分享了關(guān)于移動端圖片上傳旋轉(zhuǎn)、壓縮問題的解決方法，有需要的朋友們參考下2018-10-10
這篇文章主要介紹了JS無縫滾動效果實現(xiàn)方法,結(jié)合實例形式較為詳細的分析了無縫滾動的原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2016-12-12
JavaScript?ECMAScript?6(ES2015~ES2022)所有新特性總結(jié)
這篇文章主要介紹了JavaScript?ECMAScript?6(ES2015~ES2022)所有新特性總結(jié),文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了bootstrap手風(fēng)琴折疊示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
由于border屬性引起的div寬度問題，確實很讓人頭疼，在本文將為大家介紹下使用JS是如何解決的，感興趣的朋友不要錯過2013-11-11