
一、數組的基本概念數組可以理解成一個箱子用來存放一組數據。一維數組就是一個箱子或多個箱子。二維數組就是一個箱子里面套了一個箱子。以此類推多維數組就是箱子層層嵌套。例如創建一個一維數組var arr [1, 2, 3, 4, 5]; console.log(arr); // 輸出 [1, 2, 3, 4, 5]創建一個二維數組var matrix [ [1, 2], [3, 4], [5, 6] ]; console.log(matrix[0][1]); // 輸出 2二、數組的遍歷遍歷數組可以使用 for 循環或 while 循環。使用 for 循環遍歷var username [張三, 李四, 王五]; for (var i 0; i username.length; i) { console.log(username[i]); }使用 for...in 遍歷遍歷下標for (var index in username) { console.log(index : username[index]); }使用 for...of 遍歷遍歷元素for (var name of username) { console.log(name); }使用 while 循環遍歷var i 0; while (i username.length) { console.log(username[i]); i; }三、數組的靜態方法Array.isArray() 用于判斷一個對象是否為數組返回布爾值。var arr [1, 2, 3]; console.log(Array.isArray(arr)); // 輸出 true console.log(Array.isArray(hello)); // 輸出 false四、數組的增刪方法push、pop、unshift、shift數組太長的情況下使用這些方法可以方便地在頭部或尾部增刪元素。push() 在數組末尾加入一個或多個元素返回數組的新長度后加。var arr [1, 2, 3]; var len arr.push(4, 5); console.log(arr); // 輸出 [1, 2, 3, 4, 5] console.log(len); // 輸出 5pop() 刪除數組最后一個元素返回被刪除的元素后刪。var arr [1, 2, 3]; var last arr.pop(); console.log(arr); // 輸出 [1, 2] console.log(last); // 輸出 3unshift() 在數組開頭加入一個或多個元素返回數組的新長度前加。var arr [1, 2, 3]; var len arr.unshift(a, b); console.log(arr); // 輸出 [a, b, 1, 2, 3] console.log(len); // 輸出 5shift() 刪除數組第一個元素返回被刪除的元素前刪。var arr [1, 2, 3]; var first arr.shift(); console.log(arr); // 輸出 [2, 3] console.log(first); // 輸出 1五、數組的常用方法concat() 用于合并多個數組返回一個新數組原數組不變。var arr1 [1, 2]; var arr2 [3, 4]; var arr3 arr1.concat(arr2); console.log(arr3); // 輸出 [1, 2, 3, 4]reverse() 顛倒數組元素的順序會改變原數組。var arr [1, 2, 3, 4]; arr.reverse(); console.log(arr); // 輸出 [4, 3, 2, 1]indexOf() 查找元素在數組中的下標存在則返回下標不存在則返回 -1。var arr [a, b, c, d]; console.log(arr.indexOf(c)); // 輸出 2 console.log(arr.indexOf(x)); // 輸出 -1indexOf() 還可以指定起始查找位置從第二個元素后面開始查找。var arr [a, b, c, b]; console.log(arr.indexOf(b, 2)); // 從下標 2 開始找輸出 3split() 用于把字符串按指定分隔符拆分成數組。var str apple,banana,orange; var arr str.split(,); console.log(arr); // 輸出 [apple, banana, orange]六、補充其他常用方法join() 把數組元素用指定分隔符合并成字符串與 split() 相反。var arr [apple, banana, orange]; var str arr.join(-); console.log(str); // 輸出 apple-banana-orangeslice() 截取數組的一部分返回新數組不改變原數組。var arr [1, 2, 3, 4, 5]; var sub arr.slice(1, 3); console.log(sub); // 輸出 [2, 3]splice() 可以刪除、替換或插入元素會改變原數組。var arr [1, 2, 3, 4, 5]; arr.splice(1, 2, a, b); // 從下標 1 開始刪除 2 個元素再插入 a 和 b console.log(arr); // 輸出 [1, a, b, 4, 5]sort() 對數組元素進行排序默認按字符串順序排序。var arr [3, 1, 4, 2]; arr.sort(); console.log(arr); // 輸出 [1, 2, 3, 4]forEach() 遍歷數組對每個元素執行一次回調函數是數組遍歷中最常用的方法之一。var arr [1, 2, 3]; arr.forEach(function (item) { console.log(item * 2); // 輸出 2、4、6 });七、forEach 的詳細講解forEach() 是數組自帶的高階方法它接收一個回調函數數組中的每個元素都會依次調用一次該回調函數。回調函數可以接收三個參數當前元素、當前下標、原數組本身。var arr [a, b, c]; arr.forEach(function (item, index, array) { console.log(元素 item 下標 index); console.log(原數組 array); }); // 輸出 // 元素a下標0 // 原數組a,b,c // 元素b下標1 // 原數組a,b,c // 元素c下標2 // 原數組a,b,cforEach() 也可以使用箭頭函數簡寫代碼更簡潔。var arr [10, 20, 30]; arr.forEach(item console.log(item 1)); // 輸出 11、21、31forEach() 不會改變原數組也不會返回新數組它只負責對每個元素執行操作。如果需要在遍歷后得到一個新數組應該使用 map()。var arr [1, 2, 3]; var doubled arr.map(function (item) { return item * 2; }); console.log(doubled); // 輸出 [2, 4, 6] console.log(arr); // 原數組不變輸出 [1, 2, 3]forEach() 的應用場景非常廣泛例如累加求和、統計符合條件的元素個數、批量修改對象屬性等。// 場景一累加求和 var scores [80, 90, 75, 95]; var total 0; scores.forEach(function (score) { total score; }); console.log(total); // 輸出 340 // 場景二統計大于 85 分的人數 var count 0; scores.forEach(function (score) { if (score 85) { count; } }); console.log(count); // 輸出 2 // 場景三批量修改對象屬性 var users [ { name: 張三, age: 18 }, { name: 李四, age: 20 } ]; users.forEach(function (user) { user.age 1; // 每個人年齡加 1 }); console.log(users[0].age); // 輸出 19 console.log(users[1].age); // 輸出 21forEach() 的特殊點在于它不能使用 break 或 return 提前終止循環一旦開始就會遍歷完所有元素。如果需要在滿足某個條件時提前退出應該使用 for 循環或 some()、every() 等方法。// forEach 無法提前終止 var arr [1, 2, 3, 4, 5]; arr.forEach(function (item) { if (item 3) { return; // 這里只是跳過當前回調并不會終止循環 } console.log(item); // 輸出 1、2、4、5 }); // 需要提前終止時使用 for 循環 for (var i 0; i arr.length; i) { if (arr[i] 3) { break; // 遇到 3 就終止循環 } console.log(arr[i]); // 輸出 1、2 }什么時候用 forEach() 更好當你只需要對每個元素執行一次操作、不需要提前終止、也不需要返回新數組時forEach() 是最簡潔直觀的選擇。例如打印日志、累加統計、修改對象屬性等場景。而需要提前退出、需要跳過某些元素、或需要根據條件控制循環流程時使用 for 循環更合適。