參考文獻(xiàn)? ?https://juejin.cn/post/6925599792814882829
函數(shù)
call
語法：fn.call(obj,...args)
功能：執(zhí)行fn，使this為obj，并將后面的n個(gè)參數(shù)傳給fn
Function.prototype.myCall = function (obj, ...args) {
? if (obj == undefined || obj == null) {
? ? obj = globalThis
? }
? obj.fn = this
? let res = obj.fn(...args)
? delete obj.fn
? return res
}
value = 2
let foo = {
? value: 1,
}
let bar = function (name) {
? console.log(name, this.value)
}
bar.myCall(foo, 'HearLing', 18) //HearLing 18 1
bar.myCall(null, 'HearLing', 18) //HearLing 18 2
apply
語法：fn.apply(obj,arr)
功能：執(zhí)行fn，使this為obj，并arr數(shù)組中元素傳給fn
Function.prototype.myAplly = function (obj, arr) {
? if (obj == undefined || obj == null) {
? ? obj = globalThis
? }
? obj.fn = this
? let res = obj.fn(...arr)
? delete obj.fn
? return res
}
value = 2
let foo = {
? value: 1,
}
let bar = function (name, age) {
? console.log(name, age, this.value)
}
bar.myAplly(foo, ['HearLing', 18]) //HearLing 18 1
bar.myAplly(null, ['HearLing', 18]) //HearLing 18 2
bind
語法：fn.bind(obj,...args)
功能：返回一個(gè)新函數(shù)，給fn綁定this為obj，并制定參數(shù)為后面的n個(gè)參數(shù)
Function.prototype.myBind = function (obj, ...args) {
? let that = this
? let fn = function () {
? ? if (this instanceof fn) {
? ? ? return new that(...args)
? ? } else {
? ? ? return that.call(obj, ...args)
? ? }
? }
? return fn
}
value = 2
let foo = {
? value: 1,
}
let bar = function (name, age) {
? console.log(name, age, this.value)
}
let fn = bar.myBind(foo, 'HearLing', 18)
//fn() //HearLing 18 1
let a = new fn() //HearLing 18 undefined
console.log(a.__proto__)//bar {}
區(qū)別call()/apply()/bind()
call(obj)/apply(obj)：:調(diào)用函數(shù), 指定函數(shù)中的this為第一個(gè)參數(shù)的值bind(obj):返回一個(gè)新的函數(shù), 新函數(shù)內(nèi)部會(huì)調(diào)用原來的函數(shù), 且this為bind()指定的第一參數(shù)的值
節(jié)流
理解：在函數(shù)多次頻繁觸發(fā)時(shí)，函數(shù)執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才會(huì)執(zhí)行第二次
場(chǎng)景：頁面滾動(dòng)（scroll）、DOM 元素的拖拽（mousemove）、搶購(gòu)點(diǎn)擊（click）、播放事件算進(jìn)度信息
功能：節(jié)流函數(shù)在設(shè)置的delay毫秒內(nèi)最多執(zhí)行一次（簡(jiǎn)單點(diǎn)說就是，我上個(gè)鎖，不管你點(diǎn)了多少下，時(shí)間到了我才解鎖）
function throttle(fn, delay) {
? let flag = true
? return (...args) => {
? ? if (!flag) return
? ? flag = false
? ? setTimeout(() => {
? ? ? fn.apply(this, args)
? ? ? flag = true
? ? }, delay)
? }
}
防抖
理解：在函數(shù)頻繁觸發(fā)是，在規(guī)定之間以內(nèi)，只讓最后一次生效
場(chǎng)景：搜索框?qū)崟r(shí)聯(lián)想（keyup/input）、按鈕點(diǎn)擊太快，多次請(qǐng)求（登錄、發(fā)短信）、窗口調(diào)整（resize）
功能：防抖函數(shù)在被調(diào)用后，延遲delay毫秒后調(diào)用，沒到delay時(shí)間，你又點(diǎn)了，清空計(jì)時(shí)器重新計(jì)時(shí)，直到真的等了delay這么多秒。
function debounce(fn, delay) {
? let timer = null
? return (...args) => {
? ? clearTimeout(timer)
? ? timer = setTimeout(() => {
? ? ? fn.apply(this, args)
? ? }, delay)
? }
}
curry
function mycurry(fn, beforeRoundArg = []) {
? return function () {
? ? let args = [...beforeRoundArg, ...arguments]
? ? if (args.length < fn.length) {
? ? ? return mycurry.call(this, fn, args)
? ? } else {
? ? ? return fn.apply(this, args)
? ? }
? }
}
function sum(a, b, c) {
? return a + b + c
}
let sumFn = mycurry(sum)
console.log(sumFn(1)(2)(3))//6
數(shù)組
數(shù)組去重
function unique(arr) {
? const res = []
? const obj = {}
? arr.foreach((item) => {
? ? if (obj[item] === undefined) {
? ? ? obj[item] = true
? ? ? res.push(item)
? ? }
? })
? return res
}
//其他方法
//Array.from(new Set(array))
//[...new Set(array)]
數(shù)組扁平化
// 遞歸展開
function flattern1(arr) {
? let res = []
? arr.foreach((item) => {
? ? if (Array.isArray(item)) {
? ? ? res.push(...flattern1(item))
? ? } else {
? ? ? res.push(item)
? ? }
? })
? return res
}
對(duì)象
new
function newInstance (Fn, ...args) {
? const obj = {}
? obj.__proto__ = Fn.prototype
? const result = Fn.call(obj, ...args)
? // 如果Fn返回的是一個(gè)對(duì)象類型, 那返回的就不再是obj, 而是Fn返回的對(duì)象否則返回obj
? return result instanceof Object ? result : obj
}
instanceof
function instance_of(left, right) {
? let prototype = right.prototype
? while (true) {
? ? if (left === null) {
? ? ? return false
? ? } else if (left.__proto__ === prototype) {
? ? ? return true
? ? }
? ? left = left.__proto__
? }
}
let a = {}
console.log(instance_of(a, Object))//true
對(duì)象數(shù)組拷貝
淺拷貝
// 淺拷貝的方法
//Object.assign(target,...arr)
// [...arr]
// Array.prototype.slice()
// Array.prototype.concate()
function cloneShallow(origin) {
? let target = {}
? for (let key in origin) {
? ? if (origin.hasOwnProperty(key)) {
? ? ? target[key] = origin[key]
? ? }
? }
? return target
}
let obj = {
? name: 'lala',
? skill: {
? ? js: 1,
? ? css: 2,
? },
}
let newobj = cloneShallow(obj)
newobj.name = 'zhl'
newobj.skill.js = 99
console.log(obj)//{ name: 'lala', skill: { js: 99, css: 2 } }
console.log(newobj)//{ name: 'zhl', skill: { js: 99, css: 2 } }
深拷貝
// 深拷貝的方法
//JSON.parse(JSON.stringify(obj))
function deepClone(source, hashMap = new WeakMap()) {
? let target = new source.constructor()
? if (source == undefined || typeof source !== 'object') return source
? if (source instanceof Date) return source(Date)
? if (source instanceof RegExp) return source(RegExp)
? hashMap.set(target, source)//解決循環(huán)引用
? for (let key in source) {
? ? if (source.hasOwnProperty(key)) {
? ? ? target[key] = deepClone(source[key], hashMap)
? ? }
? }
? return target
}
let obj = {//應(yīng)該考慮更復(fù)雜的數(shù)據(jù)
? name: 'lala',
? skill: {
? ? js: 1,
? ? css: 2,
? },
}
let newobj = deepClone(obj)
newobj.skill.js = 100
console.log(obj)//{ name: 'lala', skill: { js: 1, css: 2 } }
console.log(newobj)//{ name: 'lala', skill: { js: 99, css: 2 } }
