快捷導(dǎo)航

javascript框架設(shè)計(jì)讀書(shū)筆記之?dāng)?shù)組的擴(kuò)展與修復(fù)

更新時(shí)間：2014年12月02日 17:13:57 投稿：hebedich

本文是司徒正美的《javascript框架設(shè)計(jì)》的第三章第2節(jié)的讀書(shū)筆記，本節(jié)主要介紹的是javascript數(shù)組的擴(kuò)展與修復(fù)，本文則是選取了其中的重點(diǎn)部分展示給大家。

1.indexOf和lastIndexOf方法：

因?yàn)镮E7在數(shù)組對(duì)象上使用indexOf會(huì)報(bào)錯(cuò)，所以需要重寫(xiě)一個(gè)兼容性的。

復(fù)制代碼代碼如下:

Array.prototype.lastIndexOf(item,index){

　　var n = this.length,i = (index==null||index>n-1)?n-1:index;

　　if(i < 0) i = n+i;

　　for(;i>=0;i--)

　　　　if(this[i] === item)   //全等判斷，indexOf，lastIndexOf

　　　　　　return i;

　　return -1;

}

2.shuffle方法：對(duì)數(shù)組進(jìn)行洗牌。

復(fù)制代碼代碼如下:

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){}    

　　　　 //假設(shè)length=10，那么Math.random()*10->[0,10),parseInt后，[0,9]，隨機(jī)的選擇一個(gè)與數(shù)組最后一項(xiàng)交換。第二次循環(huán)，[0,8]，與數(shù)組的倒數(shù)第二項(xiàng)交換。

　　return target;

}

3.數(shù)組的平坦化處理：flatten，返回一個(gè)一維數(shù)組

復(fù)制代碼代碼如下:

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方法：對(duì)數(shù)組去重操作

此方法，面試官最喜歡問(wèn)了，因?yàn)樗卸喾N實(shí)現(xiàn)方法，最普通的是兩個(gè)for循環(huán)。一般知道的最多的是使用一個(gè)對(duì)象a,然后一個(gè)for循環(huán)數(shù)組arr，每次if(a[arr[i]])是否存在，不存在則push到你新定義的數(shù)組result中。存在就證明，重復(fù)，因此不用push到result中。這種方案，針對(duì)"123"，123,會(huì)認(rèn)為相同的，其實(shí)一個(gè)是字符串，一個(gè)是數(shù)字，不應(yīng)該認(rèn)為是相同的。

所以就出現(xiàn)了以下方法：[1,"1","1"]

復(fù)制代碼代碼如下:

 if ((typeof obj[array[i]]) != (typeof array[i]) || obj[array[i]] != array[i]) {

　　a.push(array[i]);

　　obj[array[i]] = array[i];

}

//首先判斷類型是否相同，如果相同，就判斷他們的值是否相等，不相等就存進(jìn)去，相等就證明之前已經(jīng)存在這個(gè)值了。

如果類型不相同，這里存在兩種情況，

第一種情況，obj之前已經(jīng)存了此數(shù)據(jù)了，比如:obj[123] = 123,現(xiàn)在array[i] = "123"，這時(shí)，typeof obj[array[i]])是數(shù)字，而typeof array[i]是字符串，因此存入數(shù)組中。

第二種情況是obj還沒(méi)存此數(shù)據(jù)，比如：array[i] = "123",obj["123"] = undefind,這時(shí)typeof obj[array[i]])就是typeof undefined = undefined,不等于typeof array[i]，存入數(shù)組中。

此種方法，可以解決字符串和數(shù)字相同的情況，但是無(wú)法解決對(duì)象相同的情況。比如:a = {1:2}, b ={2:1};

第一次循環(huán)時(shí)，typeof obj[a] = undefined，typeof a = Object。存入obj[a] =a.其實(shí)就是obj[Object] = a;

第二次循環(huán)時(shí)，typeof obj[b] 等于typeof obj[Object]其實(shí)就是typeof a = object,typeof b = object.因此進(jìn)入到obj[array[i]] != array[i]|,也就是obj[b]->obj[Object]->a ！= b，因此存入

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

這種情況下，就會(huì)出現(xiàn)所有的對(duì)象，都只會(huì)存最后一個(gè)對(duì)象值。

當(dāng)考慮對(duì)象時(shí)，我就會(huì)使用以下這種方法：

復(fù)制代碼代碼如下:

for(var i = 0; i < temp.length; i++){

                for(var j = i + 1; j < temp.length; j++){

                        if(temp[i] === temp[j]){

                                temp.splice( j, 1 );

                                j--;

                        }

                }

        }

 return temp;

5.數(shù)組排序：sort方法，如果要排序的是對(duì)象，可以自己寫(xiě)一個(gè)compare(a,b){if(a.age>b.age) return 1;else return -1;},A.sort(compare).

6.min返回?cái)?shù)組最小值：return Math.min.apply(0,array);

7.unshift在ie6,7下不返回?cái)?shù)組長(zhǎng)度。

復(fù)制代碼代碼如下:

if([].unshift(1)!==1)   //往空數(shù)組中從前面添加一項(xiàng)，其他瀏覽器會(huì)返回1,而IE6,7不會(huì)返回?cái)?shù)組長(zhǎng)度。這時(shí)就執(zhí)行if語(yǔ)句

{

　　var _unshift = Array.prototype.unshift;      //函數(shù)劫持。

　　Array.prototype.unshift = function(){

　　　　_unshift.apply(this,arguments);

　　　　return this.length;

　　}

}

8.splice在一個(gè)參數(shù)的情況下，IE8以及以下版本默認(rèn)第二個(gè)參數(shù)為0，而其他瀏覽器是數(shù)組長(zhǎng)度。

復(fù)制代碼代碼如下:

if([1,2,3].splice(1).length == 0)   //IE8以及以下版本會(huì)等于0，其他版本會(huì)等于3，進(jìn)入if里面

{

　　var _splice = Array.prototype.splice;

　　Array.prototype.splice = function(a){

　　　　if(arguments.length == 1)   //如果只有一個(gè)參數(shù)時(shí)

　　　　{

　　　　　　return _splice.call(this,a,this.length);

　　　　}else{

　　　　　　return _splice.apply(this,arguments);

　　　　}

　　}

}

這個(gè)方法會(huì)改變數(shù)組的選項(xiàng)，因此數(shù)組的push,pop,shift,unshift（這幾個(gè)方法也會(huì)修改數(shù)組的選項(xiàng)）都會(huì)調(diào)用這個(gè)方法來(lái)實(shí)現(xiàn)。

這里有一個(gè)地方需要注意：

復(fù)制代碼代碼如下:

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選項(xiàng)上，開(kāi)始操作，如果刪除為0，則添加的選項(xiàng)是在yellow之前插入。切記。

這里請(qǐng)大家去看下splice和slice的區(qū)別，返回值，以及對(duì)原數(shù)組的影響。

以上就是本節(jié)的內(nèi)容的精簡(jiǎn)版了，雖然精簡(jiǎn)，但重點(diǎn)都在，希望對(duì)大家閱讀本節(jié)的時(shí)候能有所幫助

您可能感興趣的文章: