數(shù)組

hdzgx 2019-03-02

展開全文

一、JavaScript中的數(shù)組

　　JavaScript中的數(shù)組是值得有序集合。數(shù)組中值叫做元素，元素在數(shù)組的位置叫索引。數(shù)組的元素可以是任意類型的，同一個數(shù)組中元素類型可以不同。JavaScript中數(shù)組是動態(tài)的，可以根據(jù)需要增加或縮減。數(shù)組的索引可以不連續(xù)，不連續(xù)的數(shù)組稱為稀疏數(shù)組，稀疏數(shù)組的長度大于元素的個數(shù)，非稀疏數(shù)組的元素長度等于元素個數(shù)。

　　數(shù)組是對象的特殊形式。可以把數(shù)組看做屬性恰巧是整數(shù)的對象，但是數(shù)組是經(jīng)過優(yōu)化的，訪問元素的效率比對象訪問屬性的效率高很多。

二、創(chuàng)建數(shù)組

　　1、數(shù)組直接量　

1 var  arr=[];//空數(shù)組
2 var arr=[1,2,,3] //長度為四的數(shù)組
3 var arr=[,,,]//三個元素的數(shù)組

　　 2、new Array()

　　不帶參數(shù)：創(chuàng)建一個空數(shù)組

　　只有一個參數(shù)且參數(shù)為一個數(shù)字：創(chuàng)建一個長度為參數(shù)的數(shù)組，數(shù)組的元素為0個。

　　帶多個參數(shù)，參數(shù)為數(shù)組的元素，數(shù)組的長度和元素的個數(shù)相等。

1 var arr=new Array();//空數(shù)組
2 arr=new Array(5);//長度為5的空數(shù)組
3 arr=new Array(1,2,3,'4');//有四個元素的數(shù)組

　　三、數(shù)組的讀寫

　　用對象的（[]）運算讀取和設置數(shù)組的元素值。當數(shù)組的索引是非負整數(shù)，那么數(shù)組的length會更新，當索引是其他值，會作為對象的屬性。　

1 var arr=new Array(1,2,3,'4');//有四個元素的數(shù)組
2 arr[1]=100;//設置數(shù)組的元素值
3 console.log(arr[1]);//100//讀取元素的值

　　　四、稀疏數(shù)組和非稀疏數(shù)組

　　稀疏數(shù)組的索引是不可連續(xù)的。length屬性大于元素的個數(shù)?？梢酝ㄟ^new Array(arg)、對象直接量獲得稀疏數(shù)組。　　　

1 var arr=new Array(5);//有四個元素的數(shù)組
2 console.log(arr.length);
3 arr=[];
4 arr[1001]=1;
5 console.log(arr.length);//1002
6 arr=[1,2,,,4]
7 console.log('2' in arr)//false

　　五、數(shù)組的長度

　　每個數(shù)組都有一個length屬性，就是這個屬性使其區(qū)別與其他的JavaScript對象。稠密數(shù)組的length屬性代表元素的個數(shù)，其中比數(shù)組的最大索引數(shù)大1，對于非稠密數(shù)組，length大于數(shù)組的元素個數(shù)，數(shù)組中的找不到元素索引大于或等于它的長度的。當給數(shù)組賦值時，索引i大于或者等于length,length屬性將設置為i+1;當把length屬性設置為一個小于當前l(fā)ength的非負整數(shù)n時，數(shù)組中大于等于n的元素會被刪除。　

1 var arr=[1,3,4,5]
2 arr.length=2;
3 console.log(arr);//[1,3]

　　六、數(shù)組元素的添加和刪除

　　給數(shù)組添加元素：

　　方法1：為新索引賦值

1 var arr=[1,3,4,5]
2 arr[6]=10;

·　　方法2：push()和unshift()方法

　　push()方法給數(shù)組的末尾添加一個元素。unshift（）方法給數(shù)組的首位添加一個元素。　　

1 var arr=[1,3,4,5]
2 arr.push(1);
3 arr.unshift(10);
4 console.log(arr);

　　刪除數(shù)組的元素

