[ 題目練習(xí) ] 前端技能練習(xí)1

afishhhhh 發(fā)布于2019-08-21 10:35 / 3146人閱讀

摘要：題目來源數(shù)組去重兩個(gè)循環(huán)思路新建一個(gè)新數(shù)組用于存放重復(fù)的數(shù)組元素，通過兩個(gè)循環(huán)，比較兩個(gè)數(shù)組元素是否相同。設(shè)置或獲取與關(guān)聯(lián)的端口號(hào)碼。設(shè)置或獲取的協(xié)議部分。很容易看出規(guī)律，從第三個(gè)數(shù)字開始，每個(gè)數(shù)字等于前兩個(gè)數(shù)字之和。

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

1.數(shù)組去重

1.兩個(gè)循環(huán)：

思路： 新建一個(gè)新數(shù)組用于存放重復(fù)的數(shù)組元素，通過兩個(gè)循環(huán)，比較兩個(gè)數(shù)組元素是否相同。外循環(huán)控制第一個(gè)比較元素，內(nèi)循環(huán)控制第二個(gè)比較元素，如果有重復(fù)元素則將該元素添加到新數(shù)組中，最后返回這個(gè)新數(shù)組。
實(shí)現(xiàn)：

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.一次循環(huán)

思路：創(chuàng)建一個(gè)空對(duì)象的和空數(shù)組，通過循環(huán)，將原數(shù)組中的每個(gè)元素的值作為鍵值對(duì)添加到控對(duì)象中，如果這個(gè)對(duì)象中已經(jīng)存在該屬性，則說明這個(gè)數(shù)組元素是重復(fù)的，則將他添加到空數(shù)組中，最后返回新創(chuàng)建的數(shù)組。
實(shí)現(xiàn)：

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

2.dom 節(jié)點(diǎn)查找

描述：查找兩個(gè)節(jié)點(diǎn)的最近的一個(gè)共同父節(jié)點(diǎn)，可以包括節(jié)點(diǎn)自身

思路：

有兩個(gè)dom的節(jié)點(diǎn)，dom1,dom2

1.判斷dom1節(jié)點(diǎn)是否包含dom2節(jié)點(diǎn)；包含則返回dom1,不包含繼續(xù)向下運(yùn)行；

2.判斷dom2節(jié)點(diǎn)是否包含dom1節(jié)點(diǎn)；包含則返回dom2，不包含繼續(xù)向下運(yùn)行；

3.通過其中一個(gè)節(jié)點(diǎn)dom1去獲取該節(jié)點(diǎn)的父節(jié)點(diǎn),dom_p;

4.通過父節(jié)點(diǎn)dom_p去查dom_f的子節(jié)點(diǎn)，看dom2是否在父節(jié)點(diǎn)dom_f的子節(jié)點(diǎn)中;

5.如果dom2在dom_f的子節(jié)點(diǎn)中，則dom_f是最近的父節(jié)點(diǎn);

6.如dom2不在dom_f的子節(jié)點(diǎn)中，則以domf_f繼續(xù)去查dom_f的父節(jié)點(diǎn)，重復(fù)1，2，3，4步驟最終得出父節(jié)點(diǎn)dom_f

實(shí)現(xiàn)1：

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


實(shí)現(xiàn)2：

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


3.URL相關(guān)

描述：

獲取 url 中的參數(shù)

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

2. 不指定參數(shù)名稱，返回全部的參數(shù)對(duì)象 或者 {}

3. 如果存在多個(gè)同名參數(shù)，則返回?cái)?shù)組

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

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

實(shí)現(xiàn)：

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){
        //有參數(shù)，返回參數(shù)值或空
        if(r[sKey]){
            return r[sKey];
        }else{
            return "";
        }
    }else{
        return r;
    }
}


擴(kuò)展：

1.window.location屬性相關(guān)：


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

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

設(shè)置或獲取與 URL 關(guān)聯(lián)的端口號(hào)碼。
alert(window.location.port);

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

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

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

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


2.其他的獲取url參數(shù)的方法：

方式一：只能對(duì)固定url進(jìn)行操作，返回全部參數(shù)

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;
}


方式二：正則表達(dá)式方式，只能對(duì)固定url操作，返回指定參數(shù)

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;
}


方式三：對(duì)任意的url操作，返回指定數(shù)量的參數(shù)

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 指向

描述：

封裝函數(shù) f，使 f 的 this 指向指定的對(duì)象

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

輸出:6
思路：

我們可以觀察到

1.bindThis這個(gè)函數(shù)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為執(zhí)行函數(shù)，第二個(gè)參數(shù)是要指定的對(duì)象。

2.bindThis函數(shù)返回一個(gè)匿名函數(shù)

實(shí)現(xiàn)：

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


