原生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 /^(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:验证大写
 
 
 此文章有部分借鉴:https://github.com/chenhuiYj/ec-do/blob/master/src/ec-do-1.1.4.js
 
 
 
 
 
 
 
 
 

转载于:https://www.cnblogs.com/christineqing/p/7550867.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值