相關(guān)文章
博客原文
數(shù)據(jù)類型總結(jié)——概述
數(shù)據(jù)類型總結(jié)——String(字符串類型)
數(shù)據(jù)類型總結(jié)——Number（數(shù)值類型）
數(shù)據(jù)類型總結(jié)——Boolean類型（布爾類型）
數(shù)據(jù)類型總結(jié)——null和undefined
數(shù)據(jù)類型總結(jié)——基本包裝類型
數(shù)據(jù)類型總結(jié)——Array(數(shù)組類型）
大綱
前言
1、Array數(shù)組類型的相關(guān)概念
2、創(chuàng)建數(shù)組的基本方式有兩種
3、檢測某個(gè)變量是否是數(shù)組的方式
4、數(shù)組的遍歷：for...in語句
5具壮、數(shù)組的常用方法
前言
數(shù)據(jù)類型是每一種語言都需要掌握的內(nèi)容，掌握每一種數(shù)據(jù)類型的使用是掌握這門語言必不可少的。而我也對數(shù)據(jù)類型寫了一系列的博客冗恨，其中包含了對某一數(shù)據(jù)類型的概念的認(rèn)識(shí)和理解以及常使用的方法。以下就是我對Array類型的一些認(rèn)識(shí)和理解味赃，希望能對讀者有所幫助掀抹。并且這是關(guān)于ES6之前的一篇，之后還會(huì)有一篇關(guān)于ES6對數(shù)組的新增的知識(shí)的總結(jié)心俗。
1傲武、Array數(shù)組類型的相關(guān)概念
1蓉驹、數(shù)組是一種特殊的變量，他由多個(gè)數(shù)組元素構(gòu)成揪利，可以保存多個(gè)不同類型的數(shù)據(jù)态兴。數(shù)組的存在是為了解決一個(gè)變量只能存儲(chǔ)一個(gè)數(shù)據(jù)的局限，使用數(shù)組可以保存多個(gè)數(shù)據(jù)項(xiàng)疟位。
2瞻润、數(shù)組的聲明不同于變量的聲明，需要通過new Array()來創(chuàng)建數(shù)組甜刻。
3绍撞、每個(gè)數(shù)組元素的索引是唯一的，通過索引就可以為指定的數(shù)組元素賦值或訪問指定的數(shù)組元素得院。
4傻铣、ECMAScript中的數(shù)組是數(shù)據(jù)的有序列表，不同于其它語言祥绞，ECMAScript數(shù)組的每一項(xiàng)可以保存不同的任何類型的數(shù)據(jù)非洲。ECMAScript數(shù)組的大小是可以動(dòng)態(tài)調(diào)整的，即可以隨著數(shù)據(jù)的添加自動(dòng)增長以容納新增數(shù)據(jù)就谜。
var colors = ["red","bule","green"];
colors[99] = "black";
console.log(colors.length);//100
console.log(colors[98]);//undefined
console.log(colors[99]);//black
5怪蔑、JavaScript只支持一維數(shù)組，而不存在多維數(shù)組丧荐。JavaScript允許把一個(gè)數(shù)組的元素聲明為一個(gè)新的數(shù)組缆瓣，從而模擬出多維數(shù)組。
var personel = new Array();
personel[0] = new Array();
personel[0][0] = "Name0";
personel[0][1] = "Age0";
personel[0][2] = "Address0";
personel[1] = new Array();
personel[1][0] = "Name1";
personel[1][1] = "Age1";
personel[1][2] = "Address1";
personel[2] = new Array();
personel[2][0] = "Name2";
personel[2][1] = "Age2";
personel[2][2] = "Address2";
console.log(personel);
2虹统、創(chuàng)建數(shù)組的基本方式有兩種
1弓坞、使用Array構(gòu)造函數(shù)
var colors = new Array();
var colors = new Array(20);
var colors = new Array("red","blue","green");
2、使用數(shù)組字面量表示法,與對象一樣车荔，在使用數(shù)組字面量表示法時(shí)渡冻，也不會(huì)調(diào)用Array構(gòu)造函數(shù)。
var colors = ["red","blue","green"];
var colors[colors.length] = "black";
3忧便、檢測某個(gè)變量是否是數(shù)組的方式
1族吻、使用instanceof操作符（當(dāng)使用框架的時(shí)候，在不同的框架中的全局執(zhí)行環(huán)境不同可能會(huì)有問題）
var colors = ["red","bule","green"];
var isArr = colors instanceof Array;
console.log(isArr);
2珠增、ES5新增的Array.isArray()方法超歌，用于確定某個(gè)值到底是不是數(shù)組
var isArr2 = Array.isArray(colors);
console.log(isArr2);
4、數(shù)組的遍歷：for...in語句
在js中蒂教，數(shù)組不是數(shù)據(jù)類型巍举，數(shù)組的數(shù)據(jù)類型其實(shí)就是對象。
Js中的For.....in語句可以實(shí)現(xiàn)對一個(gè)對象的所有屬性的遍歷凝垛。
也可以使用for...in語句實(shí)現(xiàn)對一個(gè)數(shù)組的所有元素的遍歷
for( var i in array ){}懊悯。
原理：數(shù)組中有幾個(gè)元素蜓谋，for..in語句就循環(huán)執(zhí)行多少次。
每次執(zhí)行時(shí)炭分，將當(dāng)前數(shù)組元素的下標(biāo)存放到變量i中
var row = ['zhangsan','lisi','wangwu','xiaoqiang'];
for (var i in row){
//document.write(i + ':' + row[i] + '<br>');
console.log(row[i]);
}
//zhangsan
//lisi
//wangwu
//xiaoqiang
5桃焕、數(shù)組的常用方法
5.1、棧方法：push()和pop()
ECMAScript數(shù)組提供了一種讓數(shù)組的行為類似于棧的操作方法（棧：一種可以限制插入和刪除的數(shù)據(jù)結(jié)構(gòu),LIFO:last-In-First-Out后進(jìn)先出欠窒，在棧中項(xiàng)的插入叫做推入覆旭，移除叫做彈出）
ECMAScript數(shù)組提供了push()和pop()方法，以便實(shí)現(xiàn)類似棧的行為
var colors = new Array();
var count = colors.push("red","green");
console.log(count);//2//push方法推入值并返回?cái)?shù)組的長度
count = colors.push("black");
console.log(count);//3
var item = colors.pop();//pop方法彈出數(shù)組的最后進(jìn)入的項(xiàng)岖妄，并返回該項(xiàng)
console.log(item);//black
console.log(colors.length);//2
5.2型将、隊(duì)列方法：push()和shift()
隊(duì)列數(shù)據(jù)結(jié)構(gòu)的訪問規(guī)則是FIFO（First-In-First-Out先進(jìn)先出，隊(duì)列在列表的末端添加項(xiàng)荐虐，從列表的前端移除項(xiàng)）
通過push向數(shù)組末端添加項(xiàng)七兜，通過shift()方法取得數(shù)組前端項(xiàng)，結(jié)合使用便可以像使用隊(duì)列一樣使用數(shù)組
var colors = new Array();
var count = colors.push("red","green");
console.log(count);//2//push方法推入值并返回?cái)?shù)組的長度
count = colors.push("black");
console.log(count);//3
var item = colors.shift();//shift方法彈出數(shù)組的第一項(xiàng)福扬，并返回該項(xiàng)
console.log(item);//red
console.log(colors.length);//2
5.3腕铸、unshift()方法
ECMAScript還為數(shù)組提供了一個(gè)unshift()方法。利用unshift()方法能在數(shù)組前端添加任意個(gè)項(xiàng)并返回?cái)?shù)組長度铛碑。
利用pop()方法可以取得數(shù)組末端的項(xiàng)狠裹。
結(jié)合unshif()方法和pop()方法可以從相反的方向來模擬隊(duì)列，即在數(shù)組的前端添加項(xiàng)汽烦，從數(shù)組末端移除項(xiàng)涛菠。
5.4、排序方法：reverse()和sort()
數(shù)組中已經(jīng)存在兩個(gè)可以直接用來重新排序的方法：reverse()和sort()撇吞。
reverse()：該方法會(huì)反轉(zhuǎn)數(shù)組的順序
var values = [1,2,3,4,5];
values.reverse();
console.log(values);//(5) [5, 4, 3, 2, 1]
sort()方法按升序排列數(shù)組項(xiàng)俗冻，即最小的值位于最前面，最大的值排在最后面牍颈。為了實(shí)現(xiàn)排序迄薄，sort()方法會(huì)調(diào)用每個(gè)數(shù)組的toString()轉(zhuǎn)型方法，然后比較得到字符串煮岁，以確定如何排序讥蔽，即使數(shù)組中的每一項(xiàng)都是數(shù)值，sort()方法比較的也是字符串画机。
var values = [0,1,5,10,15];
values.sort();
console.log(values);//(5) [0, 1, 10, 15, 5]
5.5冶伞、concat()方法
concat()方法用于將一個(gè)項(xiàng)或多個(gè)項(xiàng)推入數(shù)組中，并返回這個(gè)合成之后的數(shù)組色罚。
var colors = ["red","bule","green"];
var colors2 = colors.concat("yellow",["black","brown"]);
console.log(colors);//(3) ["red", "bule", "green"]
console.log(colors2);//(6) ["red", "bule", "green", "yellow", "black", "brown"]
5.6、slice()方法
slice()方法用于從數(shù)組中導(dǎo)出一個(gè)或多個(gè)項(xiàng)從而返回一個(gè)由這些項(xiàng)組成的新數(shù)組账劲。
var colors = ["red","bule","green","yellow","purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
console.log(colors);//(5) ["red", "bule", "green", "yellow", "purple"]
console.log(colors2);//(4) ["bule", "green", "yellow", "purple"]
console.log(colors3);//(3) ["bule", "green", "yellow"]
5.7戳护、splice()方法
splice()方法用于對數(shù)組中一個(gè)或多個(gè)項(xiàng)進(jìn)行刪除金抡、插入、替換的操作腌且。
//1梗肝、用作刪除數(shù)組中元素
var colors = ["red" , "green","blue"];
var removed = colors.splice(0,1);//刪除數(shù)組中0開始的第一項(xiàng)
console.log(colors);//(2) ["green", "blue"]
console.log(removed);//["red"]
//2、用于插入數(shù)組元素
var colors = ["red" , "green","blue"];
var inserted = colors.splice(0,0,"yellow","orange");//在數(shù)組中0的位置上插入兩項(xiàng)
console.log(colors);//(5) ["yellow", "orange", "red", "green", "blue"]
console.log(inserted);//[]
//3铺董、替換數(shù)組中元素
var colors = ["red" , "green","blue"];
var inserted = colors.splice(0,1,"yellow","orange");//刪除數(shù)組上的0開始的1項(xiàng)并插入兩項(xiàng)
console.log(colors);//(4) ["yellow", "orange", "green", "blue"]
console.log(inserted);//["red"]
5.8巫击、位置方法：查找元素所在位置——indexOf()和lastIndexOf()
ECMAScript為數(shù)組添加了兩個(gè)位置方法：indexOf()和lastIndexOf()
這兩個(gè)方法都接收兩個(gè)參數(shù)：要查找的項(xiàng)和表示查找起點(diǎn)位置的索引（可選）
這兩個(gè)方法返回的都是要查找的項(xiàng)在數(shù)組中的位置，沒找到返回-1精续，查找的過程中使用的嚴(yán)格的全等方式比較
indexOf()是從首位開始查找坝锰，lastIndexOf()是從末尾開始往回查找
5.9、迭代方法：every()重付、some()顷级、filter()、map()确垫、forEach()
ECMAScript為數(shù)組定義了5個(gè)迭代方法弓颈。
每個(gè)方法都接收兩個(gè)參數(shù)：要在每一項(xiàng)上運(yùn)行的函數(shù)和運(yùn)行該函數(shù)的作用域?qū)ο螅蛇x的）——影響this的值
傳入這些方法中的函數(shù)會(huì)接收三個(gè)參數(shù)：數(shù)組項(xiàng)的值、該項(xiàng)在數(shù)組中的位置和數(shù)組對象本身删掀。
迭代方法都需要傳入每一項(xiàng)上運(yùn)行的函數(shù)翔冀，即需要對每一項(xiàng)進(jìn)行操作的函數(shù)，這樣才能知道對數(shù)組的每一項(xiàng)進(jìn)行什么操作披泪。
every()：若數(shù)組的每個(gè)項(xiàng)都滿足條件纤子，返回true,若有一項(xiàng)不滿足，返回false
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
return(item > 2);
//return(index < 20);//true
});
console.log(everyResult);//false
some()：若數(shù)組的某一項(xiàng)滿足條件付呕，返回true计福，若沒有一項(xiàng)滿足條件，則返回false
var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some(function(item,index,array){
return(item > 2);
//return(index > 20);//false
});
console.log(someResult);//true
filter()：將滿足條件的項(xiàng)過濾出來
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item,index,array){
return(item > 2);
//return(index > 4);//(4) [4, 3, 2, 1]
});
console.log(filterResult);//(5) [3, 4, 5, 4, 3]
map()：對數(shù)組中的每個(gè)項(xiàng)都進(jìn)行同樣的操作
var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item,index,array){
return(item * 2);
});
console.log(mapResult);//(9) [2, 4, 6, 8, 10, 8, 6, 4, 2]
forEach()：對數(shù)組中的每個(gè)項(xiàng)都進(jìn)行同樣的操作徽职，不同于map()象颖，map()方法是拷貝一個(gè)數(shù)組副本，然后對數(shù)組中的每個(gè)元素進(jìn)行操作姆钉，但是forEach()則是對數(shù)組本身進(jìn)行操作说订。
var numbers = [1,2,3,4,5,4,3,2,1];
var forEachResult = numbers.forEach(function(item,index,array){
//1 item = item * 2;//1
//2 array[index] = array[index] * 2;//2
array[index] = item * 2;//3
// console.log(item*2 === array[index]);//true
// console.log(array[index]);
});
console.log(forEachResult);//undefined
console.log(numbers);
//1、(9) [1, 2, 3, 4, 5, 4, 3, 2, 1]
//2潮瓶、(9) [2, 4, 6, 8, 10, 8, 6, 4, 2]
//3陶冷、(9) [2, 4, 6, 8, 10, 8, 6, 4, 2]
5.10、縮小方法：reduce()和reduceRight()
ECMAScript 5中新增了兩個(gè)縮小數(shù)組的方法：reduce()和reduceRight()毯辅。
這兩個(gè)方法都會(huì)迭代數(shù)組的所有項(xiàng)埂伦，然后構(gòu)建一個(gè)最終返回的值。
reduce()方法從數(shù)組的第一項(xiàng)開始遍歷思恐，reduceRight()從數(shù)組最后一項(xiàng)開始遍歷沾谜。
這兩個(gè)方法都接收兩個(gè)參數(shù)：一個(gè)在每一項(xiàng)上調(diào)用的函數(shù)和作為縮小基礎(chǔ)的初始值（可選）膊毁。
傳給reduce()和reduceRight()的操作函數(shù)接收4個(gè)參數(shù)：前一個(gè)值、當(dāng)前值基跑、項(xiàng)的索引婚温、數(shù)組對象。
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev,cur,index,array){
return prev + cur;
})
console.log(sum);//15
