第一百零三節，JavaScript對象和數組

時間 2019-11-12

標籤第一百零三 javascript 對象數組欄目 JavaScript 简体版

原文原文鏈接

JavaScript對象和數組前端

學習要點：算法

1.Object類型編程

2.Array類型數組

3.對象中的方法瀏覽器

什麼是對象，其實就是一種類型，即引用類型。而對象的值就是引用類型的實例。在ECMAScript中引用類型是一種數據結構，用於將數據和功能組織在一塊兒。它也常被稱作爲類，但ECMAScript中卻沒有這種東西。雖然ECMAScript是一門面向對象的語言，卻不具有傳統面嚮對象語言所支持的類和接口等基本結構。數據結構

一．Object對象類型函數

Object類型對象，
學習

到目前爲止，咱們使用的引用類型最多的可能就是Object類型了。雖然Object的實例不具有多少功能，但對於在應用程序中的存儲和傳輸數據而言，它確實是很是理想的選擇。spa

建立Object類型有兩種。一種是使用new運算符，一種是字面量表示法。code

1.使用new運算符建立Object

Object類型對象裏面能夠是字段（鍵值對）也就是鍵值對，也能夠是方法(函數)

var box = new Object();                        //new方式
box.name = '李炎恢';                        //建立屬性字段
box.age = 28;                                //建立屬性字段

2.new關鍵字能夠省略

var box = Object();                            //省略了new關鍵字

3.使用字面量方式建立Object

var box = {                                //字面量方式
    name : '李炎恢',                        //建立屬性字段
    age : 28
};

4.屬性字段也可使用字符串

var box = {
    'name' : '李炎恢',                        //也能夠用字符串形式
    'age' : 28
};

5.使用字面量及傳統賦值方式

var box = {};                                //字面量方式聲明空的對象
box.name = '李炎恢';                        //點符號給屬性賦值
box.age = 28;

6.兩種屬性輸出方式

var box = {};                                //字面量方式聲明空的對象
box.name = '李炎恢';                        //點符號給屬性賦值
box.age = 28;

alert(box.age);                                //點表示法輸出
alert(box['age']);                            //中括號表示法輸出，注意引號

PS：在使用字面量聲明Object對象時，不會調用Object()構造函數(Firefox火狐瀏覽器除外)。

7.給對象建立方法，也就是函數

建立方法，方法名稱，後面跟着定義函數，在js中定義函數沒有名稱的叫作匿名函數

var box = {                                
    run : function () {                        //對象中的方法
        return '運行';
    }
}
alert(box.run());                            //調用對象中的方法

8.使用delete刪除對象屬性

var box = {};                                //字面量方式聲明空的對象
box.name = '李炎恢';                        //點符號給屬性賦值
box.age = 28;

alert(box.name);                             //打印對象裏的一個字段
delete box.name;                             //刪除對象裏的一個字段
alert(box.name);                             //打印刪除後的字段

在實際開發過程當中，通常咱們更加喜歡字面量的聲明方式。由於它清晰，語法代碼少，並且還給人一種封裝的感受。字面量也是向函數傳遞大量可選參數的首選方式。

向函數裏傳入一個對象：

function box(obj) {                            //參數是一個對象
    if (obj.name != undefined) alert(obj.name);    //判斷屬性是否存在        
    if (obj.age != undefined) alert(obj.age);        
}

box({                                    //調用函數傳遞一個對象
    name : '李炎恢',
    age : 28
});

二．Array數組類型

注意：數組也屬於Object類型

除了Object類型以外，Array類型是ECMAScript最經常使用的類型。並且ECMAScript中的Array類型和其餘語言中的數組有着很大的區別。雖然數組都是有序排列，但ECMAScript中的數組每一個元素能夠保存任何類型。ECMAScript中數組的大小也是能夠調整的。

建立Array類型有兩種方式：第一種是new運算符，第二種是字面量

1.使用new關鍵字建立數組

var box = new Array();                        //建立了一個數組
var box = new Array(10);                    //建立一個包含10個空元素的數組
var box = new Array('李炎恢',28,'教師','鹽城');    //建立一個數組並分配好了元素

2.以上三種方法，能夠省略new關鍵字。

var box = Array();                            //省略了new關鍵字

3使用字面量方式建立數組

