首頁 web前端 js教程 JavaScript數組的增刪改查功能實現

JavaScript數組的增刪改查功能實現

Aug 22, 2017 pm 05:24 PM
javascript js 實現

本篇文章主要介紹了JS數組操作之增刪改查的簡單實現,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

JS提供了很多方便操作數組的方法,本文所要分享的就是如何快速對數組進行增、刪、改、查。

一、增

1、push()

可接收任意數量的參數,把它們逐一加至數組末尾,並返回修改後數組的長度。例如:


var arr = [];
var len = arr.push(1);
console.log(arr); // [1]
console.log(len); // 1
len = arr.push(2,3);
console.log(arr); // [1,2,3]
console.log(len); // 3
登入後複製

2、unshift()

此方法與push()類似,也可接收任意數量的參數,只不過是將參數逐一加入數組前端而已,同樣地返回新數組長度。咱們接著上面的例子:


var len = arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
console.log(len); // 4
len = arr.unshift(-2,-1);
console.log(arr);  // [-2, -1, 0, 1, 2, 3]
console.log(len);  // 6
登入後複製

#3、concat()

該方法與push()方法有點類似,同樣是將元素加入數組末尾,只不過這個數組已經不是原來的數組了,而是其副本,所以concat()操作數組後會傳回一個新的數組。具體用法如下:

① 不傳參數,傳回目前數組副本

#② 傳遞一或多個數組,則該方法會將這些數組中的每一項都添加到結果陣列中

③ 傳遞非陣列參數,這些參數就會被直接加到結果陣列的末端

繼續接著上面的栗子:



##
var arr1 = arr.concat(4,[5,6]);
console.log(arr);  // [-2, -1, 0, 1, 2, 3]
console.log(arr1);  // [-2, -1, 0, 1, 2, 3, 4, 5, 6]
登入後複製

範例中一目了然,原始數組不變,新數組後面增加了4、5、6三個元素。 4、splice()

前面的三個方法都具有很大局限性,因為不是添加到數組前就是數組後,而splice()就不一樣了,它非常靈活和強大。靈活是因為它可以添加元素到數組的任意位置,強大是因為它除了可以添加元素之外還具有刪除和替換元素的功能(這個後面會陸續講到)。 splice()可以在陣列中指定位置新增任意數量的元素,需要傳入至少3個參數: 起始位置、0(要刪除的元素個數)和要新增的元素。

依然接著上面的例子繼續:

arr.splice(3,0,0.2,0.4,0.6,0.8);
console.log(arr); // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2, 3]
登入後複製

#可以看出,splice()與push()和unshift()一樣是直接在原始數組上修改的。

二、刪

1、pop()


與push()方法配合使用可以構成後進先出的堆疊,此方法可從陣列末端刪除最後一項並傳回該項目。

接著上例:

var item = arr.pop();
console.log(item);  // 3
console.log(arr);  // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]
登入後複製


#2、shift()

與push()方法搭配使用可以構成先進先出的佇列,該方法可刪除數組第一項並傳回該項。


繼續接著上例:

var item = arr.shift();
console.log(item); // -2
console.log(arr); // [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]
登入後複製

#3、slice()

該方法同concat()同樣是傳回一個新數組,不會影響原數組,只不過slice()是用來裁剪數組的,返回裁剪下來的數組,具體用法如下:

slice()方法可以接受一或兩個參數,即要傳回項目的起始和結束位置。在只有一個參數的情況下,slice()方法會傳回從該參數指定位置開始到目前陣列末端的所有項目。如果有兩個參數,則該方法傳回起始和結束位置之間的項目-但不包括結束位置的項。


咱們還是繼續接著上面例子~~

var arr2 = arr.slice(2,6);
console.log(arr); // [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]
console.log(arr2); // [0.2, 0.4, 0.6, 0.8]
登入後複製
4、splice()

好,繼續講這個「萬能」的方法。

