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); //輸出數組