var box = [];                                //建立一個空的數組
var box = ['李炎恢',28,'教師','鹽城'];            //建立包含元素的數組
var box = [1,2,];                            //禁止這麼作，IE會識別3個元素，也就是多餘的逗號ie會識別成一個元素
var box = [,,,,,];                            //一樣，IE的會有識別問題

PS：和Object同樣，字面量的寫法不會調用Array()構造函數。(Firefox火狐瀏覽器除外)。

4.使用索引下標來讀取、修改、增長數組的值

var abcd = ['林貴秀','李彥宏','周鴻禕'];
alert(abcd[0]);         //索引數組下標來獲取元素

abcd[0] = '林秀民';     //索引數組下標來修改元素
alert(abcd[0]);

abcd[3] = '馬雲';       //利用數組下標類增長一個元素
alert(abcd[3]);

5.使用length屬性獲取數組元素量

var abcd = ['林貴秀','李彥宏','周鴻禕'];
alert(abcd.length);         //獲取數組元素的個數

abcd.length = 10;           //強制數組元素的個數
alert(abcd.length);

abcd[abcd.length] = '馬雲';  //利用length屬性增長數組元素

6.建立一個稍微複雜一點的數組

var box = [    
                    {                        //第一個元素是一個對象
                        name : '李炎恢',
                        age : 28,
                        run : function () {
                            return 'run了';
                        }
                    },
                    ['馬雲','李彥宏',new Object()],//第二個元素是數組
                    '江蘇',                     //第三個元素是字符串
                    25+25,                     //第四個元素是數值
                    new Array(1,2,3)             //第五個元素是數組
];
alert(box);

PS：數組最多可包含4294967295個元素，超出即會發生異常。

三．對象和數組中的方法

格式化轉換方法

對象或數組都具備toLocaleString()、toString()和valueOf()方法。其中toString()和valueOf()不管重寫了誰，都會返回相同的值。數組會將每一個值進行字符串形式的拼接，以逗號隔開。

toString()內置方法，數組會隱式調用了這個方法，數組會將每一個值進行字符串形式的拼接，以逗號隔開

valueOf()內置方法，數組會將每一個值進行字符串形式的拼接，以逗號隔開

toLocaleString()內置方法，本地化格式字符串，在時間對象上更能體現

var adc = ['林貴秀','林秀民','馬雲']; //字面量數組
alert(adc);     //隱形調用了toString()方法

alert(adc.toString()); //主動調用toString()方法，和上面是一回事

alert(adc.valueOf());  //主動調用valueOf()方法，功能和toString()同樣

alert(adc.toLocaleString()); //返回值和上面兩種一致,本地格式化數據，toLocaleString()在時間對象上更明顯

默認狀況下，數組字符串都會以逗號隔開。若是使用join()方法，則可使用不一樣的分隔符來構建這個字符串。

join()方法，格式化分隔符，有參裏面寫字符串類型的分割符號

var adc = ['林貴秀','林秀民','馬雲']; //字面量數組
alert(adc.join("|"));     //join()方法,格式化分隔符

棧方法

ECMAScript數組提供了一種讓數組的行爲相似於其餘數據結構的方法。也就是說，可讓數組像棧同樣，能夠限制插入和刪除項的數據結構。棧是一種數據結構(後進先出)，也就是說最新添加的元素最先被移除。而棧中元素的插入(或叫推入)和移除(或叫彈出)，只發生在一個位置——棧的頂部。ECMAScript爲數組專門提供了push()和pop()方法。

push()方法能夠接收任意數量的參數，把它們逐個添加到數組的末尾，並返回修改後數組的長度。【有參裏面寫要添加的元素】

var box = ['李炎恢', 28, '計算機編程'];            //字面量聲明數組
alert(box.push('鹽城'));                        //數組末尾添加一個元素，而且返回長度
alert(box);                                        //查看數組

pop()方法則從數組末尾移除最後一個元素，減小數組的length值，而後返回移除的元素。無參

var box = ['李炎恢', 28, '計算機編程'];            //字面量聲明數組
alert(box.pop());                                //移除數組末尾元素，並返回移除的元素
alert(box);                                //查看元素

隊列方法

棧方法是後進先出，而列隊方法就是先進先出。列隊在數組的末端添加元素，從數組的前端移除元素。經過push()向數組末端添加一個元素，而後經過shift()方法從數組前端移除一個元素。