　　方法一：delete運算符：使用delete運算符可以刪除掉元素，但是不會改變數(shù)組的length.

1 var arr=[1,3,4,5]
2 delete arr[3];
3 console.log(arr);
4 console.log(arr.length);

　　方法2:改變（減?。﹍ength的值：大于或者等于length的元素都會被刪除。

　　方法三：shift()和pop方法()　

1 var arr=[1,3,4,5]
2 arr.pop();
3 arr.shift();
4 console.log(arr);//[3,4]
5 console.log(arr.length);//2

　　七、數(shù)組的遍歷

　　方法1：for循環(huán)

1 var arr=[1,3,4,5]
2 var keys=Object.keys(arr);
3 for(var i=0,len=keys.length;i<len;i++){
4     console.log(arr[keys[i]]);
5 }

　　當數(shù)組是稠密的。

1 var arr=[1,3,4,5]
2 for(var i=0;i<arr.length;i++){
3     console.log(arr[i]);
4 }

　　方法二：for/in循環(huán)，但是有可能遍歷出數(shù)組的元素上的可枚舉屬性。

1 var arr=[1,3,4,5]
2 for(var i in arr){
3     console.log(arr[i]);
4 }

　　方法三：forEach()

1 var arr=[1,3,4,5]
2 arr.forEach((ele,i,arr) => {
3     //arr代表數(shù)組 ele代表數(shù)組的元素 i代表數(shù)組的索引
4     console.log(ele);
5 });

　　八、Array.prototype上的方法

　　1、join()

　　join() 方法將一個數(shù)組（或一個類數(shù)組對象）的所有元素連接成一個字符串并返回這個字符串。所有的數(shù)組元素被轉(zhuǎn)換成字符串，再用一個分隔符將這些字符串連接起來。如果元素是undefined 或者null，則會轉(zhuǎn)化成空字符串。指定一個字符串來分隔數(shù)組的每個元素。如果省略()，數(shù)組元素用逗號分隔。默認為 ","。

1 var arr=[1,3,4,5]
2 console.log(arr.join(','));//'1,2,3,4'

　　2、reverse()

　　reverse() 方法將數(shù)組中元素的位置顛倒。第一個數(shù)組元素成為最后一個數(shù)組元素，最后一個數(shù)組元素成為第一個。reverse 方法顛倒數(shù)組中元素的位置，并返回該數(shù)組的引用。

1 var arr=[1,3,4,5]
2 console.log(arr.reverse())//[5,4,3,1]

　　3、sort()

　　sort() 方法用就地（ in-place ）的算法對數(shù)組的元素進行排序，并返回數(shù)組。 sort 排序不一定是穩(wěn)定的。默認排序順序是根據(jù)字符串Unicode碼點。如果數(shù)組包含undefined元素，后被排到數(shù)組的最后。　

1 var arr=[undefined，'apple','banana','cherries']
2 console.log(arr.sort())//[ 'apple', 'banana', 'cherries'，undefined ]

　　為了讓數(shù)組不安字母表的順序排序，可以給sort()傳入一個函數(shù)。函數(shù)的參數(shù)大于0時，第二個參數(shù)在前。　

1 var arr=[1,2,3,4,5]
2 console.log(arr.sort(function(a,b){
3     return b-a;
4 }))
5 //[5,4,3,2,1]

　　4、concat() 創(chuàng)建并返回一個新的數(shù)組。原始數(shù)組并未改變。　　

1 var arr=[1,2,3,4,5]
2 console.log(arr.concat(1,[2,3]))//[ 1, 2, 3, 4, 5, 1, 2, 3 ]
3 console.log(arr);//[ 1, 2, 3, 4, 5]

　　5、slice()　　

　　slice() 方法返回一個從開始到結束（不包括結束）選擇的數(shù)組的一部分淺拷貝到一個新數(shù)組對象。且原始數(shù)組不會被修改。

1 var arr=[1,2,3,4,5]
2 console.log(arr.slice(1,3))//[2, 3]
3 console.log(arr.slice(1,-1))//[2,3,4]

