原生js的常用方法整理

隨著前端市場日新月異的發展，現在的市場需要人才掌握的技能越多越多，今天就給大家總結一些原生js閉包，繼承，原型鏈，node，希望能對你的前端道路上有幫助

以下是個人總結，也有一些是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前加上一個➕號,+str會強制轉Number
將字串前加+，可以強制轉number,下面我們就一起來試試看吧！

var str="88"; console.log(+str)   // 88 //但是如果是混合型別的字串，則會轉為NaN var b="1606e"; console.log( +b)     // NaN

三、不可靠的undefined 可靠的void 0
在JavaScript中，假設我們想判斷一個是否是undefined，那麼我們通常會這樣寫：

if(a === undefined){   dosomething..... }

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

function foo2(){     var undefined=1;     console.log(undefined) } foo2();     // 1;

但是當在函數內定義一個全域變量，並不能為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        // [1, 0, 2, 3, 2, 2, 3）中, 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。

七、字母大小寫切換（正規匹配，replace）
這個方法主要是給一些需要大小寫轉換提供的方法，主要有首字母大寫，首字母小寫，大小寫轉換，全部轉大寫和全部轉小寫。

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

原始字串：

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是可以有4個參數的，但是我並沒有驗證到第四個代表的意義，前三個已經驗證，第一個參數為驗證本身，第二個正規匹配結果，第三為第二個匹配完剩下的值。

八、循環n次傳入的字串
str為傳入隨意字串，count為迴圈的次數

var str="abc";  var number=555; function repeatStr(str, count) {     //声明一个空字符串，用来保存生成后的新字符串     var text = &#39;&#39;;     //循环传入的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：驗證大寫

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS的編碼怎麼轉換

css3點擊顯示漣漪特效

怎麼用canvas實作小球與滑鼠的互動

#

以上是原生js的常用方法整理的詳細內容。更多資訊請關注PHP中文網其他相關文章！