沐鳴首頁_web前端自定義函數工具庫

1、call函數封裝實現

// 手寫call函數
function call(Fn,obj,...arg){
    // 如果obj為null或者undefined,則指向window
    if(obj === undefined || obj === null){
        // globalThis是ES11的新特性,指向全局
        obj = globalThis
    }
    //為obj添加臨時方法
    obj.temp = Fn
    // 調用 temp 方法
    let result = obj.temp(...arg)
    // 刪除obj 的 temp 
    delete obj.temp
    return result
}

function add(a,b){
    console.log(this);
    return a + b + this.c
}
let obj = {
    c:521
}
globalThis.c = 1314
console.log(call(add,obj,10,20)); //551
console.log(call(add,null,10,20)); //1344
// 手寫call函數
Function.prototype.call = function(obj,...arg){
    // 如果obj為null或者undefined,則指向window
    if(obj === undefined || obj === null){
        // globalThis是ES11的新特性,指向全局
        obj = globalThis
    }
    //為obj添加臨時方法
    obj.temp = this
    // 調用 temp 方法
    let result = obj.temp(...arg)
    // 刪除obj 的 temp 
    delete obj.temp
    return result
}
function add(a,b){
    console.log(this);
    return a + b + this.c
}
let obj = {
    c:521
}
globalThis.c = 1314
console.log(add.call(obj,10,20)); //551
console.log(add.call(null,10,20)); //1344

2、apply函數封裝實現

// 手寫apply函數
Function.prototype.apply = function(obj,arg){
    if(obj === null || obj === undefined){
        obj = globalThis
    }
    obj.temp = this
    let result = obj.temp(...arg)
    delete obj.temp
    return result
}
function add(a,b){
    console.log(a+b+this.c);
}
let obj = {
    c:1314
}
globalThis.c = 520
add.apply(obj,[10,20]) //1344
add.apply(null,[10,20]) //550

3、bind函數封裝實現(bind不會立刻執行)

function bind(Fn,obj,...args){
    if(obj === null || obj === undefined){
        obj = globalThis
    }
    //bind返回一個函數,調用的時候執行方法
    return function(...args2){
        // 調用call方法
        obj.temp = Fn
        let result = obj.temp(...args,...args2)
        delete obj.temp
        return result
    }
}
function add(a,b){
    console.log(arguments);
    console.log(a+b+this.c);
}
let obj = {
    c:1314
}
globalThis.c = 520
bind(add,obj,10,20)() //1344
bind(add,null,10,20)(30,40) //550

4、函數節流

throttle節流

語法:throttle(callback,wait)

功能:創建一個節流函數,在wait毫秒內最多執行callback一次

理解:在函數需要頻繁觸發時:函數執行一次后,只有大於設定的執行周期后才會執行第二次,適合多次事件按時間做平均分配觸發

場景:窗口調整(resize)、頁面滾動(scroll)、DOM元素的拖拽功能實現(mousemove)、搶購瘋狂點擊(click)

<script>
        window.addEventListener(‘scroll‘,throttle(function(){
            console.log(Date.now());
        },500))
        function throttle(callback,wait){
            // 定義開始時間
            let start = 0
            // 返回結果是一個函數
            return function(e){
                let now = Date.now()
                if(now - start > wait){
                    callback.call(this,e)
                    start = now
                }
            }
        }
 </script>

 5、函數防抖

語法:debounce(callback,wait)

功能:創建一個防抖動函數,該函數會從上一次被調用后,延遲wait毫秒后調用callback

理解:觸發了一次函數會在延遲wait毫秒后調用callback,但再次點擊,會清空掉再次計算

場景:input框輸入時

<body>
    <input type="text">
    <script>
        let input = document.querySelector(‘input‘)
        // input.onkeydown = function(e){
        //     console.log(e.keyCode);
        // }
        input.onkeydown = debounce(function(e){
            console.log(e.keyCode);
        },1000)
        function debounce(callback,time){
            //定時器變量
            let timeId = null
            // 返回值一定是個函數,否則無法觸發回調
            return function(e){
                //timeId !== null 證明已經有一個timeif在跑,先清除掉再繼續跑
                if(timeId !== null){
                    clearTimeout(timeId)
                }
                //啟動定時器
                timeId = setTimeout(()=>{
                    callback.call(this,e)
                    // 重置定時器變量
                    timeId = null
                },time)
                
            }
        }
    </script>
</body>

6、數組函數map封裝實現

map()方法創建一個新數組,其結果是該數組中的每個元素是調用一次提供的函數后的返回值

const arr = [1,2,3,4,5]
Array.prototype.map = function (callback) {
    let result = []
    for(let i = 0;i<this.length;i++){
        result.push(callback(this[i],i))
    }
    return result
}
let arr2 = arr.map((item,index) => {
    return item *10
})
console.log(arr2);

 

7、數組函數reduce封裝實現

reduce():從左到右為每個數組元素執行一次回調函數,並把上次回調函數的返回值放在一個暫存器中傳給下次回調函數,並返回最後一次回調函數的返回值

const arr = [1,2,3,4,5]
// 示例
let result = arr.reduce((res,value)=>{
    return res + value
},0) //0為res初始值,value為arr的值
console.log(result); //15

