【追尋javascript高手之路03】javascript對象大亂鬥

前言

昨天我們學習了下javascript中函數的參數與作用域的東東，現在回過頭來看，其實都是與函數相關的，是以javascript中的函數仍然是王道，我們今天大概會發二篇或者三篇部落格一起來鞏固我們的javascript吧！

PS：各位，阿裡失敗啦，這個事情不必關心啦......我下周再找工作了

object 類型

我們有兩種方式可定義一個對象：

1 var object = {};

2 var object = new Object();

PS：根據對象字面量建立的對象不會調用Object構造函數

javascript中的對象類似于我們的hashtable，是一種鍵值對的形式，他可以以不同次元方式展示，某些時候甚至可以模拟我們的資料庫結構！

對象在記憶體的存儲方式是将具體的存在堆裡面，而在棧裡面儲存一個引用，是以我們經常遇到兩個有意思的東東，

一個是引用指派，後者變化而影響前者，一者就是深度克隆了，我們在此看看這兩個東東：

1 var a = { a: 6 };

2 alert(a.a);//6

3 var b = a;

4 b.a = 66;

5 alert(a.a);//66

這個題，我們昨天就見過了，這裡再提出來說下，于是我們來看看深度克隆呢：

PS：這裡先科普一下克隆吧，可能有些朋友還不知道什麼意思呢

淺度克隆：基本類型為值傳遞，對象仍為引用傳遞。

深度克隆：所有元素或屬性均完全克隆，并于原引用類型完全獨立，即，在後面修改對象的屬性的時候，原對象不會被修改。

這裡還會用到下面這個東東：

hasOwnProperty：

是用來判斷一個對象是否有你給出名稱的屬性或對象。不過需要注意的是，此方法無法檢查該對象的原型鍊中是否具有該屬性，該屬性必須是對象本身的一個成員。

複制代碼

 1 function cloneObj(obj) {

 2     var o = obj.constructor == Array ? [] : {}; //首先處理變量，看看是數組還是對象啦

 3     for (var k in obj) {

 4         //我們知道for in 會将原型的東西也給周遊出來，是以我們這裡需要做一個判斷

 5         if (obj.hasOwnProperty(k)) {

 6             //遞歸方式處理

 7             o[k] = typeof obj[k] === 'objext' ? cloneObj(obj[k]) : obj[k];

 8         }

 9     }

10     return o;

11 }

12 

13 var a = { a: 'aaa', b: 'bbb', c: { d: 'ddd', e: [1, 2, 4]} };

14 var b = cloneObj(a);

15 var s = '';

好了，我們對對象的學習暫時到這裡，下面來看看數組吧。

Array類型

無論什麼語言，數組與字元串的操作都是十分常見的，我們這裡就來理一理我們javascript中的數組。

定義數組

定義數組的方式多種多樣，我一般會用到其中兩種，确切的說，我會用其中一種：

1 var arr = [];

2 var arr = new Array();

3 var arr = [1, 2, 3];

4 var arr = new Array(1, 2, 3);

數組字面量是我們所親睐的做法。

javascript中數組的長度是不定的，數組各個項目的類型也是可以變的，是以用起來非常靈活。

檢測數組

我們經常需要判斷一個對象是不是數組（數組也是對象，其Array實一個構造函數哦），于是我們會用到以下方法：

1 var a = arr.constructor == Array;//true

2 var b = arr instanceof Array; //true

3 var c = Array.isArray(arr); //true，ECMAScript5新增

本來instanceof足夠滿足條件了，但是有這麼一個情況就是我們頁面中存在幾個架構，每個架構都有其window全局環境，是以就可能出現2個Array構造函數。

數組與字元串

數組與字元串經常做轉換，字元串轉換為數組使用split，數組轉換為字元串卻有多種方案：

1 var b = [1, 'fdsffd', '速度多少'];

2 var a = [ {a: 'aaa'}, {b: 'bbb'}, {c: { d: 'ddd', e: [1, 2, 4]} }];

3 var str1 = a.toString(); //"[object Object],[object Object],[object Object]"

4 var str2 = b.toString(); //"1,fdsffd,速度多少"

是以我們要将複雜的轉換為字元串還是要費點功夫，但是有個叫JSON的家夥已經幫我們幹了這些事情了。。。

若是各位對"，"分割不過瘾，可以使用join方法選擇自己喜歡的分割方式。

增加項目

增加數組項目也有多種方法，但是我們一般使用push的方式，這裡可能涉及到一點點删除的功能了。

針對棧的功能，js提供了push與pop兩個東西，一個是加入，一個是彈出最上面的并且删除，其實都是數組尾部操作比較容易了解：

1 var arr = [1, 'fdsffd', '速度多少'];

2 arr.push('新增01', '新增02'); //可以操作多個哦

3 var dd = arr.pop();

4 var s = '';

另外一個東西就是模拟隊列的操作了，模拟隊列的話删除是會在數組的頭部做操作，他隐藏了整個數組的移動：

3 var dd = arr.shift();

其中這個shift我們需要抽出來單獨處理一番。

