首頁 > web前端 > js教程 > JavaScript陣列刪除特定元素方法介紹

JavaScript陣列刪除特定元素方法介紹

巴扎黑
發布: 2017-09-07 10:23:24
原創
1590 人瀏覽過

從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陣列刪除特定元素方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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