javascript數組操作(去重,排序,串連)

最後更新：2017-01-17 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1、數組的建立

代碼如下

複製代碼

var arrayObj = new Array();　//建立一個數組

var arrayObj = new Array([size]);　//建立一個數組並指定長度，注意不是上限，是長度

var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　//建立一個數組並賦值

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

2、數組的元素的訪問

代碼如下

複製代碼

var testGetArrValue=arrayObj[1]; //擷取數組的元素值

arrayObj[1]= "這是新值"; //給數組元素賦予新的值

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的元素，數組形式返回所移除的元素

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的特殊用法，不常用

例子

代碼如下

複製代碼

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數組的方法</title>
</head>
<body>
<script type="text/javascript">
//concat() 方法用於串連兩個或多個數組。
//該方法不會改變現有的數組，而僅僅會返回被串連數組的一個副本。
//arrayObject.concat(arrayX,arrayX,......,arrayX)
//arrayX必需。該參數可以是具體的值，也可以是數組對象。可以是任意多個。
var a = [1,2,3];
var b = a.concat(4,5);
var c = ['jack','jonhn','tom'];
var d = ['jim','111cn.net'];
var e = c.concat(d);
document.write(a+" "); // 1,2,3
document.write(b+" "); //1,2,3,4,5
document.write(e+" ");

//join() 方法用於把數組中的所有元素放入一個字串。元素是通過指定的分隔字元進行分隔的。
//arrayObject.join(separator)
//separator可選。指定要使用的分隔字元。如果省略該參數，則使用逗號作為分隔字元。
var a1 = [1,2,3];
document.write("join方法 "+a1.join()+" ");
var b1 = [1,2,3];
document.write(b1.join(".")+" "); //使用分隔字元來分隔數組中的元素，輸出1.2.3
document.write("join()的傳回值類型為："+typeof(a1.join())+" ");

//pop() 方法用於刪除並返回數組的最後一個元素。
//arrayObject.pop()
//建立一個數組，然後刪除數組的最後一個元素。請注意，這也會改變數組的程度：
var a2 = [1,2,3];
var b2 = a2.pop();
document.write(b2+" "); //返回數組最後一個元素 3
document.write(a2+" "); //原有數組已經發生改變，去掉最後一個元素,返回 1，2

//push() 方法可向數組的末尾添加一個或多個元素，並返回新的長度。
//arrayObject.push(newelement1,newelement2,....,newelementX)
//newelement1必需。要添加到數組的第一個元素。
//newelementX可選。可添加多個元素。
var a3 = [1,2,3];
var b3 = a3.push("111cn.net");
document.write(b3+" "); //輸出新的數組長度 4
document.write(a3+" "); //原來的數組已經改變，1,2,3,111cn.net

//reverse() 方法用於顛倒數組中元素的順序。
//arrayObject.reverse() 該方法會改變原來的數組，而不會建立新的數組。
var a4 = [1,2,3];
var b4 = a4.reverse();
document.write(b4+" "); //數組倒序 3,2,1
document.write(a4+" "); //數組已經發生改變，並且a4 === b4;
document.write(a4 === b4); //true

//shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值。
//arrayObject.shift()
//數組原來的第一個元素的值。
//如果數組是空的，那麼 shift() 方法將不進行任何操作，返回 undefined 值。請注意，該方法不建立新數組，而是直接修改原有的 arrayObject。
var a5 = [1,2,3];
var b5 = a5.shift();
document.write(" ");
document.write(b5+" "); //返回第一個 1
document.write(a5+" "); //數組a5已經發生變化，返回去掉第一個 2,3

//unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度。跟pushu添加的順序剛好相反
//arrayObject.unshift(newelement1,newelement2,....,newelementX)
//newelement1必需。向數組添加的第一個元素。newelementX可選。可添加若干個元素。
//IE 7及以下無法正確運行
var a6 = ['a','b','c'];
var b6 = a6.unshift('d');
document.write(b6+" "); //返回新的長度 4
document.write(a6+" "); //原來的數組已經改變，輸出 d,a,b,c

//slice() 方法可從已有的數組中返回選定的元素。
//arrayObject.slice(start,end)
//start必需。規定從何處開始選取。如果是負數，那麼它規定從數組尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。
//end可選。規定從何處結束選取。該參數是數組片斷結束處的數組下標。如果沒有指定該參數，那麼切分的數組包含從 start 到數組結束的所有元素。如果這個參數是負數，那麼它規定的是從數組尾部開始算起的元素。
//返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。不會改變原來數組，而是返回一個子數組
var a7 = ['a','b','c'];
var b7 = a7.slice(1,3);
document.write(b7+" "); //返回新的數組 b,c
document.write(a7+" "); //原來的數組不變 a,b,c

//splice() 方法向/從數組中添加/刪除項目，然後返回被刪除的項目。該方法會改變原始數組。
//arrayObject.splice(index,howmany,item1,.....,itemX)
//index必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。
//howmany必需。要刪除的項目數量。如果設定為 0，則不會刪除項目。
//item1, ..., itemX可選。向數組添加的新項目。
var a8 = ['a','b','c','d'];
var b8 = a8.splice(2,0,"caibaojian")
document.write(a8+" "); //輸出 a,caibaoijan,b,c,d
//alert(b8);
var c8 = a8.splice(1,3);
//document.write(c8+" ");
document.write(a8);