shift用于取得數組的第一項，并且将之移除，整個數組下标會變化，長度減1

與之對應的是unshift，會在隊列最前面增加數組，而不必關心下标的操作

PS：我在想javascript有沒有封裝一個在數組中間删除項目的方法。。。好像沒有找到

數組排序

數組排序是我們經常遇到的東西，一般使用reverse與sort即可。

reverse比較簡單便是翻轉數組，sort方法比較常用，其中可以用于複雜數組的排序：

 1 var arr = [{ id: 1, name: '葉小钗' }, { id: 2, name: '素還真' }, { id: 3, name: '一頁書'}];

 2 arr.sort(function (v1, v2) {

 3     if (v1.id < v2.id) {

 4         return 1;

 5     } else if (v1.id > v2.id) {

 6         return -1;

 7     } else {

 8         return 0;

10 });

基于目前數組建立新數組

concat可以根據目前數組建立新的數組，說白了就是将兩個數組變成一個：

1 var arr = [{ id: 1, name: '葉小钗' }, { id: 2, name: '素還真' }, { id: 3, name: '一頁書'}];

2 var newArr = arr.concat('11', [3, 4]);

另外一個方法為slice，他可以根據目前數組項目，由裡面抽取幾項組成新的數組：

3 var arr2 = newArr.slice(1, 4);//1 到 4直接位置的數組一共三項

最強的方法splice

剛剛還在說沒有找到删除數組中間項目的方法呢，現在就冒了一個增加/删除 數組中間項目的方法，這個需要好好研究一番。

splice有三種用法：

删除：

可以删除任意數量項目，需要兩個參數：删除的位置；删除的項目

splice(1, 2)會删除第2，3 項，而且數組下标長度會自己變化，真是好東西啊！

插入：

可以向指定位置插入任意項目的項，三個參數：初始位置、0（删除的項目）、插入的項目，這個有點重載的感覺

splice(2, 0, '葉小钗', '素還真');将在第三項後面插入兩項

替換：

按道理說，替換不該用到這個東西，但是我們還是看看吧。

他的功能事實上市先删除在插入，三個參數：起始位置、删除項目、插入項目

splice(2, 1, 'red')；将删除第二項并插入red

ECMAScript 5新增

ECMAScript 5新增了兩個取得位置的方法：indexOf與lastIndexOf，與字元串使用方法類似：

indexOf：由頭開始找尋

lastIndexOf：由尾部開始找尋

還增加了疊代方法與歸并方法，本來數組的方法我就用得不多，這些便暫時略去了，到要用到時候再查下吧。

Date類型

時間操作函數，也是我們javascript經常會用到的對象，要建立一個日期對象很簡單：

var d = new Date(); //Date {Sat Jun 29 2013 11:30:36 GMT+0800}

這裡來一個有意思的初始化方式：

var d = new Date(2013, 5, 29, 11, 32, 10); 

//注意此處第二個參數是月份，這裡的5代表六！！！這個在有些地方容易引起錯誤

關于日期的用法，我這裡不多說，便上一個例子吧：

網頁中實作一個計算當年還剩多少時間的倒數計時程式，要求網頁上實時動态顯示“××年還剩××天××時××分××秒”

 1 function counter() {

 2     var date = new Date();

 3     var year = date.getFullYear();

 4     var date2 = new Date(year, 12, 31, 23, 59, 59);

 5     var time = (date2 - date) / 1000;

 6     var day = Math.floor(time / (24 * 60 * 60))

 7     var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60))

 8     var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60);

 9     var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60);

10     var str = year + "年還剩" + day + "天" + hour + "時" + minute + "分" + second + "秒";

11     document.getElementById("input").value = str;

12 }

13 window.setInterval("counter()", 1000);

PS：這個例子是抄來的，各位看他有什麼問題沒有呢？？？提示：月份

RegExp類型

對于正規表達式的使用其實我一直不太在行，每次都是學了就忘了再學在忘，糾其原因還是因為用得太少啦。

建立正則

我們有兩種方法建立一個正規表達式：

var pattern = /....../;

var pattern = new RegExp('......');

//推薦使用第一種

RegExp執行個體屬性

每個正規表達式執行個體皆具有以下屬性：

global： 表示是否設定了g标志

var pattern = /at/g;//表示比對是以at

ignoreCase：表示是否啟用了i标志

var pattern = /at/i;不區分大小寫

lastIndex：整數，表示開始搜尋下一個比對字元的位置，0開始

multiline：表示是否啟用多行比對

source：正規表達式的字元串表示，按照字面形式而不是傳入構造函數中的字元串模式傳回

關于正規表達式，我後面點單獨寫一篇部落格算了，這裡暫時到這裡了

正則的學習需要多花功夫才行，這塊太水了，這裡搞完了又忘了

結語

上午的學習暫時到這裡，我出去吃個飯，下午我們繼續學習！

本文轉自葉小钗部落格園部落格，原文連結：http://www.cnblogs.com/yexiaochai/p/3162040.html如需轉載請自行聯系原作者