首頁 web前端 js教程 javascript數組操作(建立、元素刪除、數組的拷貝)_基礎知識

javascript數組操作(建立、元素刪除、數組的拷貝)_基礎知識

May 16, 2016 pm 04:53 PM

1、陣列的建立

複製程式碼 程式碼如下:


程式碼如下:

程式碼如下:

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




複製程式碼


複製程式碼

3、陣列元素的新增



複製程式碼


程式碼
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素加到陣列結尾,並傳回陣列新長度

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




複製程式碼

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



複製程式碼

複製程式碼

複製程式碼複製程式碼
複製碼>
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,5,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,223 ,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 array_max( ) {

   var i, max = this[0];

   for (i = 1; i    {

   if (max    max = this[i];

   }

   return max;

}

Array.prototype.max = array_max;

var x = new Array(1, 2, 3, 4, 5, 6);

var y = x.max( );


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

3、constructor 屬性

表示建立物件的函數。


複製程式碼 程式碼如下:
object.constructor //object 。

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

例如:

複製程式碼 程式碼如下:

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


複製程式碼 程式碼如下:

function MyFunction MyFunction MyFunc>函數體。
}
y = new MyFunc;
if (y.constructor == MyFunc) // 進行處理(條件為真)。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡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脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

前端熱敏紙小票打印遇到亂碼問題怎麼辦? 前端熱敏紙小票打印遇到亂碼問題怎麼辦? Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中,小票打印是一個常見的需求。然而,很多開發者在實...

神秘的JavaScript:它的作用以及為什麼重要 神秘的JavaScript:它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

誰得到更多的Python或JavaScript? 誰得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? 如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

JavaScript難以學習嗎? JavaScript難以學習嗎? Apr 03, 2025 am 12:20 AM

學習JavaScript不難,但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程,通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤,使用調試技巧。 5)優化性能,遵循最佳實踐。

如何實現視差滾動和元素動畫效果,像資生堂官網那樣?
或者:
怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? 如何實現視差滾動和元素動畫效果,像資生堂官網那樣? 或者: 怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? Apr 04, 2025 pm 05:36 PM

實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網(https://www.shiseido.co.jp/sb/wonderland/)中�...

console.log輸出結果差異:兩次調用為何不同? console.log輸出結果差異:兩次調用為何不同? Apr 04, 2025 pm 05:12 PM

深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異,並解釋其背後的原因。 �...

JavaScript的演變:當前的趨勢和未來前景 JavaScript的演變:當前的趨勢和未來前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

See all articles