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