原生js入门(原生js的常用方法整理)
原生js入门(原生js的常用方法整理)如上所说,假值返回false 真值返回true。0 、 “” 、 null 、 undefined 、 false 、NaN、除了这 6 个外,其它均为“真” ,包括对象、数组、正则、函数等。注意: '0'、'null'、'false'、{}、[]也都是真值 。那么下面我们来看看!!是如何转布尔值的。例如:首先我们声明3个变量 x为null y为空字符串 str为字符串 下面看看他们添加了"!!"后会有什么结果。一、!!强制转布尔值boolean根据当前需要判断的值是真值还是假值来判断,真值返回true,假肢返回false,那么这样的话,除了假值,剩下的也都是真值了。推荐下我的前端群:524262608,分享源码、视频、企业级案例、最新知识点,欢迎初学者和在进阶中的小伙伴。假值有:
作者:晴天de雨滴
来源:https://juejin.im/post/5a16a1fb6fb9a045284627d3
前言:随着前端市场日新月异的发展,现如今的市场要的不只是会切切图的小仔、小妹了,而是需要真正懂原生js闭包,继承,原型链,node 以及熟读源码的大神,那么我们也不能太落后各位大神,撸起袖子,重新拾起原生js吧!
以下是个人总结,也有一些是copy大神的,现在放到一起,方便以后查阅(有不对的地方,还望大家能够提出,我会尽快加以改正)。
一、!!强制转布尔值boolean根据当前需要判断的值是真值还是假值来判断,真值返回true,假肢返回false,那么这样的话,除了假值,剩下的也都是真值了。
推荐下我的前端群:524262608,分享源码、视频、企业级案例、最新知识点,欢迎初学者和在进阶中的小伙伴。
假值有:
0 、 “” 、 null 、 undefined 、 false 、NaN、除了这 6 个外,其它均为“真” ,包括对象、数组、正则、函数等。注意: '0'、'null'、'false'、{}、[]也都是真值 。那么下面我们来看看!!是如何转布尔值的。例如:首先我们声明3个变量 x为null y为空字符串 str为字符串 下面看看他们添加了"!!"后会有什么结果。
如上所说,假值返回false 真值返回true。
二、在str前添加一个 号 str会强制转number
将字符串前加 ,可以强制转number 下面我们就一起来试试吧!
三、不可靠的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来判断一下。
我们现在可以通过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 = ''; //循环传入的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:验证大写
推荐下我的前端群:524262608,分享源码、视频、企业级案例、最新知识点,欢迎初学者和在进阶中的小伙伴。