Array.prototype.reduce = function(callback,value){
    let result = value
    for(let i = 0;i<this.length;i++){
        result = callback(result,this[i])
    }
    return result
}
//  演示
let arr2 = arr.reduce((res,value)=>{
    return res + value
},5)
console.log(arr2);

8、數組函數filter封裝實現

filter():將所有在過濾函數中返回true的數組元素放進一個新數組中並且返回

const arr = [1,2,3,4,5]
Array.prototype.filter2 = function(callback){
    let arr = []
    for(let i = 0;i<this.length;i++){
        if(callback(this[i],i)){
            arr.push(this[i])
        }
    }
    return arr
}
let res = arr.filter2((item=>{
    return item > 2
}))
console.log(res);

8、數組函數find封裝實現

find():找到第一個滿足測試函數的元素並返回那個元素的值,如果找不到,則返回undefined

const arr = [1,2,3,2005,4,1001]
// find()
Array.prototype.find = function(callback){
    for(let i = 0;i<this.length;i++){
        if(callback(this[i],i)){
            return this[i]
        }
    }
    return undefined
}
let res = arr.find((item=>{
    return item > 3000
}))
console.log(res);

9、數組函數findIndex封裝實現

findIndex():找到第一個滿足測試函數的元素並返回那個元素的索引,如果找不到,則返回-1

// findIndex()
Array.prototype.findIndex2 = function(callback){
    for(let i = 0;i<this.length;i++){
        if(callback(this[i],i)){
            return i
        }
    }
    return -1
}
let res = arr.findIndex2((item=>{
    return item > 1000
}))
console.log(res);

10、數組函數every封裝實現

every():如果數組中的每個元素都滿足測試函數,則返回true,否則返回false

const arr = [1,2,3,4,5]
Array.prototype.every2 = function(callback){
    for(let i = 0;i<this.length;i++){
        let result = callback(this[i],i)
        if(!result){
            return false;
        }
    }
    return true
}
const result = arr.every2(item=>{
    return item > 0
})
console.log(result);

11、數組函數some封裝實現

some():如果數組中至少有一個元素滿足測試函數,則返回true,否則返回false

Array.prototype.some2 = function(callback){
    for(let i = 0;i<this.length;i++){
        let result = callback(this[i],i)
        if(result){
            return true
        }
    }
    return false;
}
const result = arr.some2(item=>{
    return item > 6
})
console.log(result);

12、數組去重

方法1:利用foreach()和indexOf()

方法2:利用froecah() + 對象容器

方法3:利用ES6語法:from + Set 或者 … + Set

const arr = [1,2,3,4,5,2,4]
// 方法1 :forEach + indexOf 
function unique(arr){
    if(!Array.isArray(arr)){
        return
    }
    let result = []
    arr.forEach(item=>{
        if(result.indexOf(item) === -1){
            result.push(item)
        }
    })
    return result
}
let result = unique(arr)
console.log(result);
// 方法2 forEach() + 對象容器
function unique2(arr){
    let result = []
    //聲明空對象
    const obj = {}
    arr.forEach(item => {
        if(obj[item] === undefined){
            obj[item] = true
            result.push(item)
        }
    })
    console.log(obj);
    return result
    
}
let result2 = unique2(arr)
console.log(result2);
//方法3:利用ES6語法:from + Set 或者 ... + Set
function unique3(arr){
    return [...new Set(arr)]
    // let result = Array.from(new Set(arr))
    // return result
}
let result3 = unique3(arr)
console.log(result2);

 

13、數組合併和切片

數組合併concat()

let arr = [1,2,3]
Array.prototype.concat2 = function(...args){
    let result = [...this,...args]
    return result
}
const result = arr.concat2([4,5,6],7,8)
console.log(result);

數組切片slice()

Array.prototype.slice2 = function(begin,end){
    if(this.length === 0){
        return [];
    }
    //判斷begin
    begin = begin || 0
    if(begin >= this.length){
        return [];
    }
    //判斷end
    end = end || this.length
    if(end <begin){
        end = this.length
    }
    let result = []
    this.forEach((item,index)=>{
        if(index >= begin && index < end){
            result.push(item)
        }
    })
    return result
}
let sliceResult = arr.slice2(1,6)
console.log(sliceResult);

14、數組扁平化

語法:flatten(array)

取出嵌套數組(多維)中的所有元素放到一個新數組(一維)中

例如:[ 1,[ 3,[ 2,4 ]]]  -> [1,2,3,4]

方法1: 遞歸 + reduce() + concat()

方法2: ,,, + some()  + concat() 

let arr = [1,2,[3,4,[5,6]],7]
// 方法1
function falttenl(arr){
    let result = []
    arr.forEach(item => {
        if(Array.isArray(item)){
            result = result.concat(falttenl(item))
        }else{
            result = result.concat(item)
        }
    });
    return result
}
console.log(falttenl(arr));
// 方法2
function flatten2(arr){
    let result = [...arr]
    while(result.some(item => Array.isArray(item))){
        result = [].concat(...result)
    }
    return result
}
console.log(flatten2(arr));

15、數組分塊

語法:chunk(array,size)

功能:將數組拆分成多個size長度的區塊,每個區塊組成小數組,整體組成一個二維數組

如:[1,2,3,4,5,6]調用chunk(arr,4) ===> [[1,2,3,4],[5,6]]

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/10164