聽飛狐聊JavaScript設計模式系列01

前言

你們好，小弟飛狐，愛學習，愛裝逼，樂於分享，初來乍到，請多多關照(～ o ～)~zZ。出道幾年，對JavaScript情有獨鍾，聊技術以前，囉嗦囉嗦，雖然我們都系程序猿，可是必定要多鍛鍊，跑跑步，爬登山蝦米的，身體系革命的本錢。

另外，我的以爲JavaScript是很文藝的一門語言，文藝範兒會更適合這門語言（我的觀點，不喜勿噴），JS基礎學習資料在網上很是多，因此咱們這裏從JS面向對象開始（注：須要一（zha）定（shi）的JS基礎），本系列做爲JavaScript擴展讀物（有講錯的地方，歡迎你們指出），又扯了這麼多，這回真的來進入正題了：

JS數據類型介紹

• ECMAScript的數據類型值分爲基本類型值和引用類型值。

• 用typeof操做符來判斷類型，固然如何準確判斷類型，後面還會聊到。

• Function特別注意一下，函數在ECMAScript中是對象，不是一種數據類型，這但是JS世界的一等公民。

• undefined和null，null和object的關係又很曖昧，後面細說，要否則會暈菜。

• 基本數據類型:Undefined，Null，Boolean，Number，String，這五種基本數據類型是按值訪問的。

var o;            // undefined表示變量聲明瞭，卻沒有賦值
    var o=null;        // null表示空值
    var o="字符串";    // string字符串
    var o=false;    // boolean布爾值包括true，false
    var o=1;        // number，能夠是整數和小數
    var o=NaN        // 非數字

JavaScript是弱類型語言，存在丟失精度問題，本系列以面向對象爲主，因此不討論此問題；

JS引用類型介紹

• 包括：Object類型，Array類型，Date類型，RegExp類型，

• Function類型，須要特別注意一下，函數在ECMAScript中是對象，不是一種數據類型，每一個函數都是Function類型的實例，函數名是指向函數對象的指針，這但是JS世界的一等公民

• 基本包裝類型，ECMAScript提供了三個特殊的引用類型，主要爲了便於操做基本類型的值，包括：

  1. Boolean

  2. Number

  3. String

• 單體內置對象，包括：

  1. Global對象，這是個無形的對象，

  2. Math對象，這是用來作各類數學運算的內置對象

• 引用類型的值是保存在內存中的對象，也就是說，在操做對象時，其實是在操做對象的引用，而不是實際的對象

var o=[1,2,3];        // Array
    var o=new Date();    // Date
    var o={};            // Object

講類型就是基本的一個過渡介紹，Object和Function後面還會細講，其他的類型能夠根據上面列出的，具體的去參考書籍（推薦JavaScript高級程序設計）或其餘資料，正題開始，先來個預熱篇，吼吼~~

ECMAScript5數組的新特性

做爲預熱篇，咱們先來聊聊，ECMAScript5中數組的新特性，我的作了以下區分：

• 位置方法：indexOf，lastIndexOf

• 迭代方法：every，filter，forEach，some，map

• 縮小方法：reduce，reduceRight

(注：迭代方法回調支持3個參數，第1個是遍歷的數組內容；第2個是對應的數組索引，第3個是數組自己)

來吧，每一個方法都過一遍，敲敲代碼：

indexOf

包含兩個參數，第一個是要檢索的字符串值，第二個是可選參數，表示開始檢索的位置，注：必須是合法值(0,length-1);返回值是該字符串首次出現的位置，找不到則返回-1；

var arr = ["衛士",3,5,"皮帶",8,6,"包裹"];
    var i = arr.indexOf("皮帶");
    alert(i);        // 返回3
    
    var arr = ["衛士",3,5,"皮帶",8,6,"包裹"];
    var i = arr.indexOf("皮帶",6);
    alert(i);        // 返回-1

由上面的例子，咱們能夠掌握indexOf的基本用法，可若是一個數組中重複存在相同的值，怎麼樣把重複項的索引一一找出來嘞，讓帥狐show給你看，以下:

