2. 程式人生 > >Javascript Jquery 中的陣列定義與操作

Javascript Jquery 中的陣列定義與操作

阿新 • • 發佈：2019-02-07
1.認識陣列

陣列就是某類資料的集合，資料型別可以是整型、字串、甚至是物件
Javascript不支援多維陣列，但是因為數組裡面可以包含物件（陣列也是一個物件），所以陣列可以通過相互巢狀實現類似多維陣列的功能

1.1 定義陣列

宣告有10個元素的陣列

var a = new Array(10);

此時為a已經開闢了記憶體空間，包含10個元素，用陣列名稱加 [下標] 來呼叫，例如 a[2] 但此時元素並未初始化，呼叫將返回 undefined

以下程式碼定義了個可變陣列，並進行賦值

var a = new Array();
a[0] = 10;
a[1] = "aaa";
a[2] = 12.6;

上面提過了，數組裡面可以放物件，例如下面程式碼


var a =  new Array();
a[0]  = true;
a[1]  = document.getElementByIdx_x("text");
a[2]  = {x:11, y:22};
a[3]  = new Array();

陣列可以例項化的時候直接賦值，例如

var a = new Array(1, 2, 3, 4, 5);
var b = [1, 2, 3, 4, 5];

a 和 b 都是陣列，只不過b用了隱性宣告，建立了另一個例項，此時如果用alert(a==b)將彈出false

1.2 多維陣列

其實Javascript是不支援多維陣列的，在asp裡面可以用 dim a(10,3)來定義多維陣列，在Javascript裡面，如果用 var a = new Array(10,3) 將報錯

但是之前說過，數組裡面可以包含物件，所以可以把數組裡面的某個元素再宣告為陣列，例如

var a = new Array();
a[0] = new Array();
a[0][0] = 1;
alert(a[0][0]); //彈出 1

宣告的時候賦值

var a = new Array([1,2,3], [4,5,6],  [7,8,9]);
var b = [[1,2,3], [4,5,6], [7,8,9]];

效果一樣，a採用常規例項化，b是隱性宣告，結果都是生成一個多維陣列

1.3 Array literals

這個還真不知中文怎麼叫，文字陣列？
說到陣列，不得不說到Array Literals，陣列其實是特殊的物件，物件有特有屬性和方法，通過 物件名.屬性 、物件.方法() 來取值和呼叫，而陣列是通過下標來取值，Array Literals跟陣列有很多相似，都是某資料型別的集合，但是Array Literals從根本來說，是個物件，宣告和呼叫，跟陣列是有區別


var aa = new Object();
aa.x = "cat";
aa.y = "sunny";
alert(aa.x);  //彈出cat

建立一個簡單的物件，一般呼叫是通過aa.x，而如果當成Array literals的話，用alert(aa[“x”])一樣會彈出cat

var a = {x:"cat",  y:"sunny"};
alert(a["y"]); //彈出sunny

這是另一種建立物件的方法，結果是一樣的

2.陣列元素的操作

上面已經說過，可以通過 陣列[下標] 來讀寫元素

下標的範圍是 0 – (23(上標2) -1)，當下標是負數、浮點甚至布林值的時候，陣列會自動轉換為物件型別，例如

var b  = new Array();
b[2.2]  = "XXXXX";
alert(b[2.2]); //-> XXXXX

此時相當於b[“2.2”] = “XXXXX”

2.1陣列的迴圈

var a = [1,2,3,4,5,6];
for(var i =0; i<a.length; i++){
alert(a[i]);
}

這是最常用的，歷遍陣列，程式碼將依次彈出1至6

還有一種常用的

var a = [1,2,3,4,5,6];
for(var e in a){
alert(e);
}

還是依次彈出1至6，for…in是歷遍物件（陣列是特殊的物件）物件，用在陣列上，因為陣列沒有屬性名，所以直接輸出值，這結構語句用在物件上，例如下面

var a = {x:1,y:2,z:3};
for(var e in a){
alert(e  + ":" + a[e]);
}

此時e取到的是屬性名，即 x、y、x，而要取得值，則採用 陣列名[屬性]，所以 a[e] 等同於 a[“x”]、a[“y”]、a[“z”]

2.2陣列常用函式

concat

在現有陣列後面追加陣列，並返回新陣列，不影響現有陣列

