隨著前端市場日新月異的發展,現在的市場需要人才掌握的技能越多越多,今天就給大家總結一些原生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;
但是當在函數內定義一個全域變量,並不能為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]');
五、如何建立一個隨機數組,或是將現有的陣列打亂?
在專案中有時候我們需要一個隨機打亂的數組,那麼下面我們來實作以下:先來建立一個陣列:
接下來我們要來打亂它:
arr.sort(()=>{ return Math.random() - 0.5 }) // [1, 0, 2, 3, 4 // [1, 0, 2, 3, 2, 2, 3)中, 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:驗證大寫
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
#以上是原生js的常用方法整理的詳細內容。更多資訊請關注PHP中文網其他相關文章!