摘要：題目來源數組去重兩個循環思路新建一個新數組用于存放重復的數組元素，通過兩個循環，比較兩個數組元素是否相同。設置或獲取與關聯的端口號碼。設置或獲取的協議部分。很容易看出規律，從第三個數字開始，每個數字等于前兩個數字之和。

  
題目來源：http://www.nowcoder.com/ta/front-end

1.兩個循環：

思路： 新建一個新數組用于存放重復的數組元素，通過兩個循環，比較兩個數組元素是否相同。外循環控制第一個比較元素，內循環控制第二個比較元素，如果有重復元素則將該元素添加到新數組中，最后返回這個新數組。
實現：

Array.prototype.distinct = function() {
    var ret = [];
    for (var i = 0; i < this.length; i++)
    {
        for (var j = i+1; j < this.length;) {   
            if (this[i] === this[j]) {
                ret.push(this.splice(j, 1)[0]);
            } else {
                j++;
            }
        }
    }
     return ret;
};
//for test
alert(["a","b","c","d","b","a","e"].distinct());

2.一次循環

思路：創建一個空對象的和空數組，通過循環，將原數組中的每個元素的值作為鍵值對添加到控對象中，如果這個對象中已經存在該屬性，則說明這個數組元素是重復的，則將他添加到空數組中，最后返回新創建的數組。
實現：

