原生js的常用方法整理

前言:

隨著前端市場日新月異的發展，現如今的市場要的不只是會切切圖的小仔、小妹了，而是需要真正懂原生js閉包，繼承，原型鏈，node,以及熟讀原始碼的大神，那麼我們也不能太落後各位大神，擼起袖子，重新拾起原生js吧！以下是個人總結，也有一些是copy大神的，現在放到一起，方便以後查閱（有不對的地方，還望大家能夠提出，我會盡快加以改正）。

一、!!強制轉布林值`boolean`

根據當前需要判斷的值是真值還是假值來判斷，真值返回true，假值返回false，那麼這樣的話，除了假值，剩下的也都是真值了。

假值有：
        0  、  “”  、   null  、 undefined  、  false  、NaN、
      
複製程式碼

除了這 6 個外，其它均為“真” ，包括物件、陣列、正則、函式等。注意: '0'、'null'、'false'、{}、[]也都是真值。 那麼下面我們來看看!!是如何轉布林值的。例如：首先我們宣告3個變數,x為null,y為空字串,str為字串,下面看看他們新增了"!!"後會有什麼結果。

var x=null;
var y="";
var str="abcd";

console.log(!!x)      // false;
console.log(!!y)      // false;
console.log(!!str)    // true;
複製程式碼

如上所說，假值返回false,真值返回true。

二、數字字串`str`強制轉`Number`

這裡的強轉是對於數字字串，例如："22","6",可直接使用如下方法直接使用運算的方式來轉換，null能參與計算，時在計算時null會先轉成0，然後再進行運算。

1.將字串前加+，可以強制轉number,下面我們就一起來試試吧！

var str="88";
console.log(+str)   // 88

//但是如果是混合型別的字串，則會轉為NaN
+"1606e" ;  // NaN
+ null  ;   // 0
複製程式碼

2.將字串減去一個數字

"11" - 1 ; // 10
 null - 1  ; // -1
複製程式碼

3.將字串乘以一個數字

"111" * 1 ; // 111
 null * 1 ;  // 0
複製程式碼

將字串除以一個數字

"111" / 1 ;  // 111
 null / 1 ;  // 0
複製程式碼

也可以用來判斷：


if(toString.call(str*1)==[object Number]){
    dosomething..
}
複製程式碼

三、不可靠的`undefined` 可靠的`void 0`

在JavaScript中，假設我們想判斷一個是否是 undefined，那麼我們通常會這樣寫：

if(a === undefined){
 dosomething.....
}
複製程式碼

因為在javascript中，undefined是不可靠的 例如：當undefined被放在在function函式內，我們把它當成一個區域性變數，它是可以賦上值的，下面我們來試試。

function foo2(){
    var undefined=1;
    console.log(undefined)
}
foo2();     // 1;
複製程式碼

** 但是當在函式內定義一個全域性變數，並不能給賦上值**

var undefined;
function foo2(){
    undefined=1;
    console.log(undefined)
}
foo2()    // undefined
複製程式碼

那麼我們試試用void 0或者 void (0)來代替：先宣告一個變數a，賦值為undefined，接下來我們用void 0來判斷一下。

var a=undefined;

//用void 0來判斷一下
if(a===void 0){
    console.log('true')
}       // true

//再用void (0)來判斷一下
if(a===void (0)){
    console.log('true')
}       // true
//最後我們列印一下這兩個的返回值
console.log(void 0,void (0))    // undefined undefined
複製程式碼

我們現在可以通過void 0 運算來獲得 undefined；那在以後需要判斷值為undefined的時候，可以直接用void 0或者void (0)，而且這兩個值的直接返回值就是undefined，所以說非常可靠哦！

四、字串也是有`length`屬性的！

我們知道所有的Array都是有length屬性的，就算是空陣列，那麼length 為0，那麼字串有沒有呢？接下來我們來驗證一下。

var str="sdfsd5565s6dfsd65sd6+d5fd5";
console.log(str.length)      // 26
複製程式碼

結果是有的，所以我們在判斷型別時，不能單純拿有沒有length屬性來判斷是不是陣列了，我們可以用下面的方法來判斷是否是陣列：

var obj=[1,2] ;
console.log(toString.call(obj) === '[object Array]');
複製程式碼

五、如何建立一個隨機陣列，或者將已有的陣列打亂？

在專案中有時候我們需要一個隨機打亂的陣列，那麼下面我們來實現以下： 先來建立一個陣列：

var arr=[];
for(var i=0;i<10;i++){
    arr.push(i)
}
console.log(arr)    // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
複製程式碼

接下來我們來打亂它：

arr.sort(()=>{
    return Math.random() - 0.5
})                 // [1, 0, 2, 3, 4, 6, 8, 5, 7, 9]
複製程式碼

第二種打亂方法：

arr.sort((a,b)=>{
    return a>Math.random()*10;
})                // [1, 2, 0, 6, 4, 3, 8, 9, 7, 5]

