原生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  ; // 0
复制代码

3.将字符串乘以一个数字

"111" * 1 ; // 111
 null * 1 ;  // 0
复制代码

4. 将字符串除以一个数字

"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：
  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第二个参数可以是函数，函数的参数中，第一个是本身，第二个是正则匹配内容，第三个匹配剩下的内容 下面我们就通过小实验来验证一下：

八、循环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复制代码