博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原生js的常用方法整理
阅读量:6529 次
发布时间:2019-06-24

本文共 8099 字,大约阅读时间需要 26 分钟。

前言:

随着前端市场日新月异的发展,现如今的市场要的不只是会切切图的小仔、小妹了,而是需要真正懂原生js闭包,继承,原型链,node,以及熟读源码的大神,那么我们也不能太落后各位大神,撸起袖子,重新拾起原生js吧! 以下是个人总结,也有一些是copy大神的,现在放到一起,方便以后查阅(有不对的地方,还望大家能够提出,我会尽快加以改正)。

一、!!强制转布尔值boolean

根据当前需要判断的值是真值还是假值来判断,真值返回true,假值返回false,那么这样的话,除了假值,剩下的也都是真值了。

假值有:        0  、  “”  、   null  、 undefined  、  false  、NaN、      复制代码

除了这 6 个外,其它均为“真” ,包括对象、数组、正则、函数等。 注意: '0'、'null'、'false'、{}、[]也都是真值 。 那么下面我们来看看!!是如何转布尔值的。 例如: 首先我们声明3个变量,xnull,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复制代码
  1. 将字符串除以一个数字
"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 ,ba后;若reutrn < 0ab后;当a=b时,则存在浏览器兼容 ; a-b输出从小到大排序,b-a输出从大到小排序。 然后再说我们打乱的方法: 创建数组不用说,接下来就是用jssort方法 来实现,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("结束时间:")复制代码

(以上部分,有借鉴守候!大神的文章 )

如果你对我对文章感兴趣或者有些建议想说给我听?,也可以添加一下微信哦!

如果亲感觉我的文章还不错的话,可以一下添加关注哦!

-----再或者感觉我的文章对您有所帮助,可以扫描二维码打赏一下我呦!这样我会更有动力给大家提供更优质的文章哦! 谢谢您!!!

最后:        祝各位工作顺利!                     -小菜鸟Christine复制代码

转载地址:http://nzxbo.baihongyu.com/

你可能感兴趣的文章
(2编写网络)自己动手,编写神经网络程序,解决Mnist问题,并网络化部署
查看>>
【转】如何使用分区助手完美迁移系统到SSD固态硬盘?
查看>>
NIO框架入门(四):Android与MINA2、Netty4的跨平台UDP双向通信实战
查看>>
ios兼容iphonex刘海屏解决方案
查看>>
就是要你懂TCP -- 握手和挥手
查看>>
Andrew Ng机器学习公开课笔记 -- Regularization and Model Selection
查看>>
《Python游戏编程快速上手》一1.3 如何使用本书
查看>>
《Android游戏开发详解》——第1章,第1.3节声明和初始化变量
查看>>
《Visual Studio程序员箴言》----1.2 滚动与导航
查看>>
Processing编程学习指南2.7 Processing参考文档
查看>>
架构师速成-架构目标之伸缩性\安全性
查看>>
执行可运行jar包时读取jar包中的文件
查看>>
linux下ExtMail邮件使用及管理平台
查看>>
linux中iptables设置自建dns服务器的端口
查看>>
TP5+PHPexcel导入xls,xlsx文件读取数据
查看>>
基于Yum安装zabbix3.0
查看>>
Master-work模式
查看>>
dos命令行 指令
查看>>
RT-Thread--时间管理
查看>>
BUPT 63T 高才生 找最佳基站
查看>>