當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript Array学习与使用

發布時間：2025/3/8 javascript 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript Array学习与使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一．Javascript數組是無類型的；數組元素可以任意類型，并且同一個數組中的不同元素也可能有不同的類型，javascript數組是動態的，會根據需要增長或者縮減，每一個數組都有一個length屬性。它不是只讀的，可以通過設置這個屬性值，從數組的末尾移除項，或者添加新項

二．創建數組

（1）數組字面量表示方法：

?????????Var colors=[true,1,”green”]; //創建包含3個字符串的數組。

?????????Var arr=[];//創建一個空數組

?????????Var b=[1,{x:1,y:2},[2,{x:3,y:4}]];//創建包含對象直接量或其他數組直接量

???（2）調用構造函數Array()，new 操作符可以省略:

?????????Var a=new Array(); 等同于Var arr=[];//創建一個空數組

?????????Var b=new Array(10);//創建指定長度的數組

?????????Var c=new Array(“red”);//創建一個包含1項，及字符串“red”的數組。

三.數組元素的讀寫

?????在讀取和設置數組值時，使用方括號，方括號中是一個非負整數值的任意表達式，

???????Var colors=[“red”,”blue”,”green”];//定義一個字符串數組

???????alert(colors[0]);//讀取第一項的值

???????colors[2]=”black”;//修改第三項

???????colors[3]=”brown”;//新增第四項

???????Alert(colors.length);//4,數組的長度值，等于最后一項的索引加1

四．數組元素的檢測

?????Array.isArray()方法，檢測某個值是不是數組，而不管它是在哪個全局執行環境中創建的。If(Array.isArray(value)){//對數組執行某些操作}

五．數組方法：

?????（1）Array.join();將數組中所有元素都轉化為字符串并連接在一起，返回最后生成的字符串。

? ?

?（2）Array.reverse(),將數組中的元素顛倒順序，返回逆序的數組

???var?a=[1,2,3,4];document.write(''+a.reverse().join("*")+'');//4*3*2*1

（3）Array.sort(),默認沒有參數時將數組元素按照字母表順序進行排序，要是按照某一規定進行排序，則必須傳遞一個比較函數

? ? ??

??var?b=["22","555","44","1"];document.write(''+b.sort()+''+'');//1,22,44,555var?c=["2","555","44","11"];document.write(''+c.sort(function(a,b){?return?a-b})+''+'');//2,11,44,555

（3）Array.concat(),創建并返回一個新數組。，它的元素包括調用contact()的原始數組的元素和concat()的每個參數。

? ? ??

??var?d=["2","5","4","1"];document.write(''+d.concat(6,8)+''+'');//2,5,4,1,6,8

（4）Array.slice()方法，返回數組的一個片段或者子數組，它的兩個參數分別指定了片段的開始與結束，返回的數組包含第一個參數指定的位置和所有到不含第二參數指定的位置之間的所有數組元素，只有一個參數時，返回從這個參數開始到數組結尾的的所有元素。? ? ??

???var?e=["2","5","4","1"];document.write(''+e.slice(1,3)+''+'');//5,4var?f=["2","5","4","1"];document.write(''+f.slice(2)+''+''+'<hr>');//4,1

（5）棧方法

?????Push()方法可以接收任意數量的參數，將他們逐個添加到數組的末尾，并返回修改數組的新長度，而pop()方法，則是相反的，從數組末尾移除最后一項，減少數組的長度，最后返回移除的項。? ?

??var?g=["red","yellow","blue"];document.write(''+"修改后數組的新長度為："+g.push("green","pink")+''+'');//修改后數組的新長度為：5document.write(''+"刪除的數組值為："+g.pop()+''+''+'<hr>');//刪除的數組值為：pink

（6）類似隊列的方法

??????Shift(),能夠移除數組中的一個項，并返回該項，然后把所有隨后的元素下移一個位置來填補數組頭部的空缺，同時將數組長度減1；unshift(),在數組的前端添加任意個項并將已存在的元素移動到更高索引的位置來獲得足夠的空間，最后返回新數組的長度。??

???var?e=["red","yellow","blue"]; document.write(''+"刪除的數組的一個元素是："+e.shift()+''+'');//刪除的數組的一個元素是：red document.write(''+"數組前端添加元素后，數組的長度："+e.unshift("red","black")+''+''+'<hr>');//數組前端添加元素后，數組的長度：4

（7）轉換方法

????????所有對象都具有toLocaleString(),toString(),valueOf(),

???????調用數組的toString() 方法會返回由數組中每個值的字符串形式拼接而成的字符串，該字符串是以逗號分隔的字符串。與join()方法沒有參數時，返回的字符串一樣效果。

??????調用數組的valueOf() 方法，返回的還是數組。

??????調用數組的toLocaleString()，把數組轉換為本地字符串? ? ??

??var?f=["red","yellow","blue"];document.write(''+"本身的類型為："+typeof(f)+''+'');//本身的類型為：objectdocument.write(''+f.toString()+''+'');//red,yellow,bluedocument.write(''+"使用toString后的類型變為："+typeof(f.toString())+''+'');//使用toString后的類型變為：stringdocument.write(''+f.valueOf()+''+'');//red,yellow,bluedocument.write(''+"使用valueOf()后的類型變為："+typeof(f.valueOf())+''+''+'<hr>');//使用valueOf()后的類型變為：object

（7）位置方法

??????ES5為數組添加了兩個位置方法：indexOf(),lastIndexOf(),用來搜索整個數組中具有給定值的元素，返回找到的第一個元素的索引或者如果沒有找到就返回-1，接收兩個參數，第一個參數為要查找的項，第二個參數為可選的，表示查找起點位置的索引，indexOf()方法從數組的開頭向后查找，lastIndexOf()則從數組末尾開始向前查找。? ?

?var?h=["red","yellow","blue","red"];document.write(''+"red所在數組的位置是："+h.indexOf("red")+''+'');//red所在數組的位置是：0document.write(''+"從1的位置開始找blue所在數組的位置是："+h.indexOf("blue",1)+''+'');//從1的位置開始找blue所在數組的位置是：2document.write(''+"使用，lastindexOf(),red所在數組的位置是："+h.lastIndexOf("red")+''+''+'<hr>');//使用，lastindexOf(),red所在數組的位置是：3

（8）迭代方法

??????ES5為數組定義了5個迭代方法，每個方法都接收兩個參數，一個參數是要在每一項上運行的函數，第二個參數是可選的，運行函數的作用域對象。而對于第一個參數，這個函數會接收三個參數，數組項的值，該項在數組中的位置，和數組對象本身。

1）forEach()從頭到尾遍歷數組，為每個元素調用指定的函數，該方法沒有返回值，而且必須得所有元素都傳遞給調用的函數之后才能終止遍歷，也就是說沒有break語句隨時退出這個循環，要是真要提前終止，必須把forEach()方法放在一個try塊中。

??var?data=[1,2,3,4,5];var?sum=0;data.forEach(function(value){sum+=value;});document.write(''+"sum的值為："+sum+''+'');//sum的值為：15data.forEach(function(v,i,data){data[i]=v+3;});document.write(''+"data中的值為："+data+''+''+'<hr>');//data中的值為：4,5,6,7,8

??2)map(),對數組中的每一項運行給定函數，返回每次函數調用的結果組成數組，map()返回的是新數組，它不修改調用的數組。? ? ??

