js的一些基礎知識

weixin_34249678發表於2017-12-11
JS
1、有這樣一個URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫一段JS程式提取URL中的各個GET引數(引數名和引數個數不確定)，將其按key-value形式返回到一個json結構中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。

主要考察字串的split()的方法：把一個字串分割成字串陣列。

  • 語法：stringObject.split(separtor,howmany)
    separtor：必需，字串或正規表示式，從該引數指定的地方分割 stringObject。
    howmany：可選。該引數可指定返回的陣列的最大長度。如果設定了該引數，返回的子串不會多於這個引數指定的陣列。如果沒有設定該引數，整個字串都會被分割，不考慮它的長度。
  • 返回值：一個字串陣列。
    該陣列是通過在 separator 指定的邊界處將字串 stringObject 分割成子串建立的。返回的陣列中的字串不包括 separator 自身。
  • 注意：如果把空字串 ("") 用作 separator，那麼 stringObject 中的每個字元之間都會被分割。
9170368-c40b831c4fa16227.png
程式碼.png
9170368-09b119782d96ebf2.png
執行以後.png
2、看下面程式碼，給出輸出結果
for(var i=1;i<=3;i++){
    setTimeout(function(){
        console.log(i)
    },0)
};

答案：4 4 4

原因：setTimeout會在js引擎空閒的時候再執行，JavaScript事件處理器線上程空閒之前不會執行。

如何讓上述程式碼輸出1 2 3？
for(var i=1;i<=3;i++){
    //改成立即執行函式
    setTimeout((function(a){
        console.log(a);
    })(i),0);
};

答案：1 2 3
3、陣列去重

var arr=[1,2,3,1,3,2,3,5,6,5]

  • 第一種方法（for迴圈的方法）
var result=[];
for(var i=0;i<arr.length;i++){
    var flag=true;
    for(var j=i;j<arr.length;j++){
        if(arr[i]==arr[j+1]){
            flag=false;
            break;
        }
    }
    if(flag){
        result.push(arr[i]);
    }
}
console.log(result);
  • 第二種方法（物件的方法）
var arr1=[];
var obj={};
for(var i=0;i<arr.length;i++){
    if(!obj[arr[i]]){
        arr1.push(arr[i]);
        obj[arr[i]]=1;
    }
}
console.log(arr1);
  • 第三種方法（用indexOf()）
var arr2=[];
for(var i=0;i<arr.length;i++){
    if(arr2.indexOf(arr[i])===-1){
        arr2.push(arr[i]);
    }
}
console.log(arr2);
  • 第四種方法（es6的Set資料結構）
let s = new Set(arr);
console.log(s);
4、去除字串兩頭的空格

var str=" Hello World "

  • 方法一（for迴圈）
//去掉頭部空格
var str1;
for(var i=0;i<str.length;i++){
    if(str[i]!=" "){
        str1=str.substring(i);
        break;
    }
}
//去掉尾部空格
var str2;
for(var j=str1.length-1;j>=0;j--){
    if(str1[j]!=" "){
        str2=str1.substring(0,j+1); 
        //提取字串substring(0,j+1)  [)左閉右開；第一個引數是開始位置，第二個引數是結束位置
    }
}
  • 方法二（RegExp正規表示式）
var p=/^\s+|\s+$/g;
var s=str.replace(p,"");
console.log(s);
  • 方法三（jquery）
    需要先引入jquery庫
var str1=$.trim(str);
console.log(str1);
5、倒數計時

距離2018年還有多少天

  • 第一種做法
<body>
    <div id="time"></div>
    <script type="text/javascript">
        var time=document.getElementById("time");
        function clock(){
            var targetDate= new Date(2018,0,1);
            var currentDate= new Date();
            var remainTime=targetDate-currentDate;
            //天數
            remainDay=parseInt(remainTime/1000/60/60/24);
            //小時
            remainHours=parseInt(remainTime/1000/60/60%24);
            //分鐘
            remainMinutes=parseInt(remainTime/1000/60%60);
            //秒
            remainSecond=parseInt(remainTime/1000%60);
            time.innerHTML=remainDay+"天"+remainHours+"小時"+remainMinutes+"分鐘"+remainSecond+"秒"
            setTimeout(clock,1000);
        }
        clock();
    </script>
</body>
  • 第二種做法
<body>
    <div id="box"></div>
    <script type="text/javascript">
        var box=document.getElementById("box");
        var t=null
        function clock(time){
            var targetDate=new Date(time);
            var nowDate=new Date();
            var remainDate= targetDate-nowDate;
            if(remainDate<0){
                clearInterval(t);
            }
            //天數
            var remainDay=parseInt(remainDate/1000/60/60/24);
            //小時
            var remainHours=parseInt(remainDate/1000/60/60%24);
            //分鐘
            var remainMinute=parseInt(remainDate/1000/60%60);
            //秒數
            var remainSecond=parseInt(remainDate/1000%60);
            box.innerHTML=remainDay+"天"+remainHours+"小時"+remainMinute+"分鐘"+remainSecond+"秒"         
        }
        clock("2018/1/1");
        t=setInterval(clock,1000,"2018/1/1");   
        //定時器後面可以傳值 
    </script>
</body>
  • 第三種做法
<body>
<ul>
  <li id="time_d"></li>
  <li id="time_h"></li>
  <li id="time_m"></li>
  <li id="time_s"></li>
</ul>
<script src="lib/js/jquery-1.11.1.js"></script>     
<script type="text/javascript">
    $(function(){ 
        showTime();
    }); 
    function showTime(){
        var time_start=new Date().getTime();//獲取當前時間
        var time_end=new Date("2018/10/1  00:00:00").getTime();//設定過去的時間
        // 計算時間差 
        var time_distance = time_end - time_start; 
        // 天
        var int_day = Math.floor(time_distance/86400000) 
        time_distance -= int_day * 86400000; 
        // 時
        var int_hour = Math.floor(time_distance/3600000) 
        time_distance -= int_hour * 3600000; 
        // 分
        var int_minute = Math.floor(time_distance/60000) 
        time_distance -= int_minute * 60000; 
        // 秒 
        var int_second = Math.floor(time_distance/1000) 
        // 時分秒為單數時、前面加零 
        if(int_day < 10){ 
            int_day = "0" + int_day; 
        } 
        if(int_hour < 10){ 
            int_hour = "0" + int_hour; 
        } 
        if(int_minute < 10){ 
            int_minute = "0" + int_minute; 
        } 
        if(int_second < 10){
            int_second = "0" + int_second; 
        } 
        // 顯示時間 
        $("#time_d").html(int_day); 
        $("#time_h").html(int_hour); 
        $("#time_m").html(int_minute); 
        $("#time_s").html(int_second); 
        // 設定定時器
        setTimeout("showTime()",1000); 
    }
</script>
</body>
6、cookies、sessionStorage與localStorage的區別

（1）cookie在瀏覽器和伺服器間來回傳遞，而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。
（2）儲存大小限制也不同，cookie資料不能超過4k，sessionStorage和localStorage 可以達到5M或更大。
（3）資料有效期不同，sessionStorage：僅在當前瀏覽器視窗關閉前有效，localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，cookie只在設定的cookie過期時間之前一直有效
（4）作用域不同，sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。

相關文章