原生JS實(shí)用技巧手記（六）

2018-06-17 19:26 更新

本系列文章旨在記錄一些實(shí)用的javascript技巧，既可以作為一個(gè)知識(shí)的積累，又可以作為閑暇時(shí)打發(fā)時(shí)間寫寫代碼的記錄。同時(shí)也方便日后翻閱~

1. 封裝cookie組件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var Cookie = {
    // 讀取
    read : function(name){
        var cookieStr = "; "+document.cookie+"; ";
        var index = cookieStr.indexOf("; "+name+"=");
        if (index!=-1){
            var s = cookieStr.substring(index+name.length+3,cookieStr.length);
            return unescape(s.substring(0, s.indexOf("; ")));
        }else{
            return null;
        }
    },
    // 設(shè)置
    set : function(name,value,expires){
        var expDays = expires*24*60*60*1000;
        var expDate = new Date();
        expDate.setTime(expDate.getTime()+expDays);
        var expString = expires ? "expires="+expDate.toGMTString() : "";
        var pathString = ";path=/";
        document.cookie = name + "=" + escape(value) + expString + pathString;
    },
    // 刪除
    del : function(name){
        var exp = new Date(new Date().getTime()-1);
        var s=this.read(name);
        if(s!=null) {
            document.cookie= name + "="+s+"expires="+exp.toGMTString()+";path=/"
        }
    }
};
// demo:
Cookie.set("xuanfengge", "www.xuanfengge.com", 7);
alert(Cookie.read("xuanfengge"));
Cookie.del("xuanfengge");

2. 字符串比較

1
2
3
4
5
var aString = "Hello!";
var bString = new String("Hello!");
if( aString == "Hello!" ){ } //結(jié)果: true
if( aString == bString ){ } //結(jié)果: true
if( aString === bString ){ } //結(jié)果: false (兩個(gè)對(duì)不同,盡管它們的值相同)

3. 檢索字符串

1
2
3
var myString = "hello everybody.";
// 如果檢索不到會(huì)返回-1,檢索到的話返回在該串中的起始位置
if( myString.indexOf("every") > -1 ){ } //結(jié)果: true

4. 查找替換字符串

1
2
var myString = "I is your father.";
var result = myString.replace("is","am"); //結(jié)果: "I am your father."

5. 截取字符串

1
2
3
4
5
6
7
8
9
10
11
12
//截取第 6 位開始的字符
var myString = "Every good boy does fine.";
var section = myString.substring(6); //結(jié)果: "good boy does fine."
//截取第 0 位開始至第 10 位為止的字符
var myString = "Every good boy does fine.";
var section = myString.substring(0,10); //結(jié)果: "Every good"
//截取從第 11 位到倒數(shù)第 6 位為止的字符
var myString = "Every good boy does fine.";
var section = myString.slice(11,-6); //結(jié)果: "boy does"
//從第 6 位開始截取長(zhǎng)度為 4 的字符
var myString = "Every good boy does fine.";
var section = myString.substr(6,4); //結(jié)果: "good"

6. 字?jǐn)?shù)統(tǒng)計(jì)(中英文)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function fucCheckLength(strTemp){
    var i,sum;
    sum=0;
    for(i=0;i<strTemp.length;i++){
        if ((strTemp.charCodeAt(i)>=0) && (strTemp.charCodeAt(i)<=255)){
            sum=sum+1;
        }else{
            sum=sum+2;
        }
    }
    return sum;
}
// demo:
fucCheckLength("qwe");        //3
fucCheckLength("軒楓");        //4

7. 字符串是否合法日期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//合法日期：yyyy-mm-dd,分隔符可以為-/.
String.prototype.isDate = function() {
    var year,month,date,day;
    var reg = /^([12]\d{3})([-\/\.])([01]?\d)\2([0-3]?\d)$/;
    
    if (!reg.test(this)) return false;
    
    year  = RegExp.$1.parseInt();
    month = RegExp.$3.parseInt() - 1;
    date  = RegExp.$4.parseInt();
    day = new Date(year,month,date);
    
    return ((date == day.getDate()) && (month == day.getMonth()));
}
// demo:
"1999-12-20".isDate()
// 合法日期：yyyy-mm-dd,分隔符可以為-/

8. 返回兩個(gè)日期之間的時(shí)間間隔

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function dateDiff(date1,date2) {
    var year,month,date,day1,day2;
    var reg = /^(\d{4})([-\/\.])(\d{2})\2(\d{2})$/;
    reg.test(date1);
    year  = RegExp.$1.parseInt();
    month = RegExp.$3.parseInt() - 1;
    date  = RegExp.$4.parseInt();
    day1 = new Date(year,month,date);
    reg.test(date2);
    year  = RegExp.$1.parseInt();
    month = RegExp.$3.parseInt() - 1;
    date  = RegExp.$4.parseInt();
    day2 = new Date(year,month,date);
    return (day1.getTime() - day2.getTime()) / 86400000;
}
// demo:
// 用以前，先用isDate()判斷一下是否合法日期
// 注意：這個(gè)函數(shù)的reg和isDate()里的reg小you不同
// 以天為單位(date1-date2=?),可以用來比較2個(gè)日期大小

9. 判斷是否為空對(duì)象

1
2
3
4
5
6
7
8
9
10
11
12
function isEmpty(obj){
    for(var key in obj){
        return false;
    }
    return true;
}
// demo:
isEmpty({});    //true
isEmpty({"key":"value"});    //false
// jq版本
$.isEmptyObject({});    //true
$.isEmptyObject({"key", "value"});    //false

10. 獲取對(duì)象的屬性個(gè)數(shù)

1
2
3
4
5
6
7
8
9
10
Object.prototype.length = function() {
    var count = 0;
    for(var i in this){
        count ++;
    }
    return count;
};
// demo：
var a = {a:1, b:2, c:3, d:4};
alert(a.length());    // 5
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)