您必須瞭解這14個JavaScript函數
在進行任何JavaScript研究之前,您應該應該能夠手動理解和編寫這些功能。
1、確定任何對象的特定類型
衆所周知,JavaScript中有六種原始數據類型(布爾,數字,字符串,空值,未定義,符號)和對象數據類型。但是您知道對象數據類型可以細分爲許多種子類型嗎?對象可以是數組,函數,映射等。如果要獲取對象的特定類型,該怎麼辦?
ECMAScript 規定了以下的規則:
對於不同的對象,調用Object.prototype.toString()時將返回不同的結果。
例:
Object.prototype.toString.call('Hello World');
Object.prototype.toString.call(1);
Object.prototype.toString.call(function(){})
Object.prototype.toString.call({})
Object.prototype.toString.call(Object.create(null))
Object.prototype.toString.call(Symbol())
Object.prototype.toString.call(/aa/)
Object.prototype.toString.call(+(new Date()))
Object.prototype.toString.call((new Date()))
Object.prototype.toString.call(null)
Object.prototype.toString.call()
Object.prototype.toString.call(void(0))
依次輸出
"[object String]"
"[object Number]"
"[object Function]"
"[object Object]"
"[object Object]"
"[object Symbol]"
"[object RegExp]"
"[object Number]"
"[object Date]"
"[object Null]"
"[object Undefined]"
"[object Undefined]"
此外,Object.prototype.toString()的返回值始終爲’ [object ’ +’ tag ’ +’ ] ’ 的格式。如果只需要中間標記,則可以通過正則表達式或String.prototype.slice()刪除兩側的字符。
"[object Undefined]".slice(8,"[object Undefined]".length-1)
輸出
"Undefined"
2.緩存功能計算結果
如果有這樣的功能:
函數compute(str){
//假設函數中的計算非常耗時
console.log('2000過去了')
返回“結果”
}
我們要緩存函數操作的結果。以後調用時,如果參數相同,則將不再執行該函數,但是將直接返回緩存中的結果。我們能做什麼?
例:
3.實現Array.prototype.map
這是JavaScript中有用的內置方法,但是您應該可以自己實現此功能。
function selfMap(fn,context) {
let arr =Array.prototype.slice.call(this);
let mappedArr = new Array();
for(let i =0; i<arr.length; i++){
if(!arr.hasOwnProperty(i)) continue;
mappedArr[i] = fn.call(context,arr[i],i,this)
}
return mappedArr;
};
Array.prototype.selfMap = selfMap;
console.log([1,2,3].selfMap(val=>val*2))
輸出
[2, 4, 6]
4.實現Array.prototype.filter
這是JavaScript中有用的內置方法,但是您應該可以自己實現此功能。
function selfFilter(fn,context) {
let arr =Array.prototype.slice.call(this);
let filterArr = new Array();
for(let i =0; i<arr.length; i++){
if(!arr.hasOwnProperty(i)) continue;
fn.call(context,arr[i],i,this) && filterArr.push(arr[i])
}
return filterArr;
}
Array.prototype.selfFilter = selfFilter;
console.log([1,2,3,4,5,6].selfFilter(val=>val>2))
輸出
[3, 4, 5, 6]
5.實現Array.prototype.some
這是JavaScript中有用的內置方法,但是您應該可以自己實現此功能。
function selfSomer(fn,context) {
let arr =Array.prototype.slice.call(this);
if(!arr.length) return false;
for(let i =0; i<arr.length; i++){
if(!arr.hasOwnProperty(i)) continue;
let result = fn.call(context,arr[i],i,this)
if(result) return true;
}
return false;
}
Array.prototype.selfSome = selfSomer
console.log([1,2,3,4,5,6].selfSome(val=>val%2==0))
輸出
true
6.實現Array.prototype.reduce
這是JavaScript中有用的內置方法,但是您應該可以自己實現此功能。
原理同 some;這裏不做具體編碼
7.實現Array.prototype.flat
這是JavaScript中有用的內置方法,但是您應該可以自己實現此功能。
const selfFlat3 = (depth = 1)=>{
let arr =Array.prototype.slice.call(this);
if(depth === 0) return arr;
return arr.reduce((pre,cur)=>{
if(Array.isArray(cur)){
return [...pre,...selfFlat3.call(cur,depth-1)]
}else{
return [...pre,cur]
}
},[])
}
Array.prototype.selfFlat = selfFlat3
[1,[2,3],[4,5],[6],[7,8]].selfFlat();
輸出
[1, 2, 3, 4, 5, 6, 7, 8]