【追尋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 = '';

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

1 var arr = [1, 'fdsffd', '速度多少'];
2 arr.push('新增01', '新增02'); //能夠操做多個哦
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;
 9     }
10 });

基於當前數組建立新數組

concat能夠根據當前數組建立新的數組，說白了就是將兩個數組變成一個：

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

另一個方法爲slice，他能夠根據當前數組項目，由裏面抽取幾項組成新的數組：

1 var arr = [{ id: 1, name: '葉小釵' }, { id: 2, name: '素還真' }, { id: 3, name: '一頁書'}];
2 var newArr = arr.concat('11', [3, 4]);
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：正則表達式的字符串表示，按照字面形式而不是傳入構造函數中的字符串模式返回

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

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

結語

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