JavaScript數(shù)組塌陷實例解析
更新時間:2023年05月23日 11:08:18 作者:陸榮濤
這篇文章主要為大家介紹了JavaScript數(shù)組塌陷實例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
什么是數(shù)組塌陷
當數(shù)組執(zhí)行刪除單元操作時,被刪除單元,之后的單元,會前移,進而頂替被刪除單元,出現(xiàn)在被刪除單元的位置上,造成數(shù)組長度減少的情況,這樣的現(xiàn)象稱為數(shù)組的坍塌
// 需求: 要求刪除掉數(shù)組中的所有元素,但是要一個一個的刪除
// 定義一個數(shù)組
var arr = [3, 4, 44, 65, 56]
console.log('原始數(shù)組 : ', arr);
// 遍歷循環(huán)數(shù)組
for (var i = 0; i < arr.length; i++) {
arr.splice(i, 1)
}
console.log('刪除后的數(shù)組 : ', arr);
/*
分析:
代碼開始執(zhí)行這個時候
i===0 arr = [3, 4, 44, 65, 56]
arr.length = 5 結果是true
arr.splice(0,1)
i===1 arr = [4, 44, 65, 56]
arr.length = 4 結果是true
arr.splice(1,1)
i===2 arr = [4, 65, 56]
arr.length = 3 結果是true
arr.splice(2,1)
i===3 arr = [4, 65]
arr.length = 2 結果是falses
循環(huán)結束
*/解決方案一:
我們循環(huán)的時候倒著循環(huán)
// 解決方案 方案一
var arr = [3, 4, 44, 65, 56]
console.log('原始數(shù)組 : ', arr);
// 遍歷循環(huán)數(shù)組
for (var i = arr.length - 1; i >= 0; i--) {
arr.splice(i, 1)
}
console.log('刪除后的數(shù)組 : ', arr);
/*
分析:
代碼開始執(zhí)行;
i === 4 arr = [3, 4, 44, 65, 56]
這個時候4是大于0的 條件成立
arr.splice(4,1)
i === 3 arr = [3, 4, 44, 65]
這個時候3也是大于0 的 條件成立
arr.splice(3,1)
i === 2 arr = [3, 4, 44]
這個時候也是大于0 的 條件成立
arr.splice(2,1)
i === 1 arr = [3, 4]
這個時候1也是大于0 的 條件成立
arr.splice(1,1)
i === 0 arr = [3]
這個時候0是等于0 的 條件成立
arr.splice(0,1)
i === -1 arr = []
這個時候-1不大于等于0 的 條件不成立
循環(huán)結束
*/解決方法二
就是每執(zhí)行一次刪除就執(zhí)行一次 i-- 操作
// 解決方案 方案二
var arr = [3, 4, 44, 65, 56]
console.log('原始數(shù)組 : ', arr);
// 遍歷循環(huán)數(shù)組
for (var i = 0; i < arr.length; i++) {
arr.splice(i, 1)
i--
}
console.log('刪除后的數(shù)組 : ', arr);
/*
分析:
代碼開始執(zhí)行
i === 0 arr = [3, 4, 44, 65, 56]
arr.length = 5 條件成立
arr.splice(0, 1)
這個時候執(zhí)行了 i--
i === 0 arr = [4, 44, 65, 56]
arr.length = 4 條件成立
arr.splice(0, 1)
i === 0 arr = [ 44, 65, 56]
arr.length = 3 條件成立
arr.splice(0, 1)
i === 0 arr = [ 65, 56]
arr.length = 2 條件成立
arr.splice(0, 1)
i === 0 arr = [ 56]
arr.length = 1 條件成立
arr.splice(0, 1)
i === 0 arr = []
arr.length = 0 條件不成立
循環(huán)結束
*/以上就是JavaScript數(shù)組塌陷實例解析的詳細內容,更多關于JavaScript數(shù)組塌陷的資料請關注腳本之家其它相關文章!
相關文章
一文詳解fetch,ajax,axios的區(qū)別以及使用
在現(xiàn)代Web開發(fā)中,數(shù)據(jù)交互是必不可少的環(huán)節(jié),這篇文章主要介紹了fetch,ajax,axios的區(qū)別以及使用的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-07-07
JS實現(xiàn)上傳圖片的三種方法并實現(xiàn)預覽圖片功能
在用戶注冊頁面,需要用戶在本地選擇一張圖片作為頭像,并同時預覽,實現(xiàn)思路有兩種,具體實現(xiàn)方法和實例代碼大家參考下本文2017-07-07

