首页 > 文章 > web前端 > 原生js的常用方法整理

原生js的常用方法整理

php中世界最好的语言原创: 2017-11-27 15:21:162270浏览

随着前端市场日新月异的发展，现在的市场需要人才掌握的技能越多越多，今天就给大家总结一些原生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;iaa5387aa3b1b5226c3c5484f77a37d77{ 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 2807228347c9f453555cf939957758150 * ：重复次数>=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 &#39;email&#39;:             return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);         case &#39;phone&#39;:             return /^1[3|4|5|7|8][0-9]{9}$/.test(str);         case &#39;tel&#39;:             return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);         case &#39;number&#39;:             return /^[0-9]$/.test(str);         case &#39;english&#39;:             return /^[a-zA-Z]+$/.test(str);         case &#39;chinese&#39;:             return /^[\u4E00-\u9FA5]+$/.test(str);         case &#39;lower&#39;:             return /^[a-z]+$/.test(str);         case &#39;upper&#39;:             return /^[A-Z]+$/.test(str);         default :             return true;     } } console.log(checkType (&#39;hjkhjhT&#39;,&#39;lower&#39;))   //false

解析：

checkType ('hjkhjhT','lower')'需要验证的字符串'，'匹配的格式' email：验证邮箱 phone：验证手机号 tel：验证座机号 number：验证数字 english：验证英文字母 chinese：验证中文字 lower：验证小写 upper：验证大写

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！