首頁 > web前端 > js教程 > JavaScrip數組刪除特定元素的幾種方法總結

JavaScrip數組刪除特定元素的幾種方法總結

韦小宝
發布: 2018-01-25 10:45:00
原創
1124 人瀏覽過


從js陣列中刪除指定元素是我們每個人都遇到的問題,網路上這方面的資料也很多,但有的時間過於久遠,有的內容不夠全面,所以自己來整理下,這篇文章主要來為大家總結介紹了關於JavaScrip數組刪除特定元素的多種方法,需要的朋友可以參考下。

前言

可能一說刪除陣列特定元素你估計不只一種方法可以實現,那麼下面且來看看我總結的這幾種方法,可能會對你有幫助!話不多說了,來一起看看詳細的介紹吧。

來源陣列

#
var arr = ["George", "John", "Thomas", "James", "Adrew", "Martin"];
登入後複製

偽刪除

#什麼是偽刪除呢? 就是說將陣列元素值設為null;

arr[ arr.indexOf( 'Thomas' ) ] = null;
登入後複製

刪除後的陣列是這個樣子的:

["George", "John", null, "James", "Adrew", "Martin"]
登入後複製

不過要注意, 這表示陣列Array也就是變數arr的長度保持不變

完全刪除

#是什麼是完全刪除呢? 這個問題你可能從字面上也能想得到就是真正的刪除數組Array的元素值, 並且會改變數組的長度, 可以通過內置數組對象Array的splice方法來實現這個需求!說到splice這個方法就要說一說它的具體參數了:

Array.prototype.splice = function(start,deleteCount,items) {};
登入後複製

上面是內建物件Array的splice方法原型定義, 中文意思呢是:剪接, 其參數的意義是:

  • start: 起點索引

  • #deleteCount: 要刪除的元素個數

  • items: 刪除後替換/追加的元素
     參數不加時就表示刪除元素, 並且也要結合 deleteCount 的參數值
     如果 deleteCount 為 1, items 參數位置給予一個參數值, 則表示替換
    若deleteCount 為1, items 參數位置給多於一個的參數值, 則表示替換及追加元素

##透過splice方法刪除上面偽刪除留下的元素值null


arr.splice( arr.indexOf( null ), 1 );
登入後複製

刪除後的陣列是這個樣子的:


["George", "John", "James", "Adrew", "Martin"]
登入後複製
登入後複製

既然說到了splice方法就順便再說一下它的其它功能, 如替換元素, 追加元素等操作吧!


splice函數 - 取代元素

#現在陣列結構是這樣的:

##

["George", "John", "James", "Adrew", "Martin"]
登入後複製
登入後複製

想要將陣列元素James 替換為Tom

arr.splice( arr.indexOf( 'James' ), 1, 'Tom' );
登入後複製

替換後的陣列結構是這個樣子的:

["George", "John", "Tom", "Adrew", "Martin"]
登入後複製
登入後複製

splice函數- 取代並追加元素


現在目前陣列結構是這樣的:

["George", "John", "Tom", "Adrew", "Martin"]
登入後複製
登入後複製

想要將陣列元素Tom 替換為Judy 並追加Linda 和Alisa

#

arr.splice( arr.indexOf( 'Tom' ), 1, 'Judy', 'Linda', 'Alisa' );
登入後複製

取代及追加後的陣列結構是這個樣子的:

["George", "John", "Judy", "Linda", "Alisa", "Adrew", "Martin"]
登入後複製
登入後複製

splice函數- 追加元素


追加元素你可以選擇任意位置這取決於你的特定需求, 關鍵是在於start 的取值索引位置而已!目前陣列結構如下所示:

["George", "John", "Judy", "Linda", "Alisa", "Adrew", "Martin"]
登入後複製
登入後複製

比如說要在Linda 和Alisa 之間追加Bill 和Blake

arr.splice( arr.indexOf( 'Linda' ) + 1, 0, 'Bill', 'Blake' );
登入後複製

追加後的陣列結構是下面這個樣子的:

["George", "John", "Judy", "Linda", "Bill", "Blake", "Alisa", "Adrew", "Martin"]
登入後複製

    起點位置
  • arr.indexOf( 'Linda' ) + 1

    就是在陣列元素Linda 之後了

  • #刪除元素個數參數這裡設定的是0 這個是追加元素的關鍵, 也就是說不刪除元素
  • 'Bill', 'Blake' 這個呢就是內置物件Array的splice方法的最後一個參數items 它表示0個是和多個, 根據deleteCount 參數值不同表示的含義也會不同, 這裡deleteCount 參數是0 並且items 又有兩個值來表示這個參數, 所示說就是追加元素值'Bill', 'Blake'

  • 以上說的是刪除數組中特定的元素, 那刪除第一個元素和最後一個元素那實現在是太簡單了, 這裡簡單提一下就是了


刪除數組中第一個元素

arr.shift();
登入後複製

刪除後的陣列是這個樣子的:

["John", "Judy", "Linda", "Bill", "Blake", "Alisa", "Adrew", "Martin"]
登入後複製

刪除陣列中最後一個元素

arr.pop();
登入後複製

刪除後的陣列是這個樣子的:

["John", "Judy", "Linda", "Bill", "Blake", "Alisa", "Adrew"]
登入後複製

以上就是這篇文章的所有內容,希望對大家學習JavaScript提供到幫助! !

相關推薦:


JavaScript模組模式詳解

#javaScript封裝的各種寫法

JavaScript觀察者模式實例詳解

以上是JavaScrip數組刪除特定元素的幾種方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板