var a = [123];
var b = "sunnycat";
var c =  ["www",21,"ido"];
var d = {x:3.14, y:"SK"};
var e = [1,2,3,4,[5,6,[7,8]]];
alert(a.concat(b));  // -> 123,sunnycat
alert(a); //  -> 123
alert(b.concat(c, d));  // -> sunnycatwww,21,ido[object  Object]
alert(c.concat(b));  // -> www,21,ido,sunnycat
alert(e.concat(11,22,33).join(" #  "));  // -> 1 # 2 # 3  # 4 # 5,6,7,8 # 11 # 22 # 33

需要注意的是隻能用於陣列或字串，如果被連線（前面的a）的是數值、布林值、物件，就會報錯，字串連線陣列時，字串會跟陣列首元素拼接成新元素，而陣列連線字串則會追加新元素（這點我也不清楚原委，知情者請透露），對於數組裡麵包含陣列、物件的，連線後保持原樣

join

用指定間隔符連起來，把陣列轉為字串

var a = ['a','b','c','d','e','f','g'];
lert(a.join(","));  // -> a,b,c,d,e,f,g 相當於a.toString()
alert(a.join(" x ")); // -> a x b x c x d x e x f x g

這個很容易理解，但需要注意的是隻轉換一維數組裡面，如果數組裡面還有陣列，將不是採用join指定的字串接，而是採用預設的toString()，例如

var a =  ['a','b','c','d','e','f','g',[11,22,33]];
alert(a.join(" * ")); // -> a * b * c * d * e * f * g *  11,22,33

數組裡面的陣列，並沒用 * 連線

pop

刪除陣列最後一個元素，並返回該元素

var a =  ["aa","bb","cc"];
document.write(a.pop());  // -> cc
document.write(a);  // -> aa, bb

如果陣列為空，則返回undefined

push

往陣列後面新增陣列，並返回陣列新長度

var a =  ["aa","bb","cc"];
document.write(a.push("dd"));  // -> 4
document.write(a);  // -> aa,bb,cc,dd
document.write(a.push([1,2,3])); // -> 5
document.write(a);  // -> aa,bb,cc,dd,1,2,3

跟concat的區別在於，concat不影響原陣列，直接返回新陣列，而push則直接修改原陣列，返回的是陣列新長度

sort

陣列排序，先看個例子

var a = [11,2,3,33445,5654,654,"asd","b"];
alert(a.sort()); // -> 11,2,3,33445,5654,654,asd,b

結果是不是很意外，沒錯，排序並不是按整型大小，而是字串對比，就是取第一個字元的ANSI碼對比，小的排前面，相同的話取第二個字元再比，如果要按整型數值比較，可以這樣

var a = [11,2,3,33445,5654,654];
a.sort(function(a,b) {
return a - b;
});
alert(a); //  -> 2,3,11,654,5654,33445

sort()方法有個可選引數，就是程式碼裡的function，這是個簡單的例子，不可對非數字進行排序，非數字需要多做判斷，這裡就不多講

reverse

對陣列進行反排序跟，sort()一樣，取第一字元ASCII值進行比較

var a = [11,3,5,66,4];
alert(a.reverse()); // -> 4,66,5,3,11

如果數組裡面還包含陣列，則當為物件處理，並不會把元素解出來

>var a = ['a','b','c','d','e','f','g',[4,11,33]];
alert(a.reverse()); // -> 4,11,33,g,f,e,d,c,b,a
alert(a.join(" * ")); // -> 4,11,33 * g * f * e * d * c * b * a

按理應該是11排最後面，因為這裡把 4,11,33 當做完整的物件比較，所以被排在第一位。看不明白的話，用join()串起來，就明瞭多

shift

刪除陣列第一個元素，並返回該元素，跟pop差不多

var a =  ["aa","bb","cc"];
document.write(a.shift());  // -> aa
document.write(a);  // -> bb,cc

當陣列為空時，返回undefined

unshift

跟shift相反，往陣列最前面新增元素，並返回陣列新長度

var a =  ["aa","bb","cc"];
document.write(a.unshift(11));  // -> 4 注：IE下返回undefined
document.write(a);  // -> 11,aa,bb,cc
document.write(a.unshift([11,22]));  // -> 5
document.write(a);  // -> 11,22,11,aa,bb,cc
document.write(a.unshift("cat")); // -> 6
document.write(a);  // -> cat,11,22,11,aa,bb,cc

注意該方法，在IE下將返回undefined，貌似微軟的bug，我在firefox下則能正確發揮陣列新長度

slice

返回陣列片段

var a = ['a','b','c','d','e','f','g'];
alert(a.slice(1,2)); // -> b
alert(a.slice(2));  // -> c,d,e,f,g
alert(a.slice(-4));  // -> d,e,f,g
alert(a.slice(-2,-6));  // -> 空