上面講到,該方法在添加數組元素的時候需要傳入3個以上參數,而其中第2個參數就是用來指定要刪除元素的個數的,那時我們傳的是數字0。那麼,如果單單只需刪除元素,我們就只需給splice()傳入兩個參數,第1個參數用於指定要刪除的第一項的位置,第2個參數用於指定要刪除元素的個數。

繼續上例~~


arr.splice(2,4);
console.log(arr); // [-1, 0, 1, 2]
登入後複製

從索引項為2的位置開始刪除4個元素,所以結果為[-1, 0, 1 , 2]。 三、改

這個其實最靈活的方式就是直接使用splice()這個強大的方法了,其實透過以上對該方法的了解,我們大致上就能知道使用此方法修改陣列元素的基本原理。

原理很簡單,就是在指定位置插入任意數量的元素,並且同時刪除任意數量的元素。

依然繼續上例~~


arr.splice(2,1,0.5,1,1.5);
console.log(arr);  // [-1, 0, 0.5, 1, 1.5, 2]
登入後複製

####四、查############# ##indexOf()和lastIndexOf()#########這兩個方法都接收兩個參數:要尋找的項目和(可選的)表示尋找起點位置的索引。其中,indexOf()從陣列的開頭(位置0)開始向後查找,lastIndexOf()方法則從陣列的末端開始向前查找。 ######例如:############
var index = arr.indexOf(0);
console.log(index);  // 1
index = arr.indexOf(3,0);
console.log(index);  // -1
登入後複製
###當找不到該元素時,傳回 -1 ,lastIndexOf()方法同理。 ###

以上是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)

華為手機如何實現雙微信登入? 華為手機如何實現雙微信登入? Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入?隨著社群媒體的興起,微信已成為人們日常生活中不可或缺的溝通工具之一。然而,許多人可能會遇到一個問題:在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說,實現雙微信登入並不困難,本文將介紹華為手機如何實現雙微信登入的方法。首先,華為手機自帶的EMUI系統提供了一個很方便的功能-應用程式雙開。透過應用程式雙開功能,用戶可以在手機上同

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

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

PHP程式設計指南:實作斐波那契數列的方法 PHP程式設計指南:實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

程式語言PHP是一種用於Web開發的強大工具,能夠支援多種不同的程式設計邏輯和演算法。其中,實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中,將介紹如何使用PHP程式語言來實作斐波那契數列的方法,並附上具體的程式碼範例。斐波那契數列是一個數學上的序列,其定義如下:數列的第一個和第二個元素為1,從第三個元素開始,每個元素的值等於前兩個元素的和。數列的前幾元

如何在華為手機上實現微信分身功能 如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視,微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號,方便管理和使用。在華為手機上實現微信分身功能並不困難,只需要按照以下步驟操作即可。第一步:確保手機系統版本和微信版本符合要求首先,確保你的華為手機系統版本已更新至最新版本,以及微信App

掌握Golang如何實現遊戲開發的可能性 掌握Golang如何實現遊戲開發的可能性 Mar 16, 2024 pm 12:57 PM

在現今的軟體開發領域中,Golang(Go語言)作為一種高效、簡潔、並發性強的程式語言,越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發,並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言,Golang正在建構大型遊戲系統

PHP遊戲需求實作指南 PHP遊戲需求實作指南 Mar 11, 2024 am 08:45 AM

PHP遊戲需求實現指南隨著網路的普及和發展,網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲,而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求,並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中,遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性,例如姓名、等級、經驗值等,並提供方法來操作這些

如何在Golang中實現精確除法運算 如何在Golang中實現精確除法運算 Feb 20, 2024 pm 10:51 PM

在Golang中實現精確除法運算是一個常見的需求,特別是在涉及金融計算或其它需要高精度計算的場景中。 Golang的內建的除法運算子「/」是針對浮點數計算的,並且有時會出現精度遺失的問題。為了解決這個問題,我們可以藉助第三方函式庫或自訂函數來實現精確除法運算。一種常見的方法是使用math/big套件中的Rat類型,它提供了分數的表示形式,可以用來實現精確的除法運算

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的實踐應用。

See all articles