　　6、splice(start, deleteCount, item1, item2, ...) 　　splice() 方法通過刪除現(xiàn)有元素和/或添加新元素來更改一個數(shù)組的內(nèi)容,原始的數(shù)組發(fā)生了改變。

　　start指定修改的開始位置（從0計數(shù)）。如果超出了數(shù)組的長度，則從數(shù)組末尾開始添加內(nèi)容；如果是負值，則表示從數(shù)組末位開始的第幾位（從-1計數(shù)）；若只使用start參數(shù)而不使用deleteCount、item，如：array.splice(start) ，表示刪除[start，end]的元素。

　　deleteCount整數(shù)，表示要移除的數(shù)組元素的個數(shù)。如果 deleteCount 是 0，則不移除元素。這種情況下，至少應添加一個新元素。如果 deleteCount 大于start 之后的元素的總數(shù)，則從 start 后面的元素都將被刪除（含第 start 位）。如果deleteCount被省略，則其相當于(arr.length - start)。

　　item1, item2, ... 可選要添加進數(shù)組的元素,從start 位置開始。如果不指定，則 splice() 將只刪除數(shù)組元素。

　　splice方法使用deleteCount參數(shù)來控制是刪除還是添加：
　　start參數(shù)是必須的，表示開始的位置（從0計數(shù)），如：start=0從第一個開始；start>= array.length-1表示從最后一個開始。
　　①、從start位置開始刪除[start，end]的元素。
　　array.splice(start)
　?、?、從start位置開始刪除[start，Count]的元素。
　　array.splice(start, deleteCount)
　　③、從start位置開始添加item1, item2, ...元素。
　　array.splice(start, 0, item1, item2, ...)

　　返回值：由被刪除的元素組成的一個數(shù)組。如果只刪除了一個元素，則返回只包含一個元素的數(shù)組。如果沒有刪除元素，則返回空數(shù)組。

var arr=[1,2,3,4,5]
arr.splice(1);
console.log(arr)//[1]
arr=[1,2,3,4,5]
arr.splice(1,3)//[1,5]
console.log(arr);
arr=[1,2,3,4,5]
arr.splice(1,3,1,2,3)
console.log(arr);//[1,1,2,3,5]

　　7.push()和pop()　　pop()方法從數(shù)組中刪除最后一個元素，并返回該元素的值?！?/span>

　　　　　　　　　　　push() 方法將一個或多個元素添加到數(shù)組的末尾，并返回新數(shù)組的長度。

1 var arr=[1,2,3,4,5]
2 arr.push(6)
3 arr.pop();
4 console.log(arr);//[1,2,3,4,5]

　　8、shift()和unshift()

　　　shift() 方法從數(shù)組中刪除第一個元素，并返回該元素的值。此方法更改數(shù)組的長度。

　　　unshift() 方法將一個或多個元素添加到數(shù)組的開頭，并返回新數(shù)組的長度.　　　　

1 var arr=[1,2,3,4,5]
2 arr.unshift(6,4)
3 arr.shift();
4 console.log(arr);//[4,1,2,3,4,5]

　　9、toString()和toLocaleString()

　　toLocaleString() 返回一個字符串表示數(shù)組中的元素。數(shù)組中的元素將使用各自的 toLocaleString 方法轉(zhuǎn)成字符串，這些字符串將使用一個特定語言環(huán)境的字符串（例如一個逗號 ","）隔開。

　　toString() 返回一個字符串，數(shù)組中的元素將使用各自的 toString 方法轉(zhuǎn)成字符串，這些字符串將使用一個特定語言環(huán)境的字符串（例如一個逗號 ","）隔開。　

1 var arr=[1,2,3,4,5]
2 console.log(arr.toString());//'1,2,3,4,5'
3 console.log(arr.toLocaleString())//'1,2,3,4,5'

　　10、遍歷方法