複製程式碼

我們以前的正常排序是這樣的：

arr.sort(function(a,b){
    return b-a
});
複製程式碼

解析：

先說正常的排序： a,b表示陣列中的任意兩個元素，若return > 0 ,b前a後；若reutrn < 0 則a前b後；當a=b時，則存在瀏覽器相容； a-b輸出從小到大排序，b-a輸出從大到小排序。 然後再說我們打亂的方法：建立陣列不用說，接下來就是用js的sort方法來實現，Math.random()實現一個隨機0-1之間的小數然後再減去0.5，這時就會根據return比較後得到的值排序，所以說就會生成不是正常從大到小或者從小到大的排序。

第二個打亂的方法同樣是遵循sort的方法，將a,b傳進去然後和隨機數做比較，關於比較的方法不太清楚。

六、去除前後、前、後所有空格

這是專門為去除空格寫的一套方法，適用於各種情況，所有空格,前後空格，前空格，後空格。

var strr="    1 ad dertasdf sdfASDFDF DFG SDFG    "
    //  type 1-所有空格，2-前後空格，3-前空格，4-後空格
複製程式碼

function trim(str,type){
    switch (type){
        case 1:return str.replace(/\s+/g,"");
        case 2:return str.replace(/(^\s*)|(\s*$)/g, "");
        case 3:return str.replace(/(^\s*)/g, "");
        case 4:return str.replace(/(\s*$)/g, "");
        default:return str;
    }
}
console.log( trim(strr,1))      //  "1addertasdfsdfASDFDFDFGSDFG"
複製程式碼

解析： 這個方法用的是正則的匹配格式,後面我會把正則單獨拿出來總結一個系列，敬請期待！！！

\s ： 空格符，Tab,換頁符，換行符
\S ： 非\s的所有內容
/g :  全域性匹配
^  :  匹配在行首
$  :  匹配在行尾
+  ： 重複次數>0
*  ： 重複次數>=0
|  :  或者 
複製程式碼

replace(a,b)：方法用於在字元創中用一些字元替換另一些字元, 會傳入兩個值，將逗號前面的值a替換成逗號後面的值b。

如只需要去除前後空格，可直接使用js的trim()方法：

let str = "  abcd  ";
str.trim()  // "abcd"
複製程式碼

關於正則匹配，我有一篇文章專門來介紹，傳送門

七、字母大小寫切換（正則匹配，`replace`）

這個方法主要是給一些需要大小寫轉換提供的方法，主要有首字母大寫，首字母小寫，大小寫轉換，全部轉大寫和全部轉小寫。

type：
&emsp;&emsp;1:首字母大寫
&emsp;&emsp;2：首頁母小寫
&emsp;&emsp;3：大小寫轉換
&emsp;&emsp;4：全部大寫
&emsp;&emsp;5：全部小寫
&emsp;&emsp;

複製程式碼

原始字串：

var str="sdfwwerasfddffddeerAasdgFegqer";

function changeCase(str,type) {

   //這個函式是第三個大小寫轉換的方法
    function ToggleCase(str) {
        var itemText = ""
        str.split("").forEach(
                function (item) {
                 // 判斷迴圈字串中每個字元是否以a-z之間開頭的並且重複大於0次
                    if (/^([a-z]+)/.test(item)) {
                    //  如果是小寫，轉換成大寫
                        itemText += item.toUpperCase();
                    }
                //  判斷迴圈字串中每個字元是否以A-Z之間開頭的並且重複大於0次
                    else if (/^([A-Z]+)/.test(item)) {
                   //   如果是大寫，轉換成小寫
                        itemText += item.toLowerCase();
                    }
                    else{
                  //  如果都不符合，返回其本身
                        itemText += item;
                    }
                });
        return itemText;
    }
  //下面主要根據傳入的type值來匹配各個場景
    switch (type) {
         //當匹配
        case 1:
            return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
                 //v=驗證本身  v1=s ; v2=dfwwerasfddffddeerAasdgFegqer
                return v1.toUpperCase() + v2.toLowerCase();
            });
        case 2:
            return str.replace(/^(\w)(\w+)/, function (v, v1, v2) {
                //v=驗證本身  v1=s ; v2=dfwwerasfddffddeerAasdgFegqer
                return v1.toLowerCase() + v2.toUpperCase();
            });
        case 3:
            return ToggleCase(str);
        case 4:
            return str.toUpperCase();
        case 5:
            return str.toLowerCase();
        default:
            return str;
    }

}

 console.log(changeCase(str,1))   //SdfwwerasfddffddeerAasdgFegqer

複製程式碼

解析：

split：用於把一個字串分割成字串陣列
\w: 數字0-9或字母a-z及A-Z,或下劃線
\W: 非\w，除以上的特殊符號等   
toUpperCase：轉大寫
toLowerCase：轉小寫
replace第二個引數可以是函式，函式的引數中，第一個是本身，第二個是正則匹配內容，第三個匹配剩下的內容
複製程式碼

