原生js的常用方法总结

   

=============== 通知：

博主已迁至《掘金》码字，博客园可能以后不再更新，掘金地址：https://juejin.im/post/5a1a6a6551882534af25a86b  请多多关照！！

-------------------在此谢过！-----------

前言：随着前端市场日新月异的发展，现如今的市场要的不只是会切切图的小仔、小妹了，而是需要真正懂原生js闭包，继承，原型链，node,以及熟读源码的大神，那么我们也不能太落后各位大神，撸起袖子，重新拾起原生js吧！

    以下是个人总结，有一些是copy大神的，现在放到一起，方便以后查阅（有不对的地方，还望大家能够提出，我会尽快加以改正）。

一、!!强制转boolean

    根据真值，假值 判断，返回true，false

 

         假值：  0     “”  null   undefined  false NaN

 

例如：
    var nu=null;
    var nul="";
    var str="abcd";

    console.log(!!nu)   =>false;
    console.log(!!nul)  =>false;
    console.log(!!str)  =>true;

 

二、+obj 强制转Number

 

 将对象强制转number,如果是纯数字的“88”字符串，可转为number

 

var a="88";
console.log(+a)   =>88

 但是如果是混合类型的字符串，则会转为NaN

var b="1606e";
console.log(+b)  => NaN

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

 

在 JavaScript 中，假设我们想判断一个是否是 undefined，那么我们通常会这样写：

  

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

但是在javascript中，undefined是不可靠的

 

例如：

 

   当undefined在函数内，并且是在局部变量是可以赋上值

 
 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)：

　　最常见的用法是通过void 0 运算来获得 undefined，表达式为 0 时的运算开销最小： 

　　那在以后需要判断值为undefined的时候，可以直接用void 0或者void (0)

 

四、字符串也是有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]');

五、生成一个随机数组(创建数组，sort排序)

 

 在项目中有时候我们需要一个随机打乱的数组，那么下面我们来实现以下：

先来创建一个数组：
   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

 

 七、字母大小写切换（正则匹配，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 = '';
            //循环传入的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 /^(0d{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：验证大写

 

 

 此文章有部分借鉴：https://github.com/chenhuiYj/ec-do/blob/master/src/ec-do-1.1.4.js