push()向數組末端添加一個元素，【有參要添加的元素】

var box = ['李炎恢', 28, '計算機編程'];            //字面量聲明
alert(box.push('鹽城'));                        //數組末尾添加一個元素，而且返回長度
alert(box);                                //查看數組

shift()方法從數組前端移除一個元素。【無參】

var box = ['李炎恢', 28, '計算機編程'];            //字面量聲明
alert(box.shift());                            //移除數組開頭元素，並返回移除的元素
alert(box);                                //查看數組

ECMAScript還爲數組提供了一個unshift()方法，它和shift()方法的功能徹底相反。unshift()方法爲數組的前端添加一個元素。

unshift()方法爲數組的前端添加一個元素。【有參要添加的元素】

var box = ['李炎恢', 28, '計算機編程'];            //字面量聲明
alert(box.unshift("林貴秀"));                    //數組開頭添加1個元素
alert(box);                                //查看數組

PS：IE瀏覽器對unshift()方法老是返回undefined而不是數組的新長度。

重排序方法

數組中已經存在兩個能夠直接用來排序的方法：reverse()和sort()。

reverse() 逆向排序，無參

var box = [1,2,3,4,5];                        //數組
alert(box.reverse());                        //逆向排序方法，返回排序後的數組
alert(box);                                //源數組也被逆向排序了，說明是引用

sort() 從小到大排序，【有參可選函數】

var box = [4,1,7,3,9,2];                        //數組
alert(box.sort());                            //從小到大排序，返回排序後的數組
alert(box);                                //源數組也被從小到大排序了

sort方法的默認排序在數字排序上有些問題

var box = [0,1,5,10,15];                        //驗證數字字符串，和數字的區別
alert(box.sort());                               //查看數組，輸出0，1，10,15,5

sort方法的默認排序在數字排序上有些問題，由於數字排序和數字字符串排序的算法是同樣的。咱們必須修改這一特徵，修改的方式，就是給sort(參數)方法傳遞一個函數參數。這點能夠參考手冊說明。

修改數字排序上有問題這一特徵

function compare(value1, value2) {            //數字排序的函數參數
    if (value1 < value2) {                    //小於，返回負數
        return -1;
    } else if (value1 > value2) {                //大於，返回正數
        return 1;
    } else {                                //其餘，返回0
        return 0;
    }
}
var box = [0,1,5,10,15];                        //驗證數字字符串，和數字的區別
alert(box.sort(compare));                //傳參

PS：若是要反向操做，即從大到小排序，正負顛倒便可。固然，若是要逆序用reverse()更加方便。

操做方法

ECMAScript爲操做已經包含在數組中的元素提供了不少方法。concat()方法能夠基於當前數組建立一個新數組。slice()方法能夠基於當前數組獲取指定區域元素並建立一個新數組。splice()主要用途是向數組的中部插入元素。

concat()方法能夠基於當前數組建立一個新數組，【有參可選】

var box = ['李炎恢', 28, '鹽城'];                //當前數組
var box2 = box.concat('計算機編程');            //建立新數組，並添加新元素
alert(box2);                                //輸出新數組
alert(box);                                //當前數組沒有任何變化

slice()方法能夠基於當前數組獲取指定區域元素並建立一個新數組【有參下標範圍等】

var box = ['李炎恢', 28, '鹽城'];                //當前數組
var box2 = box.slice(1,3);                        //box.slice(1,3)，2-4之間的元素
alert(box2);                                //28，鹽城
alert(box);                                //當前數組

splice()中的刪除功能：

var box = ['李炎恢', 28, '鹽城'];                //當前數組
var box2 = box.splice(0,2);                    //截取前兩個元素
alert(box2);                                //返回截取的元素
alert(box);                                //當前數組被截取的元素被刪除

splice()中的插入功能：

var box = ['李炎恢', 28, '鹽城'];                //當前數組
var box2 = box.splice(1,0,'計算機編程','江蘇');    //沒有截取，但插入了兩條
alert(box2);                                //在第2個位置插入兩條
alert(box);                                //輸出

splice()中的替換功能：

var box = ['李炎恢', 28, '鹽城'];                //當前數組
var box2 = box.splice(1,1,100);                //截取了第2條，替換成100
alert(box2);                                //輸出截取的28
alert(box);                                //輸出數組