　　在下面的眾多遍歷方法中，有很多方法都需要指定一個回調(diào)函數(shù)作為參數(shù)。在每一個數(shù)組元素都分別執(zhí)行完回調(diào)函數(shù)之前，數(shù)組的length屬性會被緩存在某個地方，所以，如果你在回調(diào)函數(shù)中為當前數(shù)組添加了新的元素，那么那些新添加的元素是不會被遍歷到的。此外，如果在回調(diào)函數(shù)中對當前數(shù)組進行了其它修改，比如改變某個元素的值或者刪掉某個元素，那么隨后的遍歷操作可能會受到未預期的影響。總之，不要嘗試在遍歷過程中對原數(shù)組進行任何修改，雖然規(guī)范對這樣的操作進行了詳細的定義，但為了可讀性和可維護性，請不要這樣做。

　　10.1、forEach() 　　forEach() 方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)。　

1 array.forEach(callback(currentValue, index, array){
2     //do something
3 }, this)
4 
5 array.forEach(callback[, thisArg])

　　　　currentValue　　數(shù)組中正在處理的當前元素。

　　 index(索引) 數(shù)組中正在處理的當前元素的索引。

　　　array 　　 forEach()方法正在操作的數(shù)組。

　　　thisArg　　　　可選可選參數(shù)。當執(zhí)行回調(diào) 函數(shù)時用作this的值(參考對象)。

 1 function logArrayElements(element, index, array) {
 2     console.log("a[" + index + "] = " + element);
 3 }
 4 
 5 // 注意索引2被跳過了，因為在數(shù)組的這個位置沒有項
 6 [2, 5, ,9].forEach(logArrayElements);
 7 
 8 // a[0] = 2
 9 // a[1] = 5
10 // a[3] = 9

　　　10.2 map()　　map() 方法創(chuàng)建一個新數(shù)組，其結果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結果。返回的數(shù)組和原數(shù)組等長。　

1 let new_array = arr.map(function callback(currentValue, index, array) { 
2     // Return element for new_array 
3 }[, thisArg])

　　參數(shù)和forEach()一樣。　　

1 var arr=[1,2,3,4,5];
2 //數(shù)組的元素翻倍
3 var new_arr=arr.map((currentValue)=>{
4     return currentValue*2;
5 });
6 console.log(new_arr);//[2,4,6,8,10]

