javascript中的對象和數組的應用技巧

來源:互聯網
上載者:User

javascript已經用了有三年多了,但是對一些細節的東西還是一知半解,比如對象和數組,一直都在用一些最基本的操作。這是我學習的一個壞習慣--懶,很多東西都是瞭解而已,看到稍微複雜點的邏輯就沒有耐心。就像學asp時不知道asp跟指令碼的關係,學html不知道什麼是DOM...結果是學得慢且不紮實,碰到稍複雜的問題就歇菜(扯遠了)。
今天繼續最佳化指令碼,嘗試著合并一些數組時碰到問題,才算去仔細看了手冊,做了一些測試。

javascript1.2之後允許使用[]建立數組:

var firstArray = [];
var secondArray = ["red", "green", "blue"];
var thirdArray = [,,,,];

可以在數組建立後添加元素:

secondArray[4] = 28;

這樣的結果是第4個元素和第2個元素之間有1個空元素。
結果類似這樣:["red", "green", "blue",,28]
需要注意的是,數組必須初始化,我測試了數組作為數組元素的定義:

var arrArray = [[]];

本來設想實現二維數組,結果是使用arrArray[i][0]當i>0時無效!
仔細看一下才明白,其實是定義了arrArray[0]為一個空數組,而其他元素都未定義,相當於
var arrArray=[];
arrArray[0]=[];
所以arrArray[1]沒有定義,所以如果將它作為數組進行操作會出錯。

刪除一個數組元素:delete

var myColors = ["red", "green", "blue"];
delete myColors[1];
alert("The value of myColors[1] is: " + myColors[1]);

delete的結果是myColors[1]=undefined,但是myColors.length不變,myColors變成這樣:["red",, "blue"]

替換或絕對刪除數組元素用slice():

var myArray = [1, 2, 3, 4, 5];
myArray.slice(2); // returns [3, 4, 5]
myArray.slice(1, 3); // returns [2, 3]
myArray.slice(-3); // returns [3, 4, 5]
myArray.slice(-3, -1); // returns [3, 4]
myArray.slice(-4, 3); // returns [2, 3]
myArray.slice(3, 1); // returns []

var myArray = [1, 2, 3, 4, 5];
myArray.splice(3,2,''a'',''b'');
// returns 4,5 [1,2,3,''a'',''b'']
myArray.splice(1,1,"in","the","middle");
// returns 2 [1,"in","the","middle",3,''a'',''b'']

看了文檔才知道,數組是傳遞引用的!

var x = [10, 9, 8];
var y = x;
x[0] = 2;
alert("The value of y's first element is: " + y[0]);

你猜結果是多少呢?
再看這個:

// Declare a reference type (array)
var refType = ["first ", " second", " third"];

// Declare a primitive type (number)
var primType = 10;

// Declare a function taking two arguments, which it will modify
function modifyValues(ref, prim)
{
ref[0] = "changed"; // modify the first argument, an array
prim = prim - 8; // modify the second, a number
}

// Invoke the function
modifyValues(refType, primType);
// Print the value of the reference type
document.writeln("The value of refType is: ", refType+"<
>");
// Print the value of the primitive type
document.writeln("The value of primType is: ", primType);

測試時發現一個問題:

var arr=[];
arr['a']=1;
arr['b']=2;
alert(arr.length);

彈出的數字是0!
看了文檔後知道,這樣的數組叫做聯合數組(Associative Arrays),arr['a']等同於arr.a,arr.length也就等同於arr['length'],而arr.length在我們初始化arr(var arr=[];)的時候自動賦值為0。
有人把這種聯合數組叫做javascript的hash table。嚴格上講,聯合數組和普通數組本身都是對象(廢話,javascript中的一切都是對象- -),意義和用法都是相同的。看下面的例子:

var arr=[];
arr=[1,2,3];
arr.test='test';
alert(arr);
alert(arr[1]);
alert(arr['test']);

var arr={}; arr=[2,3,4]; alert(arr[0]);
var arr={};和var arr=[]都可以寫成var arr=function(){};
從上面的代碼可以看出,下標數組跟聯合數組分別獨立,下標只作用於下標數組,不能訪問聯合數組,相應的,聯合數組不對length屬性產生影響。聯合數組的標籤就是屬性,但是下標數組的下標並不是屬性,arr[0]!=arr.0,訪問arr.0會出錯。

在某些時候,用arr['a']代替arr.a作為方法調用會更有效,因為arr['a']中的'a'可以用變數傳入,比如將方法賦給變數:

var d=document,l=links;

這時候用直接d.l就會出錯,而用d[l]就可以正確執行,alert一下就知道了:)

alert(d.l);//指令碼錯誤
alert(d[l]);//顯示object

既然數組是由lenght屬性的對象,那麼是不是所有具有length屬性的對象都是數組呢?比如String。測試之後發現,firefox是可以把String當作數組處理的,但是ie不行:

var myString = "Hello world";
alert(myString.length);
alert(myString[0]);

數組的對象應該比較獨特,使用者物件不能完全類比:

function myarray(size){
this.length=size;
var x=0;
}
var arr=new myarray(5);
arr[9]=1;
alert(arr);
alert(arr[9]);
alert(arr.length);

本以為Array的length屬性就是普通的對象屬性,結果經過上面的例子發現,arr的length不再是數組length,arr的結構也不是普通數組結構。

定義一個函數/類的方法有好幾種:

function fName(arguments){
//function body
};

var fName = function(arguments){
//function body
}

var fName = new Function("arguments","/*function body*/");

第三種方法比較好玩,看下面的例子:

var arr=new Function("var total=0; for (var i=0; i

用這個方法可以解析ajax返回的JSON,這樣就不用低效的eval了(沒有測試是否比eval快):
假設{b:{c:2}}為返回的json字串:

var arr=new Function("this.a={b:{c:2}};");
var aa =new arr();
alert(aa.a.b.c);

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.