原生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;

但是当在函数内定义一个全局变量，并不能给赋上值

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。

七、字母大小写切换（正则匹配，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实现小球和鼠标的互动

Atas ialah kandungan terperinci 原生js的常用方法整理. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!