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

前言

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

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

object 類型

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

var object = {};
var object = new Object();

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

javascript中的對象類似於我們的hashtable，是一種鍵值對的形式，他可以以不同維度方式展示，某些時候甚至可以模擬我們的數據庫結構！

對象在內存的存儲方式是將具體的存在堆里面，而在棧里面保存一個引用，所以我們經常遇到兩個有意思的東東，

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

var a = { a: 6 };
alert(a.a);//6
var b = a;
b.a = 66;
alert(a.a);//66

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

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

淺度克隆：基本類型為值傳遞，對象仍為引用傳遞。
深度克隆：所有元素或屬性均完全克隆，並於原引用類型完全獨立，即，在后面修改對象的屬性的時候，原對象不會被修改。

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

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

function cloneObj(obj) {
    var o = obj.constructor == Array ? [] : {}; //首先處理變量，看看是數組還是對象啦
    for (var k in obj) {
        //我們知道for in 會將原型的東西也給遍歷出來，所以我們這里需要做一個判斷
        if (obj.hasOwnProperty(k)) {
            //遞歸方式處理
            o[k] = typeof obj[k] === 'objext' ? cloneObj(obj[k]) : obj[k];
        }
    }
    return o;
}

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

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

Array類型

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

定義數組

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

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

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

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

檢測數組

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

var a = arr.constructor == Array;//true
var b = arr instanceof Array; //true
var c = Array.isArray(arr); //true，ECMAScript5新增

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

數組與字符串

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

var b = [1, 'fdsffd', '速度多少'];
var a = [ {a: 'aaa'}, {b: 'bbb'}, {c: { d: 'ddd', e: [1, 2, 4]} }];
var str1 = a.toString(); //"[object Object],[object Object],[object Object]"
var str2 = b.toString(); //"1,fdsffd,速度多少"

所以我們要將復雜的轉換為字符串還是要費點功夫，但是有個叫JSON的家伙已經幫我們干了這些事情了。。。

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

增加項目

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

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

var arr = [1, 'fdsffd', '速度多少'];
arr.push('新增01', '新增02'); //可以操作多個哦
var dd = arr.pop();
var s = '';

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

var arr = [1, 'fdsffd', '速度多少'];
arr.push('新增01', '新增02'); //可以操作多個哦
var dd = arr.shift();

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

shift用於取得數組的第一項，並且將之移除，整個數組下標會變化，長度減1
與之對應的是unshift，會在隊列最前面增加數組，而不必關心下標的操作

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

數組排序

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

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

var arr = [{ id: 1, name: '葉小釵' }, { id: 2, name: '素還真' }, { id: 3, name: '一頁書'}];
arr.sort(function (v1, v2) {
    if (v1.id < v2.id) {
        return 1;
    } else if (v1.id > v2.id) {
        return -1;
    } else {
        return 0;
    }
});

基於當前數組創建新數組

concat可以根據當前數組創建新的數組，說白了就是將兩個數組變成一個：

var arr = [{ id: 1, name: '葉小釵' }, { id: 2, name: '素還真' }, { id: 3, name: '一頁書'}];
var newArr = arr.concat('11', [3, 4]);

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

var arr = [{ id: 1, name: '葉小釵' }, { id: 2, name: '素還真' }, { id: 3, name: '一頁書'}];
var newArr = arr.concat('11', [3, 4]);
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代表六！！！這個在有些地方容易引起錯誤

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

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

function counter() {
    var date = new Date();
    var year = date.getFullYear();
    var date2 = new Date(year, 12, 31, 23, 59, 59);
    var time = (date2 - date) / 1000;
    var day = Math.floor(time / (24 * 60 * 60))
    var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60))
    var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60);
    var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60);
    var str = year + "年還剩" + day + "天" + hour + "時" + minute + "分" + second + "秒";
    document.getElementById("input").value = str;
}
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：正則表達式的字符串表示，按照字面形式而不是傳入構造函數中的字符串模式返回

關於正則表達式，我后面點單獨寫一篇博客算了，這里暫時到這里了

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

結語

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