JS數組學習之splice方法

AbnerMing 發布于2019-08-20 11:57 / 2018人閱讀

摘要：確認需要移除的長度，最小為，確認原數組變化后的新長度按照索引位置，獲取長度的新數組，用于返回對原數組進行替換新元素。

array.splice(start,deleteCount,item1,item2....)

splice方法從array移除n個元素(大于或等于0)，并且可以用新的item替換被移除的元素。參數start是從數組array中移除元素的最開始位置（數組的索引，正負數表示方向，負數表示從數組末尾開始往前數,但是不論正負，移除的方向始終是索引遞增的方向）。參數deleteCounts是要移除的元素個數(如果設置為 0，則不會刪除)。后面的items用來替換被移除的位置上(可多可少)。splice最終返回一個包含被移除元素的數組，并且原數組也被改變。

splice主要作用是從一個數組中刪除元素（改變原數組），slice主要作用是從數組中復制一段元素（不改變原數組），兩者有本質區別

用法：

var a = [1,2,3,4,5],b=a.splice(0,2,6,7,8);
//a ==> [6, 7, 8, 3, 4, 5]
//b ==> [1,2]

原生方法實現分析:

確認開始索引位置 start，最小為0。

確認需要移除的長度 deleConuts，最小為0，

確認原數組變化后的新長度

按照索引位置，獲取deleConuts長度的新數組，用于返回

對原數組進行替換items新元素。

最終代碼實現

//按照步驟，數組會被分成3個部分，左邊,arr_left,中間被刪除arr_delete,右邊arr_right
Array.prototype.splice = function(start,deletCounts){
    var max = Math.max,
        min = Math.min,
        len = this.length,//數組長度
        insertCounts = max(arguments.length - 2 ,0),//用來替換的數組的個數，不包括參數值中的前2個
        result = [],//存儲用來返回的數組
        ;
    //確定索引開始位置
    start = start >= 0 ? start || len + start ;//負數表示從數組末尾開始往前數
    //最多能刪除從索引開始到數組結束位置 
    deletCounts = max(min(typeof "deletCounts" === "number" ? deletCounts : len ,len - start),0);
    var changeCounts = insertCounts - deletCounts ,//新增-刪除
        new_len = len + changeCounts ;//原數組變化后的新長度
    //生成返回的數組    
    for (var i = 0; i < deletCounts; i++) {
        var item = this[start + i];//從索引開始后的元素（包括start）
        if(item !== undefined){
            //超過原數組最大索引值會不存在
            result[i] = item
        }
        if(start + i > len - 1){
            //超過原數組最大索引，后續不需要再處理
            break 
        }
    } 
    //替換被刪除項
    var arr_right_length = len - start - deletCounts;//右邊arr_right長度
    if(changeCounts > 0 ){
        //新增大于刪除，則將數組右邊部分arr_right 向右挪動差值個單位，相當于右邊的索引都增加 changeCounts(防止有重疊部分，從右往左復制)
        var i = 1;
        while(arr_right_length){
            this[new_len - i] = this[len - i];
            k ++;
            arr_right_length -- ;
        }
    }else if(changeCounts < 0){
        //新增小于刪除，則將右邊arr_right 向左挪動差值個單位
        var i = start + insertCounts ;//右邊新的索引
        for(var k = 0 ;k < arr_right_length ;k++){
            this[i] = this[i - changeCounts] ;//因為是負數，所以 i -changeCounts表示更大
            i ++ ;
        }
        this.length = new_len;//需要手動修改數組長度
    }   
    for(var i = 0;i < insertCounts ; i++){
        //對新增的部分進行賦值處理
        this[start + i] = arguments[2+i]
    }
    //返回被刪除的元素
    return result
}

附上一圖，希望能夠更明了（畫工太拙劣）：

不對的地方還望指導，謝謝！

GPU云服務器云服務器 js數組splice用法學習之substr() 深度學習之概要 webrtc學習之九

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80723.html

php學習之留言板

摘要：用到對數據進行刪除，具體請看的編寫相關姿勢有發送請求字符串模板頁面元素內容賦值請求返回到這，整體結構就完成了。前言在對php語法有一定了解之后開始，這是第一個php練手項目，涵蓋的知識有公共部分的引用表單的提交請求的接收與響應 interface+implements的使用基于文件的所處理的增刪改查 json的格式化與字符串序列化項目地址message boardps...

biaoxiaoduan 2019-06-27 16:18 評論0 收藏0
jQuery源碼學習之event

摘要：回調隊列中的元素是對象，代表一個事件回調，擁有多個屬性，如等等，其中是回調函數，在觸發時通過傳遞，具體的在后面講。類型是時鍵表示事件名，規則同上，鍵值表示事件觸發時的回調函數。 jQuery源碼學習之event jQuery的事件機制為異步回調，事件監聽的屬性、參數和回調的等保存在Data實例中，在元素上保存該對象的引用。有方法handle，內部執行dispatch；有屬性events...

XboxYan 2019-08-26 12:11 評論0 收藏0
JS學習之Object

摘要：文中的多為構造函數原型對象屬性為函數的專屬屬性，表示函數的原型對象。關于各種數據類型的屬性的展示對象的構造器函數該屬性指向創建該對象原型的構造函數。對對象的凍結狀態的設置和判斷，前者讓凍結對象，后者判斷對象是否被凍結。前言上篇文章介紹了JS的對象,本文將介紹Object這個基類，主要介紹其屬性和方法（其實這些在MDN里都有^_^,點擊這里可以直通MDN）。好了廢話不多說了，直接開始...

qujian 2019-08-20 13:42 評論0 收藏0
JS學習之JSON數據格式

摘要：簡析簡介，是一種數據格式而不是編程語言，它和并沒有從屬關系，任何編程語言都可以使用語法規則分為三類簡單值與語法相同，可以在中表示字符串，數值，布爾值和，但是其不支持數值字符串對象鍵值和鍵名都得用雙引號數組解析和序列化目標對象，過濾器，字符串 JSON簡析 1.簡介 JSON，是一種數據格式而不是編程語言，它和JavaScrip并沒有從屬關系，任何編程語言都可以使用JSON; 2.語法...

isaced 2019-08-21 17:21 評論0 收藏0
集合框架源碼學習之HashMap(JDK1.8)

摘要：所謂拉鏈法就是將鏈表和數組相結合。若遇到哈希沖突，則將沖突的值加到鏈表中即可。在編寫程序中，要盡量避免。目錄： 0-1. 簡介 0-2. 內部結構分析　　0-2-1. JDK18之前　　0-2-2. JDK18之后 0-3. LinkedList源碼分析　　0-3-1. 構造方法　　0-3-2. put方法　　0-3-3. get方法　　0-3-4. resize方法 ...

yangrd 2019-08-15 15:15 評論0 收藏0