var arr = ["衛士",3,5,"包裹",8,6,"皮帶","包裹","包裹"];
    var oArr = [];    // 定義一個存放索引的數組
    var i = arr.indexOf("包裹");    // 索引位置
    
    while(i>-1){    // 用while循環，直到找不到索引爲止
        oArr.push(i);
        i = arr.indexOf("包裹",i+1);
    }
    alert(oArr);

怎麼樣，帥吧，next...

lastIndexOf

跟indexOf，基本同樣，不一樣的是，這個方法是從後往前檢索；

var arr = ["衛士",3,5,"包裹",8,6,"皮帶","包裹","包裹"];
    var oArr = [];    // 定義一個存放索引的數組
    var i = arr.lastIndexOf("包裹");
    alert(i);        // 返回8

every

對數組的每一個元素都進行函數運行，若是每一個都是true，則返回true，不然，若是有一個是false的話，嘿嘿~~，那就返回false咯

var arr = ["衛士",3,5,"包裹",8,6,"皮帶","包裹","包裹"];
    var res = arr.every(function(item){
        return typeof item=="string";    // 這裏複習下typeof操做符
    })    
    alert(res);    // false，把數組中的數字項所有去掉，則返回true

filter

對數組的每一個元素都進行函數運行，返回過濾後的選項

var arr = ["衛士",23,"包裹",565,"皮帶","包裹","包裹"];
    var res = arr.filter(function(item){
        return typeof item=="string";    // 這裏複習下typeof操做符
    })    
    alert(res);    // 衛士, 包裹, 皮帶, 包裹, 包裹

forEach

對數組的每一個元素都進行函數運行，注：該方法沒有返回值

var arr = {                            // 定義一個對象字面量
        num: [[1,3,5],[2,3,8],[9,6,1]],    // 一個二維數組
        numR:function(o)                // 處理函數                
        {
            o.reverse();        // 數組反向
        }
    };

    arr.num.forEach(function(item){
        arr.numR(item);
    })

這個例子，剛接觸面向對象的童鞋會以爲略難，多敲代碼多理解，無他，惟手熟爾~

some

對數組的每一個元素都進行函數運行，對任一項返回爲true，則返回爲true，跟上面的every類似，好像every是處女座樣(^__^)

var arr = [1,3,5];
    var res = arr.some(function(item){
        return item>6;
    })
    alert(res);    // 返回false

map

對數組的每一個元素都進行函數運行，返回每次函數調用的結果組成的數組(略抽象),來吧，看例子

var arr = [1,3,5];
    var res = arr.map(function(item){
        return item+item;
    })
    alert(res);    // 返回2,6,10

reduce和reduceRight

這倆一塊兒說，兄弟倆嘛，這倆方法都會選代數組全部項，而後構建一個最終返回的值。reduce()方法從數組的第一項開始，逐個遍歷到最後，reduceRight則相反

var arr = [1,3,5];
    var res = arr.reduce(function(prev,cur,index,array){
        return prev+cur;
    })
    alert(res);    // 返回9
    
    var arr = [[1,3,5],[9,8,6,2,1],[6,2,1]];    
    function s(prev,cur){
        return prev.concat(cur);    // 合併二維數組
    }
    function m(prev,cur){
        return prev>cur?prev:cur;    // 取最大值
    }
    var res = arr.reduce(s).reduceRight(m);        // 鏈式調用
    alert(res);    // 返回9

話外音

1. 既然咱聊的是面向對象，設計模式，仍是再囉嗦一下，在這就不要去爭論JavaScript是基於對象仍是面向對象，不論是軒轅劍仍是七星劍，能靈活運用纔是關鍵(這麼說會不會有點賤-_-)

2. 面向對象的基礎紮實了，學框架(AngularJS,React)，或者學其餘腳本語言(Php)等，上手都會很快

3. 再則程序世界學東西都是鍛鍊思惟，掌握之前未掌握的，變成本身的一套纔是精髓

4. 另外重申一下，本系列是JS進階，初學者慎讀，尤爲設計模式的一些知識會跟java進行比較，模擬等

5. 預熱篇介紹的數組新特性在後面的設計模式實戰中會用到，其餘基礎知識，如數組，閉包等請參閱書籍或其餘資料

這一回主要介紹了下JavaScript的數據類型，聊了ES5中數組的9個新特性，下一回聊JavaScript的Object類型。

---

注：此係飛狐原創，轉載請註明出處