前言:
隨著前端市場日新月異的發展,現如今的市場要的不只是會切切圖的小仔、小妹了,而是需要真正懂原生js閉包,繼承,原型鏈,node,以及熟讀原始碼的大神,那麼我們也不能太落後各位大神,擼起袖子,重新拾起原生js吧!
以下是個人總結,也有一些是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
強制轉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
複製程式碼
- 將字串除以一個數字
"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
,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
。
如只需要去除前後空格,可直接使用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 /^(0d{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("結束時間:")
複製程式碼
(以上部分,有借鑑守候!
大神的文章
github.com/chenhuiYj/e…
)
如果你對我對文章感興趣或者有些建議想說給我聽?,也可以新增一下微信哦!
如果親感覺我的文章還不錯的話,可以一下新增關注哦!
—–再或者感覺我的文章對您有所幫助,可以掃描二維碼打賞一下我呦!這樣我會更有動力給大家提供更優質的文章哦! 謝謝您!!!
最後:
祝各位工作順利!
-小菜鳥Christine複製程式碼