首頁 > web前端 > js教程 > javascript數組詳解_基礎知識

javascript數組詳解_基礎知識

WBOY
發布: 2016-05-16 16:33:10
原創
1623 人瀏覽過

如果你是個有經驗的開發者,你可能會認為這個問題比較簡單,但是有的時候,我們會覺得這個問題比較有趣。

首先我們來看看數組的定義:“An array is just a list of values which can be accessed by using an integer as the “key”. The list starts at 0 and goes up from there.” ,下面我們用物件來描述陣列的定義:

複製程式碼 程式碼如下:

var arr = ["benjamin", "zuojj"];
//=>
var arr = {
    "0": "benjamin",
    "1": "zuojj"
};

看上面的例子,總感覺缺少了什麼,OK,數組的長度:

複製程式碼 程式碼如下:

 var arr = {
    "0"      : "benjamin",
    "1"      : "zuojj",
    "length" : 2
};

我們知道,在Javascript語言中,數組是一個特殊的對象,我們可以使用存取數組的方式來存取對象的屬性,同時,數組也可以像對像一樣添加屬性。看下例:

複製程式碼 程式碼如下:

var arr = {
    "0"      : "benjamin",
    "1"      : "zuojj",
    "length" : 2
};
//Outputs: "benjamin"
console.log(arr[0]);
//Outputs: 2
console.log(arr.length);

var arr = ["benjamin", "zuojj"];
arr.url = "www.jb51.net";
//Outputs: "www.jb51.net"
console.log(arr.url);
//Outputs: 2
console.log(arr.length);

下面我們來看看陣列的方法,陣列有許多可操作的方法,如indexOf/slice/splice/sort等,我們知道實際上這些方法存在於Array.prototype中。看下面的範例:

複製程式碼 程式碼如下:

var arr = ["benjamin", "zuojj"];
//Outputs: 1
console.log(arr.indexOf("zuojj"));
arr.indexOf = function(str) {
    return "It is customed indexOf!";
}
//Outputs: "It is customed indexOf!"
console.log(arr.indexOf("zuojj"));

事實上,我們可以使用物件重載所有的陣列方法。看下面的push方法的例子:

複製程式碼 程式碼如下:

var arr = {
    length: 0,
    push: function(val) {
        //賦值
        this[this.length] = val;
        //更新陣列長度
        this.length = 1;
        //返回陣列長度
        return this.length;
    }
}
arr.push("zuojj");
arr.push("benjamin");
//Object {0: "zuojj", 1: "benjamin", length: 2, push: function}
console.log(arr);

但是有一個是不能從新實現的,數組的字面量定義:

複製程式碼 代碼如下:
var arr = ["benjamin", "zuojj"]; >
但是我們可以使用建構子來取代:

複製程式碼 程式碼如下:
var arr = new Array("benjamin", "zuojj");

如果不適用字面量定義數組,那麼我們可以重定義數組的定義,以我們自己的方式。

複製程式碼 程式碼如下:
var myArr = new CustomArray("benjamin", "zuobenjamin", "zuobenjamin");

現在你知道javascript中陣列是如何運作的了吧,希望對大家有幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板