?var?data2=[1,2,3,4,5];var?sum=0;data=data2.map(function(x){return?sum+=x});document.write(''+"原來數組："+data2+''+'');//原來數組：1,2,3,4,5document.write(''+"sum的值："+sum+''+'');//原來數組：15document.write(''+"新數組中的值為："+data+''+''+'<hr>');//新數組中的值為：1,3,6,10,15

? 3)filter()對數組中的每一項運行給定的函數，該函數是用來邏輯判定的，返回true，或者false，返回的數組元素是函數會返回true的項組成數組的一個子集，壓縮空缺并刪除undefined和null元素，可以使用filter()??

??var?data3=[1,2,3,4,5];data33=data3.filter(function(x){return?x<3;});document.write(''+"新數組中的值為："+data33+''+'');//新數組中的值為：1,2data333=data3.filter(function(x){return?x%2==0;});document.write(''+"新數組中的值為："+data333+''+''+'<hr>');//新數組中的值為：2,4

?4)every()和some(),是數組的邏輯判定，對數組中的每一項運行給定的函數，對于every(),只有數組中的每一個元素都滿足函數，才返回true,而some()就只要求，有滿足的的項，就返回true,就類似于數學中的與/或的邏輯表達式求值? ??

?var?data4=[1,2,3,4,5];data44=data4.every(function(x){return?x<3;});document.write(''+"使用every()的返回值："+data44+''+'');//使用every()的返回值：falsedata444=data4.some(function(x){return??x<3});document.write(''+"使用some()的返回值："+data444+''+''+'<hr>');//使用some()的返回值：true

（9）歸并方法

?????也是ES5新增的數組方法，用指定的函數，將數組元素進行合并

?????1)reduce()，從數組的第一項開始，逐個遍歷到最后

?????2)reduceRight()，從數組的最后一項開始，向前遍歷的第一項

???這兩個方法都接收兩個參數，一個在每一項上調用的函數和（可選的）作為歸并基礎的初始值，傳給reduce()和reduceRight()的函數接收4個參數：前一個值，當前值，項的索引和數組對象。這個函數返回的任何值都會作為第一個參數自動傳給下一項，第一次迭代發生在數組的第二項上，因此第一個參數是數組的第一項，第二個參數就是數組的第二項。

???var?data5=[1,2,3,4,5];var?sum=data5.reduce(function(x,y){return?x+y},0);document.write(''+"sum的值："+sum+''+'');//sum的值：15var?sum1=data5.reduce(function(x,y,index,data5){return?x+y});document.write(''+"sum1的值："+sum1+''+'');//sum1的值：15var?sum2=data5.reduce(function(x,y,index,data5){return?x*y},2);document.write(''+"sum1的值："+sum2+''+'');//sum2的值：240

? ? ?

轉載于:https://blog.51cto.com/xiyin001/1761195

總結

以上是生活随笔為你收集整理的javascript Array学习与使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：每周一书-2016年8月28日到9月4日
下一篇： gradle idea java ssm