搜尋
首頁web前端js教程js數組的操作詳解_javascript技巧

用js有很久了,但都沒有深究過js的陣列形式。偶爾用用也就是簡單的string.split(char)。這段時間做的一個項目,用到陣列的地方很多,自以為js高手的自己居然無從下手,一下狠心,我學!呵呵。學了之後才知道,js數組的功能強大很,遠比VB,C#強多了,大家慢慢看吧

1、陣列的建立

複製程式碼 程式碼如下:

var arrayObj = new Array();陣列
var arrayObj = new Array([size]); //建立一個陣列並指定長度,注意不是上限,是長度
var arrayObj = new Array([element0[, element1[, ...[ , elementN]]]]); //建立一個陣列並賦值

要說明的是,雖然第二種方法建立數組指定了長度,但實際上所有情況下數組都是變長的,也就是說即使指定了長度為5,仍然可以將元素儲存在規定長度以外的,注意:這時長度會隨之改變。

2、陣列的元素的存取

複製程式碼 程式碼如下:

var testGetArrValue=arrayObjValue=arrayO的元素值
arrayObj[1]= "這是新值"; //給予陣列元素新的值

3、陣列元素的添加

複製程式碼 程式碼如下:

arrayObj. push([🎜>

arrayObj. push([item11 [item2 [item11. [itemN ]]]]);// 將一個或多個新元素加入陣列結尾,並傳回陣列新長度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]); // 將一個或多個新元素加入數組開始,數組中的元素自動後移,返回數組新長度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN ]]]]);//將一個或多個新元素插入到陣列的指定位置,插入位置的元素自動後移,返回""。

4、陣列元素的刪除

複製程式碼
程式碼如下:


arrayObj.pop(); //最後一個移除(); //最後一個移除元素並傳回該元素值
arrayObj.shift(); //移除最前一個元素並傳回該元素值,數組中元素自動前移
arrayObj.splice(deletePos,deleteCount); //刪除從指定位置deletePos開始的指定數量deleteCount的元素,陣列形式傳回所移除的元素

5、陣列的截取與合併

複製程式碼
程式碼如下:


arrayObj.slice(start, [end]); /以陣列的形式傳回陣列的一部分,注意不包含end 對應的元素,如果省略end 將複製start 之後的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]] ]]); //將多個陣列(也可以是字串,或是陣列和字串的混合)連接為一個陣列,傳回連接好的新的陣列

6、陣列的拷貝

複製程式碼
程式碼如下:


arrayObj.slice(0); //傳回數組的拷貝數組,注意是一個新的數組,不是指向
arrayObj.concat(); //返回數組的拷貝數組,注意是一個新的數組,不是指向

7、陣列元素的排序

複製程式碼
程式碼如下:


arrayObj.reverse(); //反轉元素(最前面的排到最後、最後的排到最前面),回傳陣列位址
arrayObj.sort(); //對陣列元素排序,回傳陣列位址

8、陣列元素的字串化

複製程式碼
程式碼如下:

arrayObj.join(separator); //傳回字串,這個字串將陣列的每一個元素值連接在一起,中間用 separator 隔開。
toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用

二、陣列物件的3個屬性

1、length 屬性

    Length屬性表示陣列的長度,即其中元素的數量。因為陣列的索引總是由0開始,所以一個陣列的上下限分別是:0和length-1。和其他大多數語言不同的是,JavaScript數組的length屬性是可變的,這一點需要特別注意。當length屬性被設定得更大時,整個數組的狀態事實上不會發生變化,僅僅是length屬性變大;當length屬性被設定得比原來小時,則原先數組中索引大於或等於length的元素的值全部被遺失。以下是示範改變length屬性的例子:

複製程式碼 代碼如下:

var arr=[12,23,55,3 25,98,76,54,56,76];
//定義了一個包含10個數字的陣列
alert(arr.length); //顯示陣列的長度10
arr.length =12; //增加陣列的長度
alert(arr.length); //顯示陣列的長度已經變成12
alert(arr[8]); //顯示第9個元素的值,為56
arr.length=5; //將陣列的長度減少到5,索引等於或超過5的元素被丟棄
alert(arr[8]); //顯示第9個元素已經變成"undefined"
arr.length=10; //將陣列長度還原為10
alert(arr[8]); //雖然長度被還原為10,但第9個元素卻無法收回,顯示"undefined"

  由上面的程式碼我們可以清楚的看到length屬性的性質。但length物件不僅可以明確的設置,它也有可能被隱式修改。 JavaScript中可以使用一個未宣告過的變數,同樣,也可以使用一個未定義的陣列元素(指索引超過或等於length的元素),這時,length屬性的值將會被設定為所使用元素索引的值加1。例如下面的程式碼:

