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

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

Sep 07, 2017 am 10:23 AM
javascript js 元素

從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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬,在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別,大大縮短了使用者等待時間,提高了使用者體驗;弱勢是:受到模型大小限制,其中準確率也有限。如何在web端使用js實現人臉偵測呢?為了實現Web端人臉識別,需要熟悉相關的程式語言和技術,如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是,由於Web端的計

PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展,股票投資已經成為了越來越多人的選擇。而在股票交易中,蠟燭圖是常用的技術分析方法,它能夠顯示股票價格的變動趨勢,幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧,帶領讀者了解如何繪製股票蠟燭圖,並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前,我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

js和vue的關係 js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係:1、JS作為Web開發基石;2、Vue.js作為前端框架的崛起;3、JS與Vue的互補關係;4、JS與Vue的實踐應用。

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務

JS 的 AI 時代來了! JS 的 AI 時代來了! Apr 08, 2024 am 09:10 AM

JS-Torch簡介JS-Torch是一種深度學習JavaScript函式庫,其語法與PyTorch非常相似。它包含一個功能齊全的張量物件(可與追蹤梯度),深度學習層和函數,以及一個自動微分引擎。 JS-Torch適用於在JavaScript中進行深度學習研究,並提供了許多方便的工具和函數來加速深度學習開發。圖片PyTorch是一個開源的深度學習框架,由Meta的研究團隊開發和維護。它提供了豐富的工具和函式庫,用於建立和訓練神經網路模型。 PyTorch的設計理念是簡單和靈活,易於使用,它的動態計算圖特性使

js刷新當前頁面的方法 js刷新當前頁面的方法 Jan 24, 2024 pm 03:58 PM

js刷新目前頁面的方法:1、location.reload();2、location.href;3、location.assign();4、window.location。詳細介紹:1、location.reload(),使用location.reload()方法可以重新載入目前頁面;2、location.href,可以透過設定location.href屬性來刷新目前頁面等等。

JS中__proto__與prototype的差別 JS中__proto__與prototype的差別 Feb 19, 2024 pm 01:38 PM

JS中__proto__和prototype是兩個與原型相關的屬性,它們在功能上稍有不同。本文將具體介紹並比較這兩者的區別,並提供相應的程式碼範例。首先,我們先來了解它們的意義和用途。 proto__proto__是物件的內建屬性,它用來指向該物件的原型。每個物件都有一個__proto__屬性,包括自訂物件、內建物件和函數物件。透過__proto__屬

See all articles