//sort() 方法用於對數組的元素進行排序。
//arrayObject.sort(sortby)
//sortby可選。規定排序次序。必須是函數。
//傳回值對數組的引用。請注意，數組在原數組上進行排序，不產生副本。
var a9 = ['a','f','h','c'];
var b9 = a9.sort();
var c9 = [1,100,40,30,104,1000,4];
var d9 = c9.sort();
document.write(" "+b9+" "); //a,c,f,h 按照字母輸出
document.write(a9+" "); //原來的數組已經變化，a,c,f,h 按照字母順序輸出
document.write(d9+" "); //1,100,1000,104,30,4,40 數字沒有按照大小輸出，需要自訂一個順序
function sortNumber(a,b)
{
return a - b
}
document.write(c9.sort(sortNumber)+" "); //1,4,30,40,100,104,1000

//toSource() 方法表示對象的原始碼。
//該原始值由 Array 對象派生的所有對象繼承。
//toSource() 方法通常由 JavaScript 在後台自動調用，並不顯式地出現在代碼中。
//只有 Gecko 核心的瀏覽器（比如 Firefox）支援該方法，也就是說 IE、Safari、Chrome、Opera 等瀏覽器均不支援該方法。
//object.toSource()

//toString() 方法可把數群組轉換為字串，並返回結果。
//arrayObject.toString()
//傳回值：arrayObject 的字串表示。傳回值與沒有參數的 join() 方法返回的字串相同。
var a11 = ['a','b','c','d'];
var b11 = a11.toString();
document.write(b11+" ");
document.write("toString的傳回值類型為:"+typeof(b11));

//arrayObject.toLocaleString()

//valueOf() 方法返回 Array 對象的原始值。
//arrayObject.valueOf()

</script>
<a href="http://111cn.net">雲棲社區網</a>
</body>
</html>

結果

1,2,3
1,2,3,4,5
jack,jonhn,tom,jim,111cn.net
join方法
1,2,3
1.2.3
join()的傳回值類型為：string
3
1,2
4
1,2,3,111cn.net
3,2,1
3,2,1
true
1
2,3
4
d,a,b,c
b,c
a,b,c
a,b,caibaojian,c,d
a,d
a,c,f,h
a,c,f,h
1,100,1000,104,30,4,40
1,4,30,40,100,104,1000
a,b,c,d
toString的傳回值類型為:string

數組去重

1. 刪除後面重複的：

代碼如下	複製代碼
function ov1(arr){ //var a1=((new Date).getTime()) for(var i=0;i<arr.length;i++) for(var j=i+1;j<arr.length;j++) if(arr[i]===arr[j]){arr.splice(j,1);j--;} //console.info((new Date).getTime()-a1) return arr.sort(function(a,b){return a-b}); }

2. 這個是常規的方法，比較好理解，如果相同則跳出迴圈

代碼如下	複製代碼
function ov2(a) { //var a1=((new Date).getTime()) var b = [], n = a.length, i, j; for (i = 0; i < n; i++) { for (j = i + 1; j < n; j++) if (a[i] === a[j]){j=false;break;} if(j)b.push(a[i]); } //console.info((new Date).getTime()-a1) return b.sort(function(a,b){return a-b}); }

3. 這個我花了好長時間明白的，這裡j迴圈雖然繼續了，但是i值已經改變了。就等於是一個新的i迴圈：

代碼如下	複製代碼
function ov3(a) { //var a1=((new Date).getTime()) var b = [], n = a.length, i, j; for (i = 0; i < n; i++) { for (j = i + 1; j < n; j++) if (a[i] === a[j])j=++i b.push(a[i]);} //console.info((new Date).getTime()-a1) return b.sort(function(a,b){return a-b}); }

4. 保證新數組中的都是唯一的

代碼如下	複製代碼
function ov4(ar){ //var a1=((new Date).getTime()) var m=[],f; for(var i=0;i<ar.length;i++){ f=true; for(var j=0;j<m.length;j++) if(ar[i]===m[j]){f=false;break;}; if(f)m.push(ar[i])} //console.info((new Date).getTime()-a1) return m.sort(function(a,b){return a-b}); }

5. 用對象屬性

代碼如下	複製代碼
function ov5(ar){ // var a1=(new Date).getTime() var m,n=[],o= {}; for (var i=0;(m= ar[i])!==undefined;i++) if (!o[m]){n.push(m);o[m]=true;} // console.info((new Date).getTime()-a1) return n.sort(function(a,b){return a-b});; }

寫的函數太厲害了

結果

預設數組為：1,2,3,4,2,3
去重後的數組為：1,4,2,3
排序後的數組為:1,2,3,4
使用unique()：2,3,4,34
ov1去重：1,2,4,10,22,23,24,40,42,44,100,1000,4444,dd,oooo,ooooo
ov2去重：1,oooo,40,4,22,2,4444,ooooo,100,44,1000,10,42,23,24,dd

常用的Array 對象方法

方法	描述
concat()	串連兩個或更多的數組，並返回結果。
join()	把數組的所有元素放入一個字串。元素通過指定的分隔字元進行分隔。
pop()	刪除並返回數組的最後一個元素
push()	向數組的末尾添加一個或更多元素，並返回新的長度。
reverse()	顛倒數組中元素的順序。
shift()	刪除並返回數組的第一個元素
slice()	從某個已有的數組返回選定的元素
sort()	對數組的元素進行排序
splice()	刪除元素，並向數組添加新元素。
toSource()	返回該對象的源代碼。
toString()	把數群組轉換為字串，並返回結果。
toLocaleString()	把數群組轉換為本地數組，並返回結果。
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf()	返回數組對象的原始值

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More