解析 url 参数
function getUrlParams(url){
let reg = /([^?&=]+)=([^?&=]+)/g
let obj = {}
url.replace(reg , function(){
console.log(arguments);
obj[arguments[1]] = arguments[2]
})
return obj
}
let url = 'https://www.junjin.cn?a=1&b=2'
console.log(getUrlParams(url)) // { a: 1, b: 2 }
call
改变 this 指向, 可以接收多个参数
Function.prototype.myCll = function(ctx){
ctx = ctx || window
let fn = Symbol()
ctx[fn] = this
let result = ctx[fn](...arguments)
delete ctx[fn]
return result
}
apply
与 call 差不多滴
Function.prototype.myApply = function(ctx){
ctx = ctx || window
let fn = Symbol()
ctx[fn] = this
let result = ctx[fn](arguments)
delete ctx[fn]
return result
}
bind
不解释了
Function.prototype.myBind = function(ctx){
const self = this
const fn = function(){}
const bind = function(){
const _this = this instanceof fn ? this : ctx
return self.apply(_this , [...args , ...arguments]
}
fn.prototype = this.prototype
bind.prototype = new fn()
return bind
}
数组扁平化
// 来个示例数组
let arr = [1, [2, [3, [4, [5]]]]]
// 方法一
// flat() 默认拉平一层嵌套数组，传入数字几就拉平几层
// Infinity 是无穷大，不管嵌套多少层都给你拉平
let brr1 = arr.flat(Infinity)
console.log(brr1) // [1, 2, 3, 4, 5]
// 方法二
// 转成字符串，再去掉字符串里的 “[” 和 “]”，再把字符串转回数组
let brr2 = JSON.parse( "[" + JSON.stringify(arr).replace(/\[|\]/g, "") + "]")
console.log(brr2) // [1, 2, 3, 4, 5]
// 方法三
let brr3 = arr => {
// 用递归，用 for 循环加递归也可以，这里用 reduce
// reduce 累计器，本质上也是循环，
// cur 是循环的当前一个值，相当于 for循环里的arr[i]， pre 是前一个值，相当于for循环里的arr[i-1]
let crr = arr.reduce((pre, cur) => {
return pre.concat(Array.isArray(cur) ? brr3(cur) : cur);
}, [])
return crr
}
console.log(brr3(arr)) // [1, 2, 3, 4, 5]
防抖
连续点击的情况下不会执行，只在最后一下点击过指定的秒数后才会执行
应用场景：点击按钮，输入框模糊查询，词语联想等
function debounce(fn, wait) {
let timeout = null
return function(){
// 每一次点击判断有延迟执行的任务就停止
if(timeout !== null) clearTimeout(timeout)
// 否则就开启延迟任务
timeout = setTimeout(fn, wait)
}
}
function sayDebounce() {
console.log("防抖成功！")
}
btn.addEventListener("click", debounce(sayDebounce,1000))
节流
频繁触发的时候，比如滚动或连续点击，在指定的间隔时间内，只会执行一次
应用场景：点击按钮，监听滚动条，懒加载等
// 方案1 连续点击的话，每过 wait 秒执行一次
function throttle(fn, wait) {
let bool = true
return function() {
if(!bool) return
bool = false
setTimeout(() => {
// fn() // fn中this指向window
fn.call(this, arguments) // fn中this指向btn 下面同理
btn = true
}, wait)
}
}
// 方案2 连续点击的话，第一下点击会立即执行一次 然后每过 wait 秒执行一次
function throttle(fn, wait) {
let date = Date.now()
return function() {
let now = Date.now()
// 用当前时间 减去 上一次点击的时间 和 传进来的时间作对比
if (now - date > wait) {
fn.call(this, arguments)
date = now
}
}
}
function sayThrottle() {
console.log("节流成功！")
}
btn.addEventListener("click", throttle(sayThrottle,1000))
new
function myNew(fn,...args){
// 不是函数不能 new
if(typeof fn !== "function"){
throw new Error('TypeError')
}
// 创建一个继承 fn 原型的对象
const newObj = Object.create(fn.prototype);
// 将 fn 的 this 绑定给新对象，并继承其属性，然后获取返回结果
const result = fn.apply(newObj, args);
// 根据 result 对象的类型决定返回结果
return result && (typeof result === "object" || typeof result == "function") ? result : newObj;
}
Object.create
function createObj(obj){
function Fn(){}
Fn.prototype = obj
return new Fn()
}
创建一个空对象并修改原型，这没啥说的，一般传个 null 进去，这样创建出来没有原型的对象不会被原型污染，或者传要继承的对象原型
ES5 继承
// 创建一个父类
function Parent(){}
Parent.prototype.getName = function(){ return '沐华' }
// 子类
function Child(){}
// 方式一
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child // 重新指定 constructor
// 方式二
Child.prototype = Object.create(Parent.prototype，{
constructor:{
value: Child,
writable: true, // 属性能不能修改
enumerable: true, // 属性能不能枚举(可遍历性)，比如在 for in/Object.keys/JSON.stringify
configurable: true, // 属性能不能修改属性描述对象和能否删除
}
})
console.log(new Child().getName) // 沐华
ES6 继承
// 创建一个父类
class Parent(){
constructor(props){
this.name = '沐华'
}
}
// 创建一个继承自父类的子类
class Child extends Parent{
// props是继承过来的属性， myAttr是自己的属性
constructor(props, myAttr){
// 调用父类的构造函数，相当于获得父类的this指向
super(props)
}
}
console.log(new Child().name) // 沐华
深拷贝
// 用 while 写一个通用的遍历
function myEach(array, iteratee) {
let index = -1;
const length = array.length;
while (++index < length) {
iteratee(array[index], index);
}
return array;
}
function myClone(target, map = new WeakMap()){
// 引用类型才继续深拷贝
if (target instanceof Object) {
const isArray = Array.isArray(target)
// 克隆对象和数组类型
let cloneTarget = isArray ? [] : {}
// 防止循环引用
if (map.get(target)) {
// 有拷贝记录就直接返回
return map.get(target)
}
// 没有就存储拷贝记录
map.set(target,cloneTarget)
// 是对象就拿出同级的键集合 返回是数组格式
const keys = isArray ? undefined : Object.keys(target)
// value是对象的key或者数组的值 key是下标
myEach(keys || target, (value, key) => {
if (keys) {
// 是对象就把下标换成value
key = value
}
// 递归
cloneTarget[key] = myClone(target[key], map)
})
return cloneTarget
} else {
return target
}
}
获取数据类型
function getType(value) {
if (value === null) {
return value + ""
}
if (typeof value === "object") {
// 数组、对象、null 用 typeof 都是 object，所以需要处理下 以 {} 为例
let valueClass = Object.prototype.toString.call(value) // 转成这样 [object, Object]
let type = valueClass.split(" ")[1].split("") // 变成这样 ["O", "b", "j", "e", "c", "t", "]"]
type.pop() // 再变成这样 ["O", "b", "j", "e", "c", "t"]
return type.join("").toLowerCase() // object
} else {
return typeof value;
}
}
console.log( getType(1) ) // number
console.log( getType("1") ) // string
console.log( getType(null) ) // null
console.log( getType(undefined) ) // undefined
console.log( getType({}) ) // object
console.log( getType(function(){}) ) // function
函数柯里化
柯里化函数就是高阶函数的一种，好处主要是实现参数的复用和延迟执行，不过性能上就会没那么好，要创建数组存参数，要创建闭包，而且存取argements比存取命名参数要慢一点
实现 add(1)(2)(3) 要求参数不固定，类似 add(1)(2, 3, 4)(5)() 这样也行，我这实现的是中间的不能不传参数，最后一个不传参数，以此来区分是最后一次调用然后累计结果
// 每次调用的传进来的参数做累计处理
function reduce (...args) {
return args.reduce((a, b) => a + b)
}
function currying (fn) {
// 存放每次调用的参数
let args = []
return function temp (...newArgs) {
if (newArgs.length) {
// 有参数就合并进去，然后返回自身
args = [ ...args, ...newArgs ]
return temp
} else {
// 没有参数了，也就是最后一个了，执行累计结果操作并返回结果
let val = fn.apply(this, args)
args = [] //保证再次调用时清空
return val
}
}
}
let add = currying(reduce)
console.log(add(1)(2, 3, 4)(5)()) //15
console.log(add(1)(2, 3)(4, 5)()) //15
Promise
class MyPromise {
constructor(fn){
// 存储 reslove 回调函数列表
this.callbacks = []
const resolve = (value) => {
this.data = value // 返回值给后面的 .then
while(this.callbacks.length) {
let cb = this.callbacks.shift()
cb(value)
}
}
fn(resolve)
}
then(onResolvedCallback) {
return new MyPromise((resolve) => {
this.callbacks.push(() => {
const res = onResolvedCallback(this.data)
if (res instanceof MyPromise) {
res.then(resolve)
} else {
resolve(res)
}
})
})
}
}
// 这是测试案例
new MyPromise((resolve) => {
setTimeout(() => {
resolve(1)
}, 1000)
}).then((res) => {
console.log(res)
return new MyPromise((resolve) => {
setTimeout(() => {
resolve(2)
}, 1000)
})
}).then(res =>{console.log(res)})
Promise.all
Promise.all 可以把多个 Promise 实例打包成一个新的 Promise 实例。传进去一个值为多个 Promise 对象的数组，成功的时候返回一个结果的数组，返回值的顺序和传进去的顺序是一致对应得上的，如果失败的话就返回最先 reject 状态的值
如果遇到需要同时发送多个请求并且按顺序返回结果的话，Promise.all就可以完美解决这个问题
MyPromise.all = function (promisesList) {
let arr = []
return new MyPromise((resolve, reject) => {
if (!promisesList.length) resolve([])
// 直接循环同时执行传进来的promise
for (const promise of promisesList) {
promise.then((res) => {
// 保存返回结果
arr.push(res)
if (arr.length === promisesList.length) {
// 执行结束 返回结果集合
resolve(arr)
}
}, reject)
}
})
}
Promise.race
MyPromise.race = function(promisesList) {
return new MyPromise((resolve, reject) => {
// 直接循环同时执行传进来的promise
for (const promise of promisesList) {
// 直接返回出去了，所以只有一个，就看哪个快
promise.then(resolve, reject)
}
})
}
