百度前端技術學院2015JavaScript基礎部分代碼實現

2. JavaScript數據類型及語言基礎（一）   

2.1 任務描述

• 建立一個JavaScript文件，好比util.js；
• 實踐判斷各類數據類型的方法，並在util.js中實現如下方法： 

  // 判斷arr是否爲一個數組，返回一個bool值
  function isArray(arr) {
      // your implement
  }
   
  // 判斷fn是否爲一個函數，返回一個bool值
  function isFunction(fn) {
      // your implement
  }

解題思路：

     1.說道判斷類型，第一個想到的就是typeof進行判斷，可是typeof的做用實在有限！判斷的結果只有六個：string，number，boolean，function，undfined，object；

並且中間存在bug，console.log(typeof null) = object;並且對於Array，返回的全是obejct。typeof存在很大的侷限性！

     2. 第二種方法，利用instanceof。如var a = []; console.log(a instanceof Array) //ture ;console.log(a instanceof Object) //ture;由於Array是Object的一個子類，因此instanceof也有很大的侷限性！

     3.最後介紹一種官方承認的方法，並且比較有效的方法，Object.prototype.toSting.call(arr) == "[object Array]"；這個方法能夠判斷全部的類型！

代碼以下：

 

// 判斷arr是否爲一個數組，返回一個bool值
function isArray(arr) {
    // your implement
    return Object.prototype.toString.call(arr) === "[object Array]";
}
 
// 判斷fn是否爲一個函數，返回一個bool值
function isFunction(fn) {
    // your implement
    return Object.prototype.toString.call(fn) === "[object function]";
}

 

 

 

• 瞭解值類型和引用類型的區別，瞭解各類對象的讀取、遍歷方式，並在util.js中實現如下方法：

 

// 使用遞歸來實現一個深度克隆，能夠複製一個目標對象，返回一個完整拷貝// 被複制的對象類型會被限制爲數字、字符串、布爾、日期、數組、Object對象。不會包含函數、正則對象等function cloneObject(src) {
    // your implement
}
 
// 測試用例：var srcObj = {
    a: 1,
    b: {
        b1: ["hello", "hi"],
        b2: "JavaScript"
    }
};
var abObj = srcObj;
var tarObj = cloneObject(srcObj);
 
srcObj.a = 2;
srcObj.b.b1[0] = "Hello";
 
console.log(abObj.a);
console.log(abObj.b.b1[0]);
 
console.log(tarObj.a);      // 1console.log(tarObj.b.b1[0]);    // "hello"

 

 

 

解題思路：

     1.首先要知道，js中數據分爲原始類型和引用類型，對於原始類型，可直接進行復制!對於引用類型，引用的是指向原始對象的指針，因此原始對象進行改變的時候，引用類型也會跟着改變！《JavaScript高級程序設計》是這樣解釋的：當從一個變量向另外一個變量複製引用類型的值時，一樣也會講存儲在變量對象中的值複製一份放到爲新變量分配的空間中。不一樣的是，這個值的副本其實是一個指針，而這個指針指向存儲在堆中的一個對象。複製操做結束後，兩個變量實際上將引用同一個對象。所以，改變其中一個變量，就會影響另外一個變量！

     2.引用類型中的date也可以直接引用，因此，首先判斷是否是引用類型，若是不是，則直接複製！若是是引用類型，在進行判斷，若是是date，則直接複製，若是不是數組，在進行判斷，判斷是爲object仍是array；

     3.在複製的時候，還要考慮是繼承的屬性仍是自身的屬性！

     ps：函數對象蘇然是引用類型，可是函數的克隆經過淺克隆就行！     

代碼以下：

// 使用遞歸來實現一個深度克隆，能夠複製一個目標對象，返回一個完整拷貝
// 被複制的對象類型會被限制爲數字、字符串、布爾、日期、數組、Object對象。不會包含函數、正則對象等
function cloneObject(src) {
    // your implement
    var result;//定義克隆後的結果
    if (typeof(src) == "object" ) {//判斷是不是引用類型
        if (Object.prototype.toString.call(src) === "[object Data]") {//若是是data類型，直接克隆
            result = src;
        }
        else {
            resule = (Object.prototype.toString.call(src) === "[object Array]")?[]:{};//先判斷對象的類型
            if (src.hasOwnProperty(i)) {//判斷是否爲對象自身的屬性
                if (typeof src[i] == "object") {//若是爲對象，遍歷複製
                    result[i] = cloneObject(src[i]);
                }
                else {//若是爲數組，一對一克隆！
                    result[i] = src[i];
                }
            }
        }
    }
    else {//當爲原始類型時，直接複製！
        result = src;
    }
}

 

