JavaScript中的數組詳解
JavaScript中的數組前端
1、數組的定義數組
數組是值的有序集合，或者說數組都是數據的有序列表。瀏覽器
2、建立數組數據結構
【字面量形式】ide
1、空數組函數
var arr=[];測試
2、帶有元素的數組spa
var arr=[1,2,3,1,2];對象
3、數組值能夠是任意類型blog
var arr=[1,2.3,'foodoir',true,null,undefined,[1,2,3],{name:'foodoir',age:21}];
注意：
一、數組字面量中的值不必定是常量，它們能夠是任意表達式；
二、它能夠包含對象字面量（{name:'foodoir',age:21}）和其它數組字面量（[1,2,3]）；
三、若是數組的元素仍是數組，就造成了多維數組,如：var arr=[[1,2,3],[4,[5,6]]];
四、使用數字字面量表示法時，不會調用Array構造函數。
4、省略數組中的某個值，默認值爲undefined
var arr=[1,,3]//至關於[1,undefined,3]
省略數組中的某個值，從而致使該數組變爲了稀疏數組，此時須要注意的是
一、var arr=[,,]，這種方法在不一樣的瀏覽器下面，運行的結果不同
在ie8中，會在末尾添加undefined的值,好比說var arr=[1,2,]，至關於[1,2,undefined]，此時數組的長度爲3
在其它瀏覽器中會自動忽略最後的逗號，好比說var arr=[1,2,]，至關於[1,2]，此時數組的長度爲2
二、除了經過字面量的方式直接構造稀疏數組以外，還能夠經過delete操做符來構造，具體見後面關於delete的介紹
！import：足夠稀疏的數組一般在實現上比稠密數組（連續數組）更慢，內存利用率更高，在這樣的數組中查找元素的時間與常規對象屬性的查找時間同樣長！
【經過構造函數Array()建立數組】
1、調用時沒有參數
var arr=new Array()
注意
空數組，等同於arr=[];
2、調用時傳遞一個參數
var arr=new Array(5)；
注意
一、表明指定了數組的長度爲5，等同於var arr=[];arr.length=5;
二、若是是：var arr=new Array[5]; //輸出：undefined is not a function 此時應該注意到Array後面的符號，否則容易出錯
三、若是是：var arr=new Array('5');console.log(a[0],a.length); //5,1 說明此時建立的數組只有一項，它的長度爲1，值爲5
若是預先知道數組元素個數，能夠經過參數指定，這種形式的Array()構造函數能夠用來分配一個數組空間。
3、超過兩個參數
var arr=new Array(1,2.3,'foodoir',null,undefined,true,false,[1,23,4]);
注意
顯示指定了數組中的值，能夠爲多種類型，與var arr=[1,2.3,'foodoir',true,null,undefined,[1,2,3],{name:'foodoir',age:21}];相似；
另外：在使用Array()構造函數時，能夠省略new操做符，好比：var arr=Array(1,2,3);
3、使用數組
1、根據下標找到對應的值
arr[下標]=值;
//經過下標讀取值 var arr = [1,2,3,4]; console.log(arr[0]);//1，說明數組的下標從0開始 console.log(arr[4]);//undefined，數組的長度爲4，取不到arr[4]的值 //修改以前的值 arr[0] = 'hello'; console.log(arr);//hello,2,3
注意：數組中的下標是從0開始
2、向數組中添加元素
arr[下標]=值;
arr.push(值,...):數組末尾添加元素
arr.unshift(值,...):數組開始添加元素
//經過下標向數組中添加一個值
var arr = [1,2,3,4];
arr[4] = 'world';
console.log(arr);//1,2,3,4,world
arr[9] = 10;
console.log(arr);//1,2,3,4,world,,,,,10
//也能夠這樣
var x= 2;
console.log(arr[x]);//3
arr[x] = 333;
console.log(arr);//1,2,333,4,world,,,,,10
//在數組的末尾添加一個或多個元素push()
var arr = [];
arr[0] = 'a';
arr[0] = 'a';
arr.push('c');
arr.push('d','e','f',123,4.5,'foodoir');
console.log(arr);
console.log(arr.length);//8
//向數組的首部添加一個或多個元素unshift()
arr.unshift(1,2,3);
console.log(arr);//1,2,3,a,c,d,e,f,123,4.5,foodoir
console.log(arr.length);//11
3、讀取數組中元素
arr[下標]，同1
4、修改數組中的元素
arr[下標]=值;同1
5、刪除數組中元素
delete arr[下標]
注意：使用delete刪除數組元素不會改變數組的length屬性
arr.pop()：刪除數組的元素
arr.shift()：刪除數組開頭的元素
能夠經過設置length屬性，刪除數組後面的元素
//經過數組下標來刪除數組中的元素 var arr = [1,2,3,'a','hello']; console.log(arr); delete arr[1];//刪除數組中第二個元素 console.log(arr);//1,,3,a,hello console.log(arr.length);//5數組的長度沒變 //刪除數組末尾的元素pop(); var arr = [1,2,3,4.5,'foodoir']; var a = arr.pop();//彈出最後一個元素 console.log(a);//foodoir，此時數組中最後一元素爲4.5 arr.pop();//再刪除最後一個元素 console.log(arr);//結果爲：1,2,3 console.log(arr.length);//3 //刪除數組中的首部 var a = arr.shift(); console.log(a);//1 console.log(arr);//2,3 //經過設置length屬性，刪除數組後面的元素 var arr = [1,2,3,4,5,6]; arr.length = 3;//設置了數組的長度爲3 //console.log(arr);//1,2,3 arr.length = 0;//將數組中全部的數據都刪除 console.log(arr);//Array[0]
補充：有些資料上在使用數組的方法上提到了棧方法隊列方法，這裏咱們也對以前的例子進行理解
棧方法：
pop()刪除並返回數組的最後一個元素
push()向數組的末尾添加一個或更多元素，並返回新的長度。
隊列方法 ：
shift()刪除並返回數組的第一個元素
push()向數組的末尾添加一個或更多元素，並返回新的長度
unshift()向數組的開頭添加一個或更多元素，並返回新的長度。
一、棧是一種LIFO（Last-In-First-Out，後進先出）的數據結構，也就是最新添加的項最先被移除。棧中項的插入（push）和移除，只發生在一個位置——棧的頂部。ECMAScript爲數組提供了push()和pop()方法，能夠實現相似棧的行爲。
push()方法能夠接收任意數據的參數，把它們逐個添加到數組末尾，並返回修改後的數組長度。pop()方法從數組末尾移除最後一項，減小數組的length值
二、棧數據結構的訪問規則是LIFO（後進先出），而隊列數據結構的訪問規則是FIFO（First-In-First-Out，先進先出）。隊列在列表的末端添加項，從列表的前端移除項。push()方法是向數組末端添加項的方法，所以要模擬隊列只需一個從數組前端取得項的方法——shift()，其可以移除數組中的第一個項並返回該項，同時數組的length-1。結合使用shift()和push()方法，能夠像使用隊列同樣使用數組。
此外，ECMAScript還提供了unshift()方法，它能在數組前端添加任意個項並返回新數組的長度。所以，結合使用unshift()和pop()方法，能夠從相反的方向來模擬隊列，即在數組的前端添加項，從數組末端移除項
4、遍歷數組
1、for循環遍歷下標連續的數組
2、for-in遍歷數組
3、經過forEach()遍歷數組
語法：Array.forEach(function(value[,index[,array]]){函數體})
//數組中如何進行遍歷
//當索引連續時，能夠用for循環遍歷
var arr = ['a','b','c',123];
for(var i = 0 ; i<arr.length;i++){
console.log(arr[i]);//a,b,c,123
}
//當索引不連續時，能夠用for/in循環
var arr1 = [];
arr1[1] = 'x';
arr1[22] = 'y';
arr1[333] = 'z';
for(var i in arr1){
console.log(arr1[i]);//x,y,z
}//這種方法遍歷的是繼承下來的屬性，若不想遍歷繼承下來的屬性能夠用hasOwnProperty()函數
for(var i in arr1){
if(arr1.hasOwnProperty(i)){
console.log(arr1[i]);//x,y,z
}
}//這種方法遍歷的不是繼承下來的屬性
//咱們還能夠經過forEach()方法來遍歷數組
//語法：Array.forEach(function(value[,index[,array]]){函數體})
var arr2 = [1,2,3,4,5,6];
//方法一：
arr2.forEach(function(x){
console.log(x);
});1,2,3,4,5,6
//方法二：
function Test(element,index,array){
console.log('要處理的數組爲：'+array);
console.log('索引：'+index+'--值爲：'+element);
}
arr2.forEach(Test);
5、數組的經常使用方法
1、Array.join([delimiter])
描述
將數組中的值鏈接成字符串
參數
以指定分隔符鏈接，若是不指定，默認以,鏈接
返回值
返回鏈接以後的字符串
注意
Array.join()是string.split()方法的逆向操做
小結：數組轉換方法：join
在通常默認狀況下，會以逗號分隔的字符形式返回數組項；而join方法可使用不一樣的分隔符來構建字符串，join方法只接受一個參數，用做分隔符的字符串，而後返回全部包含數組項的字符串
2、Array.reverse()
描述
數組倒置
返回值
返回倒置以後的數組
3、Array.sort()
描述
數組排序函數
參數
若是不帶參數調用sort，數組以字母順序進行排序，升序
返回值
返回排序以後的數組
注意
若是數組中包含undefined元素，它們會被排到數組的尾部，好比：
var a = [1,2,4,undefined,3,5];
console.log(a.sort());//0 : 1 1 : 2 2 : 3 3 : 4 4 : 5 5 : undefined
小結：reverse()和sort()是數組中存在的兩個能夠用來重排序的方法
4、Array.concat(value,...)
描述
建立並返回一個新數組，數組中包含調用concat的原始數組的元素和concat的每一個參數。
返回值
返回鏈接以後的新數組
注意
若是這些參數中的任何一個自身是數組，則鏈接的是數組的元素，而非數組自己
5、Array.slice(start[,end])
描述
返回數組中的部分
參數
start起始點
end結束位置
返回值
返回數組中的部分
6、Array.splice(index , howMany[, element1[, ...[, elementN]]])
描述
添加或刪除數組中的一個或多個元素
參數
index從數組的哪一位開始修改內容。若是超出了數組的長度，則自動從數組末尾開始添加內容；若是是負值，則表示從數組末位開始的第幾位。
howMany是整數，表示要移除的數組元素的個數。若是 howmany 是 0，則不移除元素。這種狀況下，至少應添加一個新元素。若是 howmany 超出了 index 位以後的元素的總數，則從 index 向後至數組末尾的所有元素都將被刪除（含第 index 位）。若是沒有指定 howmany 參數（如上第二種語法，是 SpiderMonkey 的擴展功能），將會刪除第 index 位以後的全部元素（不含第 index 位）
element1...要添加進數組的元素。若是不指定，則 splice 只刪除數組元素。
返回值
由被刪除的元素組成的一個數組。若是隻刪除了一個元素，則返回只包含一個元素的數組。若是沒有刪除元素，則返回空數組。
注意
若是添加進數組的元素個數不等於被刪除的元素個數，數組的長度會發生相應的改變。
7、Array.push(value,...)
描述
像數組末尾添加一個或者多個元素
參數
添加的值
返回值
返回數組的長度
8、Array.pop()
描述
彈出數組的最後的元素
返回值
返回彈出的元素
9、Array.unshift(value,...)
描述
向數組開始添加一個或者多個元素
參數
添加的值
返回值
返回數組的長度
10、Array.shift()
描述
彈出數組開始的元素
返回值
返回彈出以後的值
小結：這四種方法稱爲：棧和隊列方法，
11、Array.map()
描述
返回一個由原數組中的每一個元素調用一個指定方法後的返回值組成的新數組
語法
Array.map(callback)
參數
callback回調函數
currentValue,callback的第一個參數,數組中當前被傳遞的元素
index，callback的第二個參數，數組中當前被傳遞的元素的索引
array，callback的第三個參數，調用map方法的數組
注意
map 方法會給原數組中的每一個元素都按順序調用一次 callback 函數
callback 每次執行後的返回值組合起來造成一個新數組
callback 函數只會在有值的索引上被調用，那些歷來沒被賦過值或者使用 delete 刪除的索引則不會被調用
12、Array.filter()
描述
方法使用指定的函數測試全部元素，並建立一個包含全部經過測試的元素的新數組
語法
arr.filter(callback)
注意
filter 爲數組中的每一個元素調用一次 callback 函數，並利用全部使得 callback 返回 true 或 等價於 true 的值 的元素建立一個新數組
callback 只會在已經賦值的索引上被調用，對於那些已經被刪除或者從未被賦值的索引不會被調用。那些沒有經過 callback 測試的元素會被跳過，不會被包含在新數組中。
13、Array.reduce()
描述
reduce方法接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終爲一個值
語法
arr.reduce(callback,[initialValue])
參數
callback
previousValue，上一次調用返回的值或者是提供的初始值(initialValue)
currentValue,數組中當前被處理的元素
index,當前元素在數組中得索引
array，調用reduce的數組
initialValue，做爲第一次調用callback的第一個參數
注意
reduce 爲數組中的每個元素依次執行回調函數，不包括數組中被刪除或從未被賦值的元素，接受四個參數：初始值（或者上一次回調函數的返回值），當前元素值，當前索引，調用 reduce 的數組
回調函數第一次執行時，previousValue 和 currentValue 能夠是一個值，若是 initialValue 在調用 reduce 時被提供，那麼第一個 previousValue 等於 initialValue ，而且currentValue 等於數組中的第一個值；若是initialValue 未被提供，那麼previousValue 等於數組中的第一個值，currentValue等於數組中的第二個值。
14、Array.reduceRight()
描述
與reduce()方法的執行方向相反
15、Array.some()
描述
測試數組中的某些元素是否經過了指定函數的測試
語法
arr.some(callback)
注意
some 爲數組中的每個元素執行一次 callback 函數，直到找到一個使得 callback 返回一個真值（便可轉換爲布爾值 true 的值）
16、Array.every()
描述
測試數組的全部元素是否都經過了指定函數的測試。
語法
arr.every(callback)
注意
every 方法爲數組中的每一個元素執行一次 callback 函數，直到它找到一個使 callback 返回 falsy（表示可轉換爲布爾值 false 的值）的元素。若是發現了一個這樣的元素，every 方法將會當即返回 false。不然，callback 爲每個元素返回 true，every 就會返回 true。callback 只會爲那些已經被賦值的索引調用。不會爲那些被刪除或歷來沒被賦值的索引調用
17、Array.indexOf()
28、Array.lastIndexOf()
19、Array.isArray()
描述
檢測某個值是否爲數組
20、Array.toString()
描述
返回一個字符串，表示指定的數組及其元素。
返回值
返回一個字符串，表示指定的數組及其元素。
注意：
一、該方法的返回值與不使用任何參數調用join的方法一致，如[1,2,3].toString();//'1,2,3
二、因爲alert要接收字符串參數，它會在後臺調用toString()方法，會獲得與toString()方法相同的結果，如alert([1,2,3]);//1,2,3
2一、Array.toLocaleString()
toLocaleString()是toString()方法的本地化版本，他常常會返回到與toString()方法相同的結果
若是數組中的某一項值爲null或是undefined，該值在toLocaleString()和toString()方法返回的結果以空字符串表示，如：
var a=[1,null,2,undefined,3];
console.log(a.toLocaleString());//1,,2,,3
console.log(a.toString());//1,,2,,3
關於兩者的區別，能夠經過下面的例子來理解：
toLocaleString 方法返回一個 String 對象，這個對象中包含了用當前區域設置的默認格式表示的日期。
對於公元 1601 和 1999 之間的時間，日期格式要按照用戶的「控制面板」中「區域設置」來肯定。
F對於此區間外的其餘時間，使用 toString 方法的默認格式。
例如，一樣是 3 月 21 日，在美國，toLocaleString 可能會返回 "03/21/08 01:02:03"，而在歐洲，返回值則多是 "21/03/08 01:02:03"，由於歐洲的慣例是將日期放在月份前面。
toLocaleString 只是用來顯示結果給用戶；最好不要在腳本中用來作基本計算，由於返回的結果是隨機器不一樣而不一樣的。
2二、Array.valueOf()
valueOf()方法返回數組對象自己
var a=[1,2,3];
console.log(a.valueOf());//[1,2,3]
console.log(a.valueOf() instanceof Array);//true
小結：toString，toLocaleString和valueOf方法，都是屬於對象的繼承方法！
它們的具體使用方法以下：
//數組中經常使用的方法
var arr = ['a','b','c','d','e'];
//join
var a = arr.join();//a,b,c,d,e 默認爲","
a = arr.join(",");//a,b,c,d,e
a = arr.join("");//abcde 修改成空
console.log(a);
//reverse反轉
a = arr.reverse();
console.log(a);
//sort()排序
var arr1 = ['a','b','c','A','B','C'];
var a = arr1.sort();
console.log(a);//A,B,C,a,b,c 默認排序是按照碼排序
//也能夠本身指定排序的順序
var arr2 = [1,2,3,11,15,20,23,30];
var a = arr2.sort();
console.log(a);//1,11,15,2,20,23,3,30
var a = arr2.sort(function(a,b){
return a-b;
});
console.log(a);//1,2,3,11,15,20,23,30
var a = arr2.sort(function(a,b){
return b-a;
});
console.log(a);//30,23,20,15,11,3,2,1
var users = [
{name:'foodoir',age:21},
{name:'hello',age:33},
{name:'world',age:44},
{name:'jake',age:55},
];
// console.log(users);
users.sort(function(a,b){
if(a.name>b.name) return 1;
if(a.name<b.name) return -1;
return 0;
});
// console.log(users);
for(var i in users){
console.log(users[i]['name']);//注意是訪問的數組裏面的name屬性方法是users[i]['name']
}
//concat數組的連接
var arr = [1,2,3];
var a = arr.concat('a');//1,2,3,a
var a = arr.concat([4,5,6]);
var a = arr.concat([4,[5,['a','b','c']]]);
console.log(a);
//slice()
var arr = ['a','b','c','d','e','f','g','h','i'];
var a = arr.slice(0,3);
console.log(a);//a,b,c
var a = arr.slice(0,-2);
console.log(a);//a,b,c,d,e,f,g
var a = arr.slice(-5,-3);//
console.log(a);//e,f
var a = arr.slice(-5,3);//不存在
console.log(a);//e,f
var a = arr.slice(-5,0);//不存在
console.log(a);//e,f
var a = arr.slice(4);//表示從左邊第五個開始，一直到數組末尾
console.log(a);//e,f,g,h,i
var a = arr.slice(-4);//表示從右邊第四個開始，一直到數組末尾
console.log(a);//f,g,h,i
console.log(arr);//原數組並無變化
//splice
var arr = ['a','b','c','d','e','f','g','h','i'];
console.log(arr.length);//9
var a = arr.splice(0,1);
console.log(a);//a
console.log(arr);//b,c,d,e,f,g,h,i
console.log(arr.length);//8
//此種方法將數組中的值取出來了，致使數組長度減小
var a = arr.splice(5);
console.log(a);//g,h,i
console.log(arr);//b,c,d,e,f
console.log(arr.length);//5
var a = arr.splice(0,2,'!','?','%');
console.log(a);//b,c 截取的值爲b,c ，而且在b,c 的基礎上，加上了!,?,%,
console.log(arr);//!,?,%,d,e,f
console.log(arr.length);//6
//map
var arr = [1,2,3,4,5];
var a = arr.map(function(x){
return x*x;
});
console.log(a);//1,4,9,16,25
var arr = ['a!','b!','c','d','e!'];
var a = arr.map(demo);
function demo(x){
return x.replace(/!/g,'?').toUpperCase();//將！改成？，將小寫變爲大寫
}
console.log(a);
//filter過濾
var arr = [1,2,4,8,16,32,22];
var a = arr.filter(function(x){
return x<=10;
});
console.log(a);//1,2,4,8 只輸出值小於10 的
var arr1 = [1,2,4,8,16,32,21,true,false,null,undefined];
var a1 = arr1.filter(function(x){
//過濾掉奇數
return x%2 == 0;
});
console.log(a1);//0：2 1:4 2:8 3:16 4:32 5:false 6:null length : 7
var arr1 = [1,2,4,8,16,32,21,true,false,null,undefined];
var a1 = arr1.filter(function(x){
//過濾掉null/undefined
return x!== null && x!==undefined;
});
console.log(a1);//1,2,4,8,16,32,21,true,false
//reduce
var arr = [1,2,3,4,5];
var a = arr.reduce(function(a,b){
return a+b;
});
console.log(a);//15
var a = arr.reduce(function(a,b){
return a+b;
},10); //傳入初始值10
console.log(a);//25
//every和some
var age = [11,22,33,44,55];
//every，當數組中全部的值都知足條件時，返回true，不然返回false
var a = arr.every(function(x){
return x>=18;
});
console.log(a);//false
//若將age裏面的11改成18，則爲true
//some ，當數組中只要有值知足條件，就返回true
var b = arr.some(function(y){
return y<18;
});
console.log(b);//true
//indexOf,a最早出現的位置
var arr = ['a','b','c','d','e'];
var res = arr.indexOf(a);
console.log(res);//沒有的話，返回的是-1
var res = arr.indexOf('a');
console.log(res);//有的話，返回的是該值對應數組中的索引
var arr = ['a','b','c','d','e','a','bc','a'];
var res = arr.indexOf('a',2);//表示從第二個開始索引
console.log(res);//5
//lastIndexOf(),a最後出現的位置
var res = arr.lastIndexOf('a');
console.log(res);
//Array.isArray()
var arr = ['a','b','c','d','e'];
console.log(Array.isArray(arr));//true
console.log(Array.isArray([]));//true
console.log(Array.isArray({}));//false,空的對象不是數組，
//數組是對象，可是對象不是數組
//toString
var arr = ['a','b','c','d','e'];
console.log(arr.toString());//a,b,c,d,e
console.log(arr.join());//a,b,c,d,e
- 1. JavaScript數組詳解
- 2. Javascript數組詳解
- 3. JavaScript 數組詳解
- 4. 詳解JavaScript數組
- 5. JavaScript中數組對象詳解
- 6. Javascript Array數組詳解
- 7. JavaScript數組方法詳解
- 8. JavaScript數組結構與算法——數組詳解（中）
- 9. JavaScript中的數組
- 10. Javascript中的數組
- 更多相關文章...
- • 免費ARP詳解 - TCP/IP教程
- • ARP協議的工作機制詳解 - TCP/IP教程
- • Flink 數據傳輸及反壓詳解
- • Scala 中文亂碼解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。