您必須瞭解這JavaScript函數

您必須瞭解這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]
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章