a.slice(1,2)，從下標為1開始，到下標為2之間的數，注意並不包括下標為2的元素
如果只有一個引數，則預設到陣列最後
-4是表示倒數第4個元素，所以返回倒數的四個元素
最後一行，從倒數第2開始，因為是往後擷取，所以顯然取不到前面的元素，所以返回空陣列，如果改成 a.slice(-6,-2) 則返回b,c,d,e

splice

從陣列刪除某片段的元素，並返回刪除的元素

var a = [1,2,3,4,5,6,7,8,9];
document.write(a.splice(3,2));  // -> 4,5
document.write(a);  // -> 1,2,3,6,7,8,9
document.write(a.splice(4)); // -> 7,8,9 注：IE下返回空
document.write(a);  // -> 1,2,3,6
document.write(a.splice(0,1));  // -> 1
document.write(a);  // -> 2,3,6
document.write(a.splice(1,1,["aa","bb","cc"]));  // -> 3
document.write(a);  // -> 2,aa,bb,cc,6,7,8,9
document.write(a.splice(1,2,"ee").join("#")); // -> aa,bb,cc#6
document.write(a);  // -> 2,ee,7,8,9
document.write(a.splice(1,2,"cc","aa","tt").join("#")); // -> ee#7
document.write(a);  // -> 2,cc,aa,tt,8,9

注意該方法在IE下，第二個引數是必須的，不填則預設為0，例如a.splice(4)，在IE下則返回空，效果等同於a.splice(4,0)

toString

把陣列轉為字串，不只陣列，所有物件均可使用該方法

var a =  [5,6,7,8,9,["A","BB"],100];
document.write(a.toString());  // -> 5,6,7,8,9,A,BB,100
var b = new Date()
document.write(b.toString());  // -> Sat Aug 8 17:08:32 UTC+0800  2009
var c = function(s){
alert(s);
}
document.write(c.toString());  // -> function(s){ alert(s); }

布林值則返回true或false，物件則返回[object objectname]
相比join()方法，join()只對一維陣列進行替換，而toString()則把整個陣列（不管一維還是多維）完全平面化
同時該方法可用於10進位制、2進位制、8進位制、16進位制轉換，例如

var a =  [5,6,7,8,9,"A","BB",100];
for(var i=0; i<a.length; i++){
document.write(a[i].toString()  + " 的二進位制是 "  + a[i].toString(2) + " ，八進位制是 " + a[i].toString(8) + " ，十六進位制是 " + a[i].toString(16)); //  -> 4,5
}

輸出結果

5 的二進位制是 101 ，八進位制是 5 ，十六進位制是 5
6 的二進位制是 110 ，八進位制是 6 ，十六進

相關推薦

Javascript Jquery 中的陣列定義與操作

1.認識陣列陣列就是某類資料的集合，資料型別可以是整型、字串、甚至是物件Javascript不支援多維陣列，但是因為數組裡面可以包含物件（陣列也是一個物件），所以陣列可以通過相互巢狀實現類似多維陣列的功能1.1 定義陣列宣告有10個元素的陣列var a = new Array(10);此時為a已經開闢了記憶體

JavaScript的函式（定義與解析、匿名函式、函式傳參、return關鍵字）和陣列（操作資料的方法、多維陣列、陣列去重）

函式 函式就是重複執行的程式碼片。 1、函式定義與執行 <script type="text/javascript"> // 函式定義 function aa(){ alert('hello!'); } // 函式執行

JavaScript中陣列相關基礎操作及實現