replace第二個引數可以是函式，函式的引數中，第一個是本身，第二個是正則匹配內容，第三個匹配剩下的內容下面我們就通過小實驗來驗證一下：

八、迴圈n次傳入的字串

str為傳入隨意字串，count為迴圈的次數

 var str="abc";
 var number=555;

function repeatStr(str, count) {
    //宣告一個空字串，用來儲存生成後的新字串
    var text = '';
    //迴圈傳入的count值，即迴圈的次數
    for (var i = 0; i < count; i++) {
       //迴圈一次就把字串+到我們事先準備好的空字串上
        text += str;
    }
    return text;
}
  console.log(repeatStr(str, 3))         // "abcabcabc"
  console.log(repeatStr(number, 3))      // "555555555"
複製程式碼

解析：根據count迴圈的次數，在迴圈體內複製，return 返回+=後的值

九、查詢字串的A內容替換成B內容

let str="abacdasdfsd"
function replaceAll(str,AFindText,ARepText){
   raRegExp = new RegExp(AFindText,"g");
   return str.replace(raRegExp,ARepText);
}
console.log(replaceAll(str,"a","x"))   // xbxcdxsdfsd
複製程式碼

//解析：建立正則，匹配內容，替換

str：需要編輯的字串本身
AFindText:需要替換的內容
ARepText:被替換成的內容
複製程式碼

十、檢測常用格式，郵箱，手機號，名字，大寫，小寫,在表單驗證時，我們經常會需要去驗證一些內容，舉例幾個常用的驗證。

function checkType (str, type) {
    switch (type) {
        case 'email':
            return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
        case 'phone':
            return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
        case 'tel':
            return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
        case 'number':
            return /^[0-9]$/.test(str);
        case 'english':
            return /^[a-zA-Z]+$/.test(str);
        case 'chinese':
            return /^[\u4E00-\u9FA5]+$/.test(str);
        case 'lower':
            return /^[a-z]+$/.test(str);
        case 'upper':
            return /^[A-Z]+$/.test(str);
        default :
            return true;
    }
}
console.log(checkType ('hjkhjhT','lower'))   //false
複製程式碼

解析：

checkType ('hjkhjhT','lower')'需要驗證的字串'，'匹配的格式'
email：驗證郵箱
phone：驗證手機號
tel：驗證座機號
number：驗證數字
english：驗證英文字母
chinese：驗證中文字
lower：驗證小寫
upper：驗證大寫
複製程式碼

十一、給sessionStorage儲存物件

// 需要存入的物件：

let obj={
   hellow:world
};
let str=JSON.Stringify(obj);
----------------

//簡單使用：

存：
sessionStorage.setItem("Param",str);
取：
let get_data=JSON.parse(sessionStorage.getItem("Param")).hellow  // world
-------------------   

//進一步整理：

存：
sessionStorage.setItem("Param",JSON.stringify({Hellow:world}));
取：
JSON.parse(sessionStorage.getItem("Param")).Hellow   // world
複製程式碼

十二、控制檯列印執行時間

有時我們需要對比兩個方法的執行效率，或者檢視某方法的執行時間，那麼我們就可以使用下面的方法作為監聽的的方法。

console.time("開始時間：")

// 中間放你想執行的方法

console.timeEnd("結束時間：")

複製程式碼

（以上部分，有借鑑守候!大神的文章 github.com/chenhuiYj/e… ）

如果你對我對文章感興趣或者有些建議想說給我聽?，也可以新增一下微信哦！

如果親感覺我的文章還不錯的話，可以一下新增關注哦！

-----再或者感覺我的文章對您有所幫助，可以掃描二維碼打賞一下我呦！這樣我會更有動力給大家提供更優質的文章哦！謝謝您！！！

最後：
        祝各位工作順利！
                     -小菜鳥Christine複製程式碼

原生js的常用方法整理

前言:

一、!!強制轉布林值boolean

二、數字字串str強制轉Number

三、不可靠的undefined 可靠的void 0

四、字串也是有length屬性的！

五、如何建立一個隨機陣列，或者將已有的陣列打亂？

六、去除前後、前、後 所有空格

關於正則匹配，我有一篇文章專門來介紹，傳送門

七、字母大小寫切換（正則匹配，replace）

八、迴圈n次傳入的字串

九、查詢字串的A內容替換成B內容

十、檢測常用格式，郵箱，手機號，名字，大寫，小寫,在表單驗證時，我們經常會需要去驗證一些內容，舉例幾個常用的驗證。

十一、給sessionStorage儲存物件

十二、控制檯列印執行時間

相關文章

一、!!強制轉布林值`boolean`

二、數字字串`str`強制轉`Number`

三、不可靠的`undefined` 可靠的`void 0`

四、字串也是有`length`屬性的！

六、去除前後、前、後所有空格

七、字母大小寫切換（正則匹配，`replace`）