javascript框架設計閱讀筆記之數組的擴展與修復_javascript技巧

1.indexOf和lastIndexOf方法：

因為IE7在陣列物件上使用indexOf會報錯，所以需要重寫一個相容性的。

複製程式碼 程式碼如下:

Array.prototype.lastIndexOf(item,index){
　　var n = this.length,i = (index==null||index>n-1)?n-1:index;
　　if(i 　　for(;i>=0;i--)
　　　　if(this[i] === item)   //全等判斷，indexOf，lastIndexOf
　　　　　　return i;
　　return -1;
}

2.shuffle方法：對陣列進行洗牌。

複製程式碼 程式碼如下:

function shuffle(target){
　　var i = target.length, j ,temp;
for(;i>0;j=parseInt(Math.random() * i), x = target[--i],target[i] = target[j],target[j]=x){}   
　　　　 //假設length=10，那麼Math.random()*10->[0,10),parseInt後，[0,9]，隨機的選擇一個與數組最後一項交換。第二次循環，[0,8]，與陣列的倒數第二項交換。
　　return target;
}

3.陣列的平坦化處理：flatten，傳回一個一維數組

複製程式碼 程式碼如下:

function flatten(arr){
　　var result = [];
　　arr.forEach(function(item){
　　　　if(Array.isArray(item))   result.concat(flatten(item));
　　　　else　　result.push(item);
　　});
　　return result;
}

4.unique方法：對陣列去重操作

這個方法，面試官最喜歡問了，因為它有多種實作方法，最普通的是兩個for迴圈。一般知道的最多的是使用一個物件a,然後一個for循環數組arr，每次if(a[arr[i]])是否存在，不存在則push到你新定義的數組result。存在就證明，重複，因此不用push到result。這種方案，針對"123"，123,會認為相同的，其實一個是字串，一個是數字，不應該被認為是相同的。

所以就出現了以下方法：[1,"1","1"]

複製程式碼 程式碼如下:

 if ((typeof obj[array[i]]) != (typeof array[i]) || obj[array[i]] != array[i]) {
　　a.push(array[i]);
　　obj[array[i]] = array[i];
}

//先判斷型別是否相同，如果相同，就判斷他們的值是否相等，不相等就存進去，相等就證明之前已經存在這個值了。

如果類型不相同，這裡有兩種情況，

第一種情況，obj之前已經存了此資料了，例如:obj[123] = 123,現在array[i] = "123"，這時，typeof obj[array[i]])是數字，而typeof array[i]是字串，因此存入數組中。

第二種情況是obj還沒存此數據，例如：array[i] = "123",obj["123"] = undefind,這時typeof obj[array[i]])就是typeof undefined = undefined,不等於typeof array[i]，存入數組中。

此種方法，可以解決字串和數字相同的情況，但是無法解決物件相同的情況。如:a = {1:2}, b ={2:1};

第一次循環時，typeof obj[a] = undefined，typeof a = Object。存入obj[a] =a.其實就是obj[Object] = a;

第二次循環時，typeof obj[b] 等於typeof obj[Object]其實就是typeof a = object,typeof b = object.因此進入到obj[array[i]] != array[i]|,也就是obj[b]->obj[Object]->a ！ = b，因此存入

obj[b] = b;也就是obj[Object] = b;覆蓋了之前的obj[Object] = a;

這種情況下，就會出現所有的對象，都只會存最後一個對象值。

當考慮物件時，我會使用以下這種方法：

複製程式碼 程式碼如下:

for(var i = 0; i                 for(var j = i 1; j                         if(temp[i] === temp[j]){
                                temp.splice( j, 1,
                                j--;
                        }
                }
        }
 return temp;

5.陣列排序：sort方法，如果要排序的是對象，可以自己寫一個compare(a,b){if(a.age>b.age) return 1;else return -1;},A .sort(compare).

6.min回傳陣列最小值：return Math.min.apply(0,array);

7.unshift在ie6,7下不回傳陣列長度。

複製程式碼 程式碼如下:

if([].unshift(1)!==1)   //在空數組中從前面新增一項，其他瀏覽器會回傳1,而IE6,7不會回傳數組長度。這時就執行if語句
{
　　var _unshift = Array.prototype.unshift;      //函數劫持。
　　Array.prototype.unshift = function(){
　　　　_unshift.apply(this,arguments);
　　　　return this.length;
　　}
}

8.splice在一個參數的情況下，IE8以及以下版本預設第二個參數為0，而其他瀏覽器是陣列長度。

複製程式碼 程式碼如下:

if([1,2,3].splice(1).length == 0)   //IE8以及以下版本會等於0，其他版本會等於3，進入if裡面
{
　　var _splice = Array.prototype.splice;
　　Array.prototype.splice = function(a){
　　　　if(arguments.length == 1)   //如果只有一個參數時
　　　　{
　　　　　　return _splice.call(this,a,this.length);
　　　　}else{
　　　　　　return _splice.apply(this,arguments);
　　　　}
　　}
}

這個方法會改變陣列的選項，因此陣列的push,pop,shift,unshift（這幾個方法也會修改陣列的選項）都會呼叫這個方法來實現。

這裡有一個地方要注意：

複製程式碼 程式碼如下:

var color = new Array('red','blue','yellow','black');
var color2 = color.splice(2,0,'brown','pink');
alert(color); // red,blue,brown,pink,yellow,black，在yellow選項上，開始操作，如果刪除為0，則新增的選項是在yellow之前插入。切記。

 
這裡請大家去看下splice和slice的差別，回傳值，以及對原數組的影響。

以上就是本節的內容的精簡版了，雖然精簡，但重點都在，希望對大家閱讀本節的時候能有所幫助