JavaScript中陣列操作比較靈活，關於js中陣列操作，寫了一些陣列操作程式碼，並在瀏覽器控制檯驗證。以下是js程式碼： <script type="text/javascript"> console.log("---------------JavaScript陣列相關實

JavaScript中陣列定義的幾種方法，以及關於陣列長度的討論

大家在使用JavaScript編寫指令碼語言的時候，尤其是習慣使用Java語言的朋友，定義了一個固定長度的陣列，但是使用了一個超出定義陣列的元素，程式並沒有報“陣列越界”錯誤，這到底是什麼原因呢？今天我們來分享一下！ 1、陣列定義的四種方法： var arr_1 = ne

jQuery中的事件與DOM操作

jQuery中的事件 基礎事件 滑鼠事件： click( )：單擊滑鼠時 mouseover( )：滑鼠指標移過時 mouseout( )：滑鼠指標移出時 mouseenter( )：滑鼠指標進入時 mouseleave( )：滑鼠指標離開時 鍵盤事件： key

jQuery中的$(window)與$(document)幾個用法區別

圖片 document window function 準備就緒 [window對象] 它是一個頂層對象,而不是另一個對象的屬性，即表示瀏覽器中打開的窗口。 1、屬性　　defaultStatus 缺省的狀態條消息　　document 當前顯示的文檔(該屬性本身也是一個對象)　　f

jquery中innerheight outerHeight()與height()的區別

() true class lan 方法 target alt title include 1. .height() 獲取匹配元素集合中的第一個元素的當前計算高度值 或 設置每一個匹配元素的高度值（帶一個參數）。 註意：1）.css(‘height‘)和.height

jQuery中的事件與驅動

效果 代碼 產生 down ESS 名稱 用戶 use 註意 1.jQuery中的事件 在jQuery中，事件總體分為倆大類：基礎事件和符合事件。 jQuery中的簡單事件，與Javascript中的事件 幾乎一樣，都含有鼠標事件、鍵盤事件、載件事件等，只是其

JQuery中的事件與動畫

自定義 打印 sele 樣式 mouseover bind button cli ima 1.鼠標事件 方法　　　　　　 描述 　　　　　　　　　　　　　　　　　　　　　　執行時機 click( ) 　　　　 　 觸發或將函數綁定到指定元素的click事件 　　　

使用jQuery快速高效制作網頁交互特效——07 第七章 jQuery中的事件與動畫

left true scale 阻止 ble something 傳遞 程序 節點 1、 jQuery中的事件： ●和WinForm一樣，在網頁中的交互也是需要事件來實現的，例如tab切換效果，可以通過鼠標單擊事件來實現 ●jQuery事件是對JavaScr

Java的陣列定義與方法過載——有C++基礎的Java入門（三）

目錄 一、 陣列的定義 1、定義 2、 原理 3、 賦值方式 二、Java的方法過載 1、 概念 （1） 過載 （2） 目的 2、例子 （1） 比較兩個數值的大小 （2） 執行方式及結果 一、 陣列的定義 1、定義 資料型別 [ ]&n

jQuery中 wrap() wrapAll() 與 wrapInner()的區別

學習其它人寫的程式碼時遇到了jQuery中的wrap，和 wrapInner方法，查閱文件後做一個記錄作為學習筆記wrap()方法原始碼：$("div").wrap("<tr></tr>").wrap("<td></td>");這句話意思是先把div用tr包起來

資料結構 筆記：樹的定義與操作

樹是一種非線性的資料結構 樹是由n（n>=0）個結點組成的有限集合 -如果 n = 0，成為空樹； -如果n > 0，則： ·有一個特定的稱之為根（root）的結點 ·根據點只有直接後繼，但沒有直接前驅 ·除根以外的其他結點劃分為m（m>=0）個互補相交的有

隊列的定義與操作——順序存儲和鏈式存儲

順序存儲 type void == int isf sem urn ont 　　隊列的 存儲結構 有 順序存儲 和 鏈式存儲。 　　1. 隊列的順序存儲與操作 (循環隊列) 1 typedef int Position; 2 struct QNode { 3

堆的定義與操作

與操作 down 下標 代碼 其中 cap 找到 truct style 　　如題，堆的定義與操作。 1 #define MAXDATA 1000 /* 該值應根據具體情況定義為大於堆中所有可能元素的值 */ 2 3 typedef struct H

jQuery中的mouseenter與mouseover

ref enter light hash clas -h data- jquery href See the Pen mouseenter in jq by wincent98 (@wincent98) on CodePen.jQuery中的mouseenter與mouse

資料結構 筆記：圖的定義與操作

定義 -圖是由頂點集合（Vertex）及頂點間的關係集合（Edge）組成的一種資料結構 -Graph = （V,E） -V= 是頂點的有窮非空集合 -E=是頂點之間關係的有窮集合 無向邊 -頂點x和y之間的邊沒有方向，則稱該邊為無向邊 -<x,y> 與<

ES5比較Jquery中的each與map 方法？

1.each         es5： var arr = [1, 5, 7, 8, 9];var arr1 = []; arr.forEach(function (v, i) { arr1.push(v * 4) //無法跳出迴圈 沒有跳

java中-的流-與操作

/* 位元組輸出流  OutputStrema：     * OutputStream抽象類     * write(int b); 將指定的位元組寫入此流中     * write(byte[] b); 將

HTML-jQuery中的事件與動畫

網頁中的事件 和WinForm一樣，在網頁中的互動也是需要事件來實現的，例如tab切換效果，可以通過滑鼠單擊事件來實現 jQuery中的事件： jQuery事件是對JavaScript事件的封裝，常用事件分類： 基礎事件：①滑鼠事件；②鍵盤事件；③window事件