• 學習數組、字符串、數字等相關方法，在util.js中實現如下函數

// 對數組進行去重操做，只考慮數組中元素爲數字或字符串，返回一個去重後的數組function uniqArray(arr) {
    // your implement
}

// 使用示例var a = [1, 3, 5, 7, 5, 3];
var b = uniqArray(a);
console.log(b); // [1, 3, 5, 7]
 
//去除開頭和結尾的空白
function trim(arr) {
    // your implement
}

// 使用示例var str = '  hi!  ';
str = trim(str);
console.log(str); // 'hi!'

// 實現一個遍歷數組的方法，針對數組中每個元素執行fn函數，並將數組索引和元素做爲參數傳遞function each(arr, fn) {
    // your implement
}

// 其中fn函數能夠接受兩個參數：item和index

// 使用示例var arr = ['java', 'c', 'php', 'html'];
function output(item) {
    console.log(item)
}
each(arr, output);  // java, c, php, html

// 使用示例var arr = ['java', 'c', 'php', 'html'];
function output(item, index) {
    console.log(index + ': ' + item)
}
each(arr, output);  // 0:java, 1:c, 2:php, 3:html

// 獲取一個對象裏面第一層元素的數量，返回一個整數function getObjectLength(obj) {}

// 使用示例var obj = {
    a: 1,
    b: 2,
    c: {
        c1: 3,
        c2: 4
    }
};
console.log(getObjectLength(obj)); // 3

 

 

解題思路：

     1.去重，直接遍歷數組，利用數組的indexOf方法，判斷新的數組是否存在數組中的每個位置的值，若是不存在則添加進數組，反正拋棄。

     2.去除開頭和結尾的空白，直接利用正則表達式，而後replace將匹配到的開頭和結尾的空白字符給替換！

     3.對於每一個元素都執行一次，見代碼！

     4.首先定義一個count，用來存放keys出現的次數，由於keys的值都在對象的第一層！

代碼以下：

// 對數組進行去重操做，只考慮數組中元素爲數字或字符串，返回一個去重後的數組
function uniqArray(arr) {
    // your implement
    var result = [];//定義一個新的數組，用於存放沒有重複的元素
    for (var i = 0; i < arr.length; i++) {
        if(result.indexOf(arr[i]) = -1) {
            result.push(arr[i]);
        }
    }
    return result;
}
 
// 不少同窗確定對於上面的代碼看不下去，接下來，咱們真正實現一個trim
// 對字符串頭尾進行空格字符的去除、包括全角半角空格、Tab等，返回一個字符串
// 嘗試使用一行簡潔的正則表達式完成該題目
function trim(str) {
    // your implement
    var result = "";
    result = str.replace(/^\s+|\s+$/g,"");
    return result;
}
 
// 實現一個遍歷數組的方法，針對數組中每個元素執行fn函數，並將數組索引和元素做爲參數傳遞
function each(arr, fn) {
    // your implement
    if(!isArray(arr)){
        return false;
    }
    if(!isFunction(fn)){
        return false;
    }
    for (var i = 0; i < arr.length; i++) {
        fn(arr[i],i);
    }
}
 
 
// 獲取一個對象裏面第一層元素的數量，返回一個整數
function getObjectLength(obj) {
    var count = 0;
        for (var keys in obj) {
            count++;
        }
    return count;
}

 

 

 

• 學習正則表達式，在util.js完成如下代碼

// 判斷是否爲郵箱地址
function isEmail(emailStr) {
    // your implement
}

// 判斷是否爲手機號
function isMobilePhone(phone) {
    // your implement
}

 

 

參考資料：  

     正則表達式30分鐘入門教程 http://deerchao.net/tutorials/regex/regex.htm

代碼以下：

 

//判斷是不是郵箱地址
function isEmail(str){
     var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
     return reg.test(str);
}
// 判斷是否爲手機號
function isMobilePhone(phone) {
    // your implement
      var reg = /^1[3-8]\d{9}/
      return reg.text(phone);
}