Array.prototype.distinct=function(){
    var arr=[];
    var obj={};
    for(var i=0;i

2.dom 節點查找

描述：查找兩個節點的最近的一個共同父節點，可以包括節點自身

思路：

有兩個dom的節點，dom1,dom2

1.判斷dom1節點是否包含dom2節點；包含則返回dom1,不包含繼續向下運行；

2.判斷dom2節點是否包含dom1節點；包含則返回dom2，不包含繼續向下運行；

3.通過其中一個節點dom1去獲取該節點的父節點,dom_p;

4.通過父節點dom_p去查dom_f的子節點，看dom2是否在父節點dom_f的子節點中;

5.如果dom2在dom_f的子節點中，則dom_f是最近的父節點;

6.如dom2不在dom_f的子節點中，則以domf_f繼續去查dom_f的父節點，重復1，2，3，4步驟最終得出父節點dom_f

實現1：

function commonParentNode(oNode1, oNode2) {
    if(oNode1.contains(oNode2)){
        return oNode1;
    }else if(oNode2.contains(oNode1)){
        return oNode2;
    }else{
        return commonParentNode(oNode1.parentNode,oNode2);
    }
}


實現2：

function commonParentNode(oNode1, oNode2) {
    if(oNode2.contains(oNode1)) return oNode2;
    while(oNode1) {
        if(oNode1.contains(oNode2)){
            return oNode1;
        }
        oNode1 = oNode1.parentNode;
    }
}


3.URL相關

描述：

獲取 url 中的參數

1. 指定參數名稱，返回該參數的值 或者 空字符串

2. 不指定參數名稱，返回全部的參數對象 或者 {}

3. 如果存在多個同名參數，則返回數組

輸入:
getUrlParam("http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe", "key")

輸出:
["1", "2", "3"]

實現：

function getUrlParam(sUrl, sKey) {

    var r = [] , s = null  , i = 0;
    var regexp = new RegExp(/[?&]([w]*)=([^&#]*)/g);

    while((s = regexp.exec(sUrl)) != null){
        if(!r[s[1]])r[s[1]] = s[2];
        else if(typeof(r[s[1]]) == "object"){
            r[s[1]].push(s[2]);
        }else{
            r[s[1]] = [r[s[1]],s[2]];
        }
    }
    if(sKey){
        //有參數，返回參數值或空
        if(r[sKey]){
            return r[sKey];
        }else{
            return "";
        }
    }else{
        return r;
    }
}


擴展：

1.window.location屬性相關：


設置或獲取對象指定的文件名或路徑。
alert(window.location.pathname);

設置或獲取整個 URL 為字符串。
alert(window.location.href);

設置或獲取與 URL 關聯的端口號碼。
alert(window.location.port);

設置或獲取 URL 的協議部分。
alert(window.location.protocol);

設置或獲取 href 屬性中在井號“#”后面的分段。
alert(window.location.hash);

設置或獲取 location 或 URL 的 hostname 和 port 號碼。
alert(window.location.host);

設置或獲取 href 屬性中跟在問號后面的部分。
alert(window.location.search);


2.其他的獲取url參數的方法：

方式一：只能對固定url進行操作，返回全部參數

function GetRequest() {
var url = location.search; //獲取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
  var str = url.substr(1);
  strs = str.split("&");
  for(var i = 0; i < strs.length; i ++) {
     theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
  }
}
 return theRequest;
}


方式二：正則表達式方式，只能對固定url操作，返回指定參數

function GetQueryString(name) {
   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
   var r = window.location.search.substr(1).match(reg);
   if (r!=null) return (r[2]); return null;
}


方式三：對任意的url操作，返回指定數量的參數

function getUrlParames(url,keys){

    var request = {},
        result,
        parameStr = "",
        parames = [],
        keyValue = [],
        index = url.indexOf("?");

    if (index) {
        parameStr = url.substr(index+1);
        parames = parameStr.split("&");
        for(var i = 0, lng = parames.length; i < lng; i ++) {
            keyValue = parames[i].split("=");
            request[keyValue[0]] = keyValue[1];
      }
    }

    if (typeof keys == "string") {
        result = request[keys];
    }else if(!keys){
        return request;
    }
    else{

        result = {};
        for(var j = 0,lng = keys.length;j < lng;j++){
            result[keys[j]] = request[keys[j]];
        }
    }

    return result;
}


4：修改 this 指向

描述：

封裝函數 f，使 f 的 this 指向指定的對象

輸入:bindThis(function(a, b){return this.test + a + b}, {test: 1})(2, 3)

輸出:6
思路：

我們可以觀察到

1.bindThis這個函數接受兩個參數，第一個參數為執行函數，第二個參數是要指定的對象。

2.bindThis函數返回一個匿名函數

實現：

function bindThis(f, oTarget) {
    return function(){
        var parames = Array.prototype.slice.call(arguments);
        return f.apply(oTarget,parames); //注意這里需要返回f的執行結果
    }
}


5.根據包名，在指定空間中創建對象

描述：

根據包名，在指定空間中創建對象 ：

輸入：namespace({a: {test: 1, b: 2}}, "a.b.c.d")

輸出：{a: {test: 1, b: {c: {d: {}}}}}

思路：
namespace函數的第一個參數是原始對象，第二個參數是需要創建的對象的包含關系。

通過輸出結果可以看出，如果第二個參數中的對象在原始對象中存在并且是它的值為一個對象則不做改變，若不為對象，則重新賦值為空對象{}.

實現：

function namespace(oNamespace, sPackage) {

    var properties = sPackage.split(".");
    var parent = oNamespace;

    for (var i = 0, lng = properties.length; i < lng; ++i) {

        var property = properties[i];

        if (Object.prototype.toString.call(parent[property])!== "[object Object]") {
            parent[property] = {};
        }

        parent = parent[property];

    }

    return oNamespace;

}


6.斐波那契數列

描述：

什么是斐波那契數列：1,1,2,3,5....n 。很容易看出規律，從第三個數字開始，每個數字等于前兩個數字之和。

思路：

1.前兩個數字都為 1

2.使用遞歸

實現：

function fibonacci(n) {
    if(n ==1 || n == 2){
        return 1
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}


7.時間格式化輸出

描述：

按所給的時間格式輸出指定的時間

格式說明

對于 2014.09.05 13:14:20

yyyy: 年份，2014

yy: 年份，14

MM: 月份，補滿兩位，09

M: 月份, 9

dd: 日期，補滿兩位，05

d: 日期, 5

HH: 24制小時，補滿兩位，13

H: 24制小時，13

hh: 12制小時，補滿兩位，01

h: 12制小時，1

mm: 分鐘，補滿兩位，14

m: 分鐘，14

ss: 秒，補滿兩位，20

s: 秒，20

w: 星期，為 ["日", "一", "二", "三", "四", "五", "六"] 中的某一個，本 demo 結果為 五

輸入例子:

formatDate(new Date(1409894060000), "yyyy-MM-dd HH:mm:ss 星期w")

輸出例子:

2014-09-05 13:14:20 星期五

實現：

function formatDate(oDate, sFormation) {
    var obj = {
        yyyy:oDate.getFullYear(),
        yy:(""+ oDate.getFullYear()).slice(-2),//非常精辟的方法
        M:oDate.getMonth()+1,
        MM:("0"+ (oDate.getMonth()+1)).slice(-2),
        d:oDate.getDate(),
        dd:("0" + oDate.getDate()).slice(-2),
        H:oDate.getHours(),
        HH:("0" + oDate.getHours()).slice(-2),
        h:oDate.getHours() % 12,
        hh:("0"+oDate.getHours() % 12).slice(-2),
        m:oDate.getMinutes(),
        mm:("0" + oDate.getMinutes()).slice(-2),
        s:oDate.getSeconds(),
        ss:("0" + oDate.getSeconds()).slice(-2),
        w:["日", "一", "二", "三", "四", "五", "六"][oDate.getDay()]
    };
    return sFormation.replace(/([a-z]+)/ig,function($1){return obj[$1]});
}


8.獲取字符串的長度

描述：

如果第二個參數 bUnicode255For1 === true，則所有字符長度為 1

否則如果字符 Unicode 編碼 > 255 則長度為 2

輸入例子:

strLength("hello world, 牛客", false)

輸出例子:
17

實現：

function strLength(s, bUnicode255For1) {

    if(bUnicode255For1) return s.length;

    var length = s.length;
    for(var i = 0, lng = length; i < lng; i++){
        if(s.charCodeAt(i)>255){
            length ++;
        }
    }
    return length;
}


9.郵箱字符串判斷

描述:

判斷輸入是否是正確的郵箱格式

輸入:  郵箱字符串

輸出:  true表示格式正確,false表示錯誤

實現：

function isAvailableEmail(sEmail) {
    var parter = /^[a-z0-9_+.-]+@([a-z0-9-]+.)+[a-z0-9]{2,4}$/;
    return parter.test(sEmail);
}


這題的關鍵是理解這個正則表達式，我們拆開來看看：

1.^[a-z0-9_+.-]+ : 這個表示以一個或多個小寫字母，數字或_,+,.,-這幾個個字符開頭

2.@([a-z0-9-]+.)+ : 這個表示1中的字符連著@，后面再接著一個多個由小寫字母，數字，-字符和點.的組成的字符串。

3.[a-z0-9]{2,4}$： 這個比較簡單，表示以長度為2-4的，由小寫字母和數字任意組合組成的字符串結尾。