5.根據(jù)包名，在指定空間中創(chuàng)建對(duì)象

描述：

根據(jù)包名，在指定空間中創(chuàng)建對(duì)象 ：

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

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

思路：
namespace函數(shù)的第一個(gè)參數(shù)是原始對(duì)象，第二個(gè)參數(shù)是需要?jiǎng)?chuàng)建的對(duì)象的包含關(guān)系。

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

實(shí)現(xiàn)：

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.斐波那契數(shù)列

描述：

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

思路：

1.前兩個(gè)數(shù)字都為 1

2.使用遞歸

實(shí)現(xiàn)：

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


7.時(shí)間格式化輸出

描述：

按所給的時(shí)間格式輸出指定的時(shí)間

格式說明

對(duì)于 2014.09.05 13:14:20

yyyy: 年份，2014

yy: 年份，14

MM: 月份，補(bǔ)滿兩位，09

M: 月份, 9

dd: 日期，補(bǔ)滿兩位，05

d: 日期, 5

HH: 24制小時(shí)，補(bǔ)滿兩位，13

H: 24制小時(shí)，13

hh: 12制小時(shí)，補(bǔ)滿兩位，01

h: 12制小時(shí)，1

mm: 分鐘，補(bǔ)滿兩位，14

m: 分鐘，14

ss: 秒，補(bǔ)滿兩位，20

s: 秒，20

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

輸入例子:

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

輸出例子:

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

實(shí)現(xiàn)：

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.獲取字符串的長(zhǎng)度

描述：

如果第二個(gè)參數(shù) bUnicode255For1 === true，則所有字符長(zhǎng)度為 1

否則如果字符 Unicode 編碼 > 255 則長(zhǎng)度為 2

輸入例子:

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

輸出例子:
17

實(shí)現(xiàn)：

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表示錯(cuò)誤

實(shí)現(xiàn)：

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


這題的關(guān)鍵是理解這個(gè)正則表達(dá)式，我們拆開來看看：

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

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

3.[a-z0-9]{2,4}$： 這個(gè)比較簡(jiǎn)單，表示以長(zhǎng)度為2-4的，由小寫字母和數(shù)字任意組合組成的字符串結(jié)尾。

GPU云服務(wù)器云服務(wù)器練習(xí) 練習(xí)代碼 css練習(xí) python練習(xí)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85805.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

afishhhhh

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow如何安裝

閱讀 2859·2023-04-25 17:59
tensorflow對(duì)應(yīng)keras版本

閱讀 692·2023-04-25 15:05
第七章-內(nèi)部類#yyds干貨盤點(diǎn)#

閱讀 677·2021-11-25 09:43
ESLint v8.0.0 發(fā)布、React 成立 Developer Tooling 團(tuán)隊(duì) | 淘

閱讀 3043·2021-10-12 10:13
FastComet：日本主機(jī)/美國等全球10大數(shù)據(jù)中心cPanel共享主機(jī)/外貿(mào)主機(jī)年付低至35刀，

閱讀 3549·2021-09-27 13:59
P5 005本地環(huán)境及開發(fā)工具

閱讀 3593·2021-09-23 11:21
17.WLAN拓?fù)浣榻B_無線分布式系統(tǒng)

閱讀 3894·2021-09-08 09:35
突破css選擇器的局限，實(shí)現(xiàn)一個(gè)css地址選擇器?

閱讀 573·2019-08-29 17:12

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

[ 題目練習(xí) ] 前端技能練習(xí)1

相關(guān)文章

前端開發(fā)-從入門到Offer - 收藏集 - 掘金

前端該如何準(zhǔn)備數(shù)據(jù)結(jié)構(gòu)和算法？

**進(jìn)攻即是最好的防御！19個(gè)練習(xí)黑客技術(shù)的在線網(wǎng)站**

大廠難進(jìn)？(來自雙非非科班應(yīng)屆生的自述信)

**在線編程練習(xí)實(shí)踐網(wǎng)站**

發(fā)表評(píng)論

0條評(píng)論

afishhhhh

男|高級(jí)講師

TA的文章

tensorflow如何安裝

tensorflow對(duì)應(yīng)keras版本

第七章-內(nèi)部類#yyds干貨盤點(diǎn)#

ESLint v8.0.0 發(fā)布、React 成立 Developer Tooling 團(tuán)隊(duì) | 淘

FastComet：日本主機(jī)/美國等全球10大數(shù)據(jù)中心cPanel共享主機(jī)/外貿(mào)主機(jī)年付低至35刀，

P5 005本地環(huán)境及開發(fā)工具

17.WLAN拓?fù)浣榻B_無線分布式系統(tǒng)

突破css選擇器的局限，實(shí)現(xiàn)一個(gè)css地址選擇器?

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

[ 題目練習(xí) ] 前端技能練習(xí)1

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！