複製程式碼 代碼如下:

var arr=[12,23,5,3 25,98,76,54,56,76];
alert(arr.length);
arr[15]=34;
alert(arr.length);

程式碼中同樣是先定義了一個包含10個數字的數組,透過alert語句可以看出其長度為10。隨後使用了索引為15的元素,將其賦值為15,即 arr[15]=34,這時再用alert語句輸出數組的長度,得到的是16。無論如何,對於習慣強型別程式設計的開發人員來說,這是一個很令人驚訝的功能。事實上,使用new Array()形式建立的數組,其初始長度就是為0,而正是對其中未定義元素的操作,才會使數組的長度改變。
    由上面的介紹可以看到,length屬性是如此的神奇,利用它可以方便的增加或減少數組的容量。因此對length屬性的深入了解,有助於在開發過程中靈活運用。

2、prototype 屬性

傳回物件類型原型的參考。 prototype 屬性是 object 共有的。
objectName.prototype
objectName 參數是object物件的名稱。

說明:用 prototype 屬性提供物件的類別的一組基本功能。 物件的新實例「繼承」賦予該物件原型的操作。
    對於陣列對象,以下列範例說明prototype 屬性的用途。
    為陣列物件新增傳回陣列中最大元素值的方法。要完成這一點,請聲明一個函數,將它加入 Array.prototype, 並使用它。

複製程式碼 程式碼如下:

function 🎜>    var i,
    max = this[0];
    for (i = 1; i         max = this[i];
    }
    return max;
}
Array.prototype.max = array_max
}
Array.prototype.max = array_max;var y = x.max();

該程式碼執行後,y 儲存數組 x 中的最大值,或說 6。

3、constructor 屬性

表示建立物件的函數。
object.constructor //object是物件或函數的名稱。

說明:constructor 屬性是所有具有 prototype 的物件的成員。它們包括除 Global 和 Math 物件以外的所有 JScript 固有物件。 constructor 屬性保存了對建構特定物件實例的函數的參考。

例如:

複製程式碼 程式碼如下:

x = new String("Hi");

x = new String("Hi");
if (x.constructor == String) // 進行處理(條件為真)。

複製程式碼
程式碼如下:


function MyFunc {
function MyFunc {

> 函數。

}
複製程式碼


程式碼如下:

y = new MyFunc;
對陣列來說:

複製程式碼

程式碼如下: ();
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript數據類型:瀏覽器和nodejs之間是否有區別?JavaScript數據類型:瀏覽器和nodejs之間是否有區別?May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致,但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window,在Node.js中為global。 2)Node.js獨有Buffer對象,用於處理二進制數據。 3)性能和時間處理在兩者間也有差異,需根據環境調整代碼。

JavaScript評論:使用//和 / * * / * / * /JavaScript評論:使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript:開發人員的比較分析Python vs. JavaScript:開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型,適合科學計算和數據分析。 2.JavaScript採用弱類型,廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢,選擇時應根據項目需求決定。

Python vs. JavaScript:選擇合適的工具Python vs. JavaScript:選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型:1)數據科學和自動化任務選擇Python;2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞,而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript:了解每個的優勢Python和JavaScript:了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢,選擇取決於項目需求和個人偏好。 1.Python易學,語法簡潔,適用於數據科學和後端開發,但執行速度較慢。 2.JavaScript在前端開發中無處不在,異步編程能力強,Node.js使其適用於全棧開發,但語法可能複雜且易出錯。

JavaScript的核心:它是在C還是C上構建的?JavaScript的核心:它是在C還是C上構建的?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1)JavascriptwasdesignedAsignedAsalightWeight,drackendedlanguageforwebbrowsers.2)Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers,典型地,替代品。

JavaScript應用程序:從前端到後端JavaScript應用程序:從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗,後端通過Node.js處理服務器任務。 1.前端示例:改變網頁文本內容。 2.後端示例:創建Node.js服務器。

Python vs. JavaScript:您應該學到哪種語言?Python vs. JavaScript:您應該學到哪種語言?May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統:1)職業發展:Python適合數據科學和後端開發,JavaScript適合前端和全棧開發。 2)學習曲線:Python語法簡潔,適合初學者;JavaScript語法靈活。 3)生態系統:Python有豐富的科學計算庫,JavaScript有強大的前端框架。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具