摘要:每當在末尾添加一項后,其都會自動更新以反應這一變化。從而存在兩個以上不同版本的構造函數。如果數組中的某一項值是或,那么該值在和方法返回的結果中以空字符串表示。對數組每一項運行給定函數,返回每次函數調用的結果組成的數組。
Array類型
ECMAscrip與其他多數語言中數組的共同點:
都是數據的有序列表
不同點:數組的每一項可以保存任何類型的數據,數組的大小是可以動態調整的,及隨著數據的添加自動增長,以容納新增的數據
1 創建數組
1.1 同Object一樣,創建數組的方式有兩種
Arrey構造函數
var colors = new Array();
向Array構造函數中傳遞數組中應該包含的項,
var colors = new Array("red","green","blue");
給構造函數傳遞一個數值,表示數組的長度(項數),
var colors = new Array(3);
也可省略new操作符,
var colors = Ayyay(3); var colors = Array("red");
數組字面量表示法
數組字面量表示法由一對包含數組項的方括號表示,
var color = ["red","green","blue"];
1.2 讀取和設置數組的值
要使用方括號并提供相應的值是基于0的數字索引。
var colors = ["red","blue","green"]; alert (colors[0]); colors[2] = "black"; //修改第三項 colors[3] = "brown";//新增第四項
數組中的length屬性很有特點:不是只讀的。通過設置這個屬性。可以從數組的末尾移除項,或向數組中新增項。
移除一項
var colors = ["red","blue","green"];
colors.length = 2;
alert (colors[2]); //undefined
新增一項
var colors["red","bule","green"];
colors.length = 4;
alert(coloes[3]);//undefined
利用length屬性在末尾新增項
var colors = ["red","blue","green"];
colors[colors.length] = "black";
colors[colors.length] = "brown";
alert(colors[4]);//brown
由于數組的最后一項索引始終時length-1,所以下一項的位置就是length。每當在末尾添加一項后,其length都會自動更新以反應這一變化。
對于單一的全局作用域,也就是對于有一個網頁或者一個全局作用域而言,使用instanceof操作符
if (value instanceof Array){//對數組執行某些操作}
對于兩個以上不同的執行環境,也就是如果網頁中包含多個模板。從而存在兩個以上不同版本的Array構造函數。如果你從一個框架向另一個框架傳入一個數組,那么傳入的數組與在第二個框架中原生創建的數組分別具有各自不同的構造函數。為解決這個問題ECMAScript5新增了Array.isArray()方法。這個方法不管數組是在哪個全局執行環境中創建的,都可以確定某個值是不是數組。
if(Array.isArray(value)){//對數組執行某些操作};
支持Array.isArray()的方法瀏覽器有IE9+、Firefox4+、Safari5+、Opera 10.5、和Chrome。
var colors = ["red","blue","green"]; if(Array.isArray(colors)){ colors[0] = "balck"; alert(colors[0]); }轉換方法
所有對象都具有toLocaleString()、toString()和valueOf()方法
調用數組的toString()方法:返回由數組中 "每個值的字符串" 形式 "拼接" 而成的一個以逗號分割的 "字符串" 。
調用數組的valueOf()方法:返回的還是數組。
var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["廣州", 50], ["成都", 90], ["西安", 100] ]; alert(aqiData.toString()); alert(aqiData.valueOf()); alert(aqiData); console.log(aqiData.toString()); console.log(aqiData.valueOf()); console.log(aqiData);
上面第9、10行代碼先顯式調用了toString()方法和valueOf()方法。第11行直接將數組傳遞給alert()。而alert()要接收字符串參數,所以它會在后臺調用數組每一項的toString()方法。由此得到與直接調用toString()方法相同的結果。
調用數組的 toLocaleString()方法時,它也會創建一個由數組中 "每個值的字符串" 形式 "拼接" 而成的一個以逗號分割的 "字符串" ,與前面兩個方法唯一不同之處在于取數組每一項的值調用的方法不一樣,這里取數組每一項值調用的是每一項的toLocaleString()方法,而不是toString()方法,前面講的是調用每一項的toString()方法。
var person1 = { toLocaleString : function(){ return "chenglong"; }, toString : function(){ return "lixiaolong"; } }; var person2 = { toLocaleString : function(){ return "lilianjie"; }, toString : function(){ return "chenzhen"; } }; var people = [person1,person2]; alert(people.toString()); alert(people); alert(people.toLocaleString()); console.log(people.toString()); console.log(people); console.log(people.toLocaleString());
join()指定分割符連接數組元素。只接受一個參數,即用作分割符的字符串,返回包含所有數組項的字符串。如果不給join()傳入任何值或傳入undefined,則使用逗號作為分割符.而IE7或更早的版本會錯誤的使用undefined作為分割符。
如果數組中的某一項值是null或undefined,那么該值在join(),toString(),valueOf()和toLocaleString()方法返回的結果中以空字符串表示。
棧方法ECMAScript也提供了一種讓數組的行為類似于其他數據結構的方法,具體說來,數組可以表現的就像棧一樣。棧是一種LIFO(后進先出)的數據結構。棧中項的插入和移除只發生在一個位置——棧的頂部。ECMAScript為數組提供了push()和pop()方法實現類似棧的行為。
push()方法,可以接收任意數量的參數,把他們逐個添加到數組的末尾,并返回修改后數組的長度
pop()方法,從數組的末尾移除最后一項,減少數組的length值,返回移除的項。
var colors = []; var count = colors.push("red","green"); alert(count);//2 var item = colors.pop(); alert(item);//green alert(colors.length);//1隊列方法
棧數據結構的訪問規則是LIFO(后進先出),而另一種數據結構——隊列數據結構,訪問規則是FIFO(先進先出)。隊列在列表的末端添加項,從列表的前端移除項。末端添加項依舊使用push()方法,shift()方法可以移除數組的第一項,并返回該項,同時將數組長度減1.
結合push()方法和shift()方法可以像使用隊列一樣使用數組。
var colors = []; var count = colors.push("red","green"); alert(count);//2 var item = colors.shift(); alert(item);//red alert(colors.length);//1
ECMAScript還為數組提供了unshift()方法,unshift()與shift()作用相反,unshift()是在數組的前端添加任意多個項并返回新數組的長度。因此,同時使用unshitf()和pop()方法,可以從相反的方向模擬隊列。
var colors = []; var count = colors.unshift("red","green"); alert(count);//2 count = colors.unshift("black"); var item = colors.pop(); alert(item);//green alert(colors.length);//2
注:IE7及更早版本unshift()會返回undefined而不是數組的心長度。IE8只在非兼容模式下返回正確的長度。
重排序方法數組中有兩個可以排序的方法,reverse()和sort()。
reverse()會反轉數組項的順序。
var values = [1,3,5,2,4]; values.reverse(); alert(values); //4,2,5,3,1
默認情況下sort()會按升序排列數組項,但此升序非彼升序
為了實現排序,sort()會調用每個數組項的toString()轉換方法,然后比較得到的字符串,以確定如何排序。
var value = [0,1,5,10,15]; value.sort(); alert(value);//0,1,10,15,5
sort()方法比較的是字符串,字符串比較,"10"位與"5"前面。sort()方法還可以接收一個比較函數作為參數,可實現我們期望的排序。
比較函數接收兩個參數,如果第一個參數應該位于第二個參數之前則返回負數,如果兩個參數相等則返回零,如果第一個參數應該位于第二個參數之后則返回正數。以下就是一個比較函數。
var myArray = [0,10,5,15,1]; function compare(value1,value2){ if (value1value2) { return 1; }else { return 0; } }; myArray.sort(compare); alert(myArray);//0,1,5,10,15
reverse()和sort()返回的是排序后的數組
操作方法concat()方法,可以基于當前數組中的所有項創建一個新數組。具體說,這個方法會先創建當前數組的一個副本,然后將接收到的參數添加到這個副本的末尾,最后返回新構建的數組。1, 在沒有給concat()方法添加參數的情況下,他只是復制當前數組并返回副本。2, 如果傳遞給concat()方法的是一個多個數組,則該方法會將這些數組中的每一項添加到結果數組中。3, 如果給concat()方法傳遞的不是數組,這些值會被簡單的添加到結果數組的末尾。原來的數組colors(),保持不變
var colors = ["red","blue"]; var newColors = colors.concat("black",["yellow","brown"],["green"]); alert(colors);//red,blue alert(newColors);//red,blue,black,yellow,brown,green
slice()方法,基于當前數組的一個或多個項創建一個新數組。slice()方法接收一個或兩個參數,同concal()方法一樣,原來的數組不會被影響。注意,如果slice()參數中有一個是負數,則用數組長度加上該數來確定相應位置。例一個包含5項的數組,slice(-2,-1)即slice(3,4)。如果結束位置小于起始位置,則返回空數組。
splice()方法,這個方法算是最強大的數組方法了。splice()方法的主要用途是向數組的中部插入項。使用的方式有如下3種。
1, 刪除,可以刪除任意數量的項,只需指定2個參數,要刪除的第一項的位置和要刪除的項數。
2, 插入,可以向指定的位置插入任意數量的項,只需提供3個參數,起始位置,0(要刪除的項數),和要插入的項。如果要插入多項,可以插入任意多個項。例,splice(1,0,"red","yellow");
3, 替換,可以向指定的位置插入任意數量的項,插入的項數不必與刪除的項數相等,例,splice(2,1,"red","blue");
splice()方法始終都會返回一個數組,該數組包含從原始數組中刪除的項(如果沒有刪除任何項,就會返回一個空數組)。splice()會改變原始數組。
var colors = ["red","blue","green"]; var colors2 = colors.splice(1,2); alert(colors2);//blue,green var colors3 = colors.splice(0,0,"black",["brown"]); alert(colors3);//[] alert(colors);//black,brown,red console.log(colors3); var colors4 = colors.splice(1,1,"yellow","purple"); alert(colors4);//brown alert(colors);//black,yellow,purple,red位置方法
indexOf()和lastIndexOf()方法。都接收兩個參數,要查找的項和查找起點位置的索引(可選)。indexOf()從數組的0位置開始向后查,lastIndexOf()從數組的末尾開始向前查找。都返回要查找的項在數組中的位置。沒有找到的情況下返回-1,在比較第一個參數與數組中的項時,使用全等操作符(必須嚴格相等)。支持這兩種方法的瀏覽器有IE9+,fireFox2+,Safari3+,Opera9.5+,Chrome。
var person = {name:"Nicholas"}; var people = [{name:"Nicholas"}]; var morePeople = [person]; alert(people.indexOf(person));//-1 alert(morePeople.indexOf(person));//0 alert(morePeople.indexOf({name:"Nicholas"}));//-1 console.log(morePeople);//[Object]迭代方法
ECMAScript為數組定義了5個迭代方法。每個方法都接收兩個參數,要在每一項上運行的函數和運行該函數的作用域對象——影響this的值(可選)。傳入這些方法的函數會接收三個參數:數組項的值、該項在數組中的位置和數組對象本身。根據使用的方法不同,這個函數執行后的返回值可能會也可能不會影響訪問的返回值。
every():對數組中的每一項運行給定的函數,如果該函數對每一項都返回true,則返回 true.
filter():對數組的每一項都運行給定數組,返回 該函數會返回true的項 組成的數組。
forEach():對數組的每一項運行給定的函數,這個方法沒有返回值。
map():對數組每一項運行給定函數,返回 每次函數調用的結果 組成的數組。
some():對數組中的每一項運行給定的數組,如果該函數對任一項返回true,則返回true.
var numbers = [1,2,3,4,5,4,3,2,1]; var everyResult = numbers.every(function(item,index,array){ console.log(item); return item > 2; }); var someResult = numbers.some(function(item,index,array){ console.log("someResult"+item); return item > 2; }); alert(everyResult); alert(someResult);
var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["廣州", 50], ["成都", 90], ["西安", 100] ]; var filterResult = aqiData.filter(function(item,index,array){ //console.log(item[1]); return item[1] > 60; }); alert(filterResult);
var numbers = [1,2,3,4,5,4,3,2,1]; numbers.forEach(function(item,index,array){ if (item>3) { alert(item); } });
支持這些迭代方法的瀏覽器有IE9+、FireFox2+、Safari3+、Opera9.5+、Chrome
縮小方法ECNAScript還增加了兩個縮小方法,reduce()和reduceRight().這兩個方法都會迭代數組的所有項,然后構建一個最終返回的值。其中reduce()從數組的第一項開始,逐個遍歷到最后,而reduceRight()從數組的最后一項開始,向前遍歷到第一項。
這兩個方法都接收兩個參數:一個在每一項上調用的函數和最為縮小基礎的初始值(可選),傳遞給他們的函數接收4個參數:前一個值,當前值,項的索引和當前對象。
這個函數返回的任何值都會最為第一個參數自動傳給下一項。第一次迭代發生在數組的第二項上,因此第一參數就是數組的第一項,第二個參數就是數組的第二項。
//執行數組中所有值之和的操作
var values = [1,2,3,4,5]; var sum = values.reduce(function(prev,cur,index,array){ return prev+cur; }); alert(sum);//15
第一次訪問函數,prev是1,cur是2;第二次,prev是3(1+2結果),cur是3(數組第三項)
支持這些迭代方法的瀏覽器有IE9+、FireFox3+、Safari4+、Opera10.5+、Chrome
參考:JS高級程序設計
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82508.html
摘要:有種內置類型,分別是除對象之外,其他統稱為基本類型。另一個需要注意的是數組確切地說,數組也是的一個子類型我們可以通過下面的方法檢查變量是不是數組處理未聲明的變量時,會返回這是因為有一個特殊的安全防范機制。 js有7種內置類型,分別是undefined null boolean string number symbol object除對象之 Object 外,其他統稱為基本類型。符號 ...
摘要:函數類型檢測是的子類型,其屬性為參數個數,但是判斷結果有內建函數原生函數常見的有,可能被當作構造函數來使用,創建出來的是封裝了的基本類型值。構造函數可以不帶關鍵字。建議使用和來進行顯示強制轉換。 前言 此篇小結來源與《你不知道的JavaScript》和《JavaScript高級程序設計》的結合??或許是的,龜速總結中... 七種內置類型 null undefined boolean ...
摘要:使用構造函數屬性來判斷對象的類型檢查數字實際上是否為字符串如果是,則把字符串解析為整數檢查字符串實際上是否為數組如果是,則根據數組用逗號歸并出字符串來變量的類型檢查變量變量變量構造函數用閉包實現的函數化數字求和函數的函數生成器返回一個簡單的 showImg(https://segmentfault.com/img/remote/1460000006766748?w=3456&h=460...
摘要:解耦優勢代碼復用,單元測試。常用比較誤區可同時判斷,可用來判斷對象屬性是否存在。使用作判斷無法進行充分的類型檢查。文件中應用常量參考文檔高級程序設計作者以樂之名本文原創,有不當的地方歡迎指出。 showImg(https://segmentfault.com/img/bVburXw?w=500&h=400); 編寫可維護性代碼 可維護的代碼遵循原則: 可理解性 (方便他人理解) 直觀...
摘要:作用域鏈查找作用域鏈的查找是逐層向上查找。而全局變量和閉包則會與之相反,繼續保存,所以使用用后需手動標記清除,以免造成內存泄漏。獲取元素的屬性獲取元素的屬性等參考文檔高級程序設計作者以樂之名本文原創,有不當的地方歡迎指出。 showImg(https://segmentfault.com/img/bVburXV?w=500&h=399); 作用域鏈查找 作用域鏈的查找是逐層向上查找。查...
閱讀 3043·2021-11-25 09:43
閱讀 1626·2021-11-24 11:15
閱讀 2359·2021-11-22 15:25
閱讀 3501·2021-11-11 16:55
閱讀 3240·2021-11-04 16:10
閱讀 2773·2021-09-14 18:02
閱讀 1685·2021-09-10 10:50
閱讀 1070·2019-08-29 15:39