关闭

web前端自定义函数工具库

时间: 2021-02-17阅读: 202标签: 工具

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

程序员必备的学习工具

学习技术过程我们经常需要使用搜索引擎来检索资料,国内常用的也就是某度了。当然有条件的话,搜索引擎首先还是推荐使用 Google,如果没办法使用,可以使用以下几个作为备用:

prettier代码格式化工具

两种linter都可以实现fix功能,所谓fix就是将原代码转化为符合一定规则的新代码。虽然linter工具fix之后的代码,解决了大部分问题,但可能有些地方并不符合我们的阅读代码的习惯,比如一行代码过长。

React Developers的10个超实用神奇工具

React是一个用于构建用户界面的JavaScript库。但是,很多人都不知道,其实有非常多的有助于我们更好地使用React,提升用户开发体验的优秀工具。如果您还没有使用过React,或者有可能对使用它感兴趣

LWN:内核开发者的更好的工具!

从许多角度来说,Linux kernel这个项目在用的工具都太过时了,远远落后于现代的孩子们经常用的工具。kernel的工作流程在过去几年表现都很好,不过已经有些迹象表明它不会永远保持不变。

六款主流ETL工具介绍

ETL(Extract-Transform-Load的缩写,即数据抽取、转换、装载的过程),对于企业或行业应用来说,我们经常会遇到各种数据的处理,转换,迁移,所以了解并掌握一种etl工具的使用,必不可少

5种常用运维监控工具

运维监控工具千千万,仅开源的解决方案就有流量监控(MRTG、Cacti、SmokePing、Graphite 等)和性能告警(Nagios、Zabbix、Zenoss Core、Ganglia、OpenTSDB等)可供选择。

11个代码质量审核和管理工具,程序员收藏

如今,代码质量分析和审核已成为每个企业的基本流程。随着开源代码库使用的增加,安全性和代码质量对于构建高质量软件至关重要。不良的代码不仅会影响代码的可维护性,而且还会在某些情况下影响其性能

JS 工具库文档化JSDoc

JSDoc 是一个自动化生成 JavaScript 文档工具,它是利用对 JavaScript 函数的特定注释来编译成 HTML 文件的一个文档工具。

免费的MySQL性能监控工具

MySQL管理和性能监控工具,能帮助你监控MySQL服务器,以及微调其性能和速度。众所周知,MySQL是功能强大的开源数据库系统,可让企业运行一系列不同的应用,如网站和ERP存储系统。MySQL是任何企业的关键资源

谷歌准备放弃存在 9 年的 XSS 检测工具

谷歌正在移除其 Chrome 网络浏览器中已经存在 9 年的一个功能,该功能可以帮助避免一些潜在的在线攻击。不过,别担心——优化的保护方案也即将出台。XSS Auditor 是 2010 年推出的一个内置 Chrome 函数,用于检测跨站点脚本 (XSS) 漏洞。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!