　　10.3　filter() 方法創(chuàng)建一個新數(shù)組, 其包含通過所提供函數(shù)實現(xiàn)的測試的所有元素。 fileter(）方法回跳過稀疏數(shù)組中缺少的元素。　

1 var new_array = arr.filter(callback[, thisArg])

　　callback()　　用來測試數(shù)組的每個元素的函數(shù)。調(diào)用時使用參數(shù) (element, index, array)。返回true表示保留該元素（通過測試），false則不保留。
　　thisArg可選。執(zhí)行 callback 時的用于 this 的值。　

1 var arr=[1,2,3,4,5];
2 //數(shù)組的元素翻倍
3 var new_arr=arr.filter((currentValue)=>{
4     return currentValue>3;
5 });
6 console.log(new_arr);//[4,5]

　　10.4、every()　　every() 方法測試數(shù)組的所有元素是否都通過了指定函數(shù)的測試。

1 arr.every(callback[, thisArg])

　　every 方法為數(shù)組中的每個元素執(zhí)行一次 callback 函數(shù)，直到它找到一個使 callback 返回 false（表示可轉(zhuǎn)換為布爾值 false 的值）的元素。如果發(fā)現(xiàn)了一個這樣的元素，every 方法將會立即返回 false。否則，callback 為每一個元素返回 true，every 就會返回 true。callback 只會為那些已經(jīng)被賦值的索引調(diào)用。不會為那些被刪除或從來沒被賦值的索引調(diào)用。callback 被調(diào)用時傳入三個參數(shù)：元素值，元素的索引，原數(shù)組。　

1 var arr=[1,2,3,4,5];
2 //檢測數(shù)組的元素是否都大于3
3 var new_arr=arr.every((currentValue)=>{
4     return currentValue>3;
5 });
6 console.log(new_arr);//false

　　some() 方法測試數(shù)組中的某些元素是否通過由提供的函數(shù)實現(xiàn)的測試。

　　some 為數(shù)組中的每一個元素執(zhí)行一次 callback 函數(shù)，直到找到一個使得 callback 返回一個“真值”（即可轉(zhuǎn)換為布爾值 true 的值）。如果找到了這樣一個值，some 將會立即返回 true。否則，some 返回 false。callback 只會在那些”有值“的索引上被調(diào)用，不會在那些被刪除或從來未被賦值的索引上調(diào)用。callback 被調(diào)用時傳入三個參數(shù)：元素的值，元素的索引，被遍歷的數(shù)組。

1 arr.some(callback[, thisArg])

1 var arr=[1,2,3,4,5];
2 //檢測數(shù)組的元素是否都大于3
3 var new_arr=arr.some((currentValue)=>{
4     return currentValue>3;
5 });
6 console.log(new_arr);//true

　　10.5 reduce()和reduceRight()

　　reduce() 方法對累加器和數(shù)組中的每個元素（從左到右）應用一個函數(shù)，將其減少為單個值。數(shù)組中被刪除的索引或從未被賦值的索引會跳過

　　reduceRight() 方法接受一個函數(shù)作為累加器（accumulator）和數(shù)組的每個值（從右到左）將其減少為單個值。數(shù)組中被刪除的索引或從未被賦值的索引會跳過　

1 arr.reduce(callback[, initialValue])

　　callback執(zhí)行數(shù)組中每個值的函數(shù)，包含四個參數(shù)：

　　accumulator 累加器累加回調(diào)的返回值; 它是上一次調(diào)用回調(diào)時返回的累積值，或initialValue（如下所示）。

　　currentValue 數(shù)組中正在處理的元素。
　　currentIndex 可選數(shù)組中正在處理的當前元素的索引。如果提供了initialValue，則索引號為0，否則為索引為1。
　　array可選　　調(diào)用reduce的數(shù)組

　　initialValue 可選用作第一個調(diào)用 callback的第一個參數(shù)的值。 reduce()如果沒有提供初始值，則將使用數(shù)組中的第一個元素。在沒有初始值的空數(shù)組上調(diào)用 reduce 將報錯。reduceRight()沒有提供初始值，則使用最后一個。　

 1 var arr=[1,2,3,4,5];
 2 //檢測數(shù)組的元素是否都大于3
 3 var new_arr=arr.reduce((accumulator,currentValue)=>{
 4     return currentValue*accumulator;
 5 },10);
 6 console.log(new_arr);//1200
 7 var new_arr=arr.reduceRight((accumulator,currentValue)=>{
 8     return currentValue*accumulator;
 9 },10);
10 console.log(new_arr);//1200

　　10.6、indexOf() 　　方法返回在數(shù)組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。

　　　　lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或變量）在數(shù)組中的最后一個的索引，如果不存在則返回 -1。從數(shù)組的后面向前查找，從 fromIndex 處開始。　　　　　

1 arr.indexOf(searchElement)
2 arr.indexOf(searchElement[, fromIndex = 0])
3 arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])

1 var arr=[1,2,3,4,5,1];
2 //檢測數(shù)組的元素是否都大于3
3 console.log(arr.indexOf(1));//0
4 console.log(arr.lastIndexOf(1));//5

九、數(shù)組類型　

　　判斷對象數(shù)組的方法：

　　1、Array.isArray()方法

　　2、instanceof

　　3,檢查對象的類屬性；　　

1 var arr=[1,2,3,4,5,1];
2 //檢測數(shù)組的元素是否都大于3
3 console.log(Array.isArray(arr));//true
4 console.log(arr instanceof Array);//true
5 console.log(Object.prototype.toString.call(arr).slice(8,-1))　//Array

十、類數(shù)組對象

　　把一個擁有數(shù)值length和非負整數(shù)屬性的對象看做類數(shù)組對象，函數(shù)的argument對象、document.getElementByTagName()都是類數(shù)組對象。數(shù)組的方法時通用的，可以用Function.call()間接調(diào)用。　　

1 var arr={
2     '0':100,
3     '1':10,
4     '2':100,
5     length:3
6 };
7 //調(diào)用數(shù)組方法
8 console.log(Array.prototype.join.call(arr,"+"))//'100+10+100'