防抖函数
const debounce = (fn, wait) => {
let _ = ''
return (...arg) => {
clearTimeout(_)
_ = setTimeout(() => {
fn.apply(this, arg)
}, wait)
}
}
input.addEventListener("input", debounce(ajax, 1000));
节流函数
const throttle = (fn, s) => {
let a = +new Date(),
_
return (...arg) => {
let b = +new Date() - a
if (b > s) {
_ = setTimeout(() => {
fn(arg);
_ = ''
}, s)
a = +new Date()
}
}
}
input.addEventListener("input", throttle(ajax, 1000));
睡眠函数
function sleep(s){
return new Promise(resolve=>{
setTimeout(resolve,s)
})
}
运行
sleep(1000).then(()=>alert(1))
或
!async function run() {
await sleep(1500);
console.log('start await');
}()
js进行浮点运算
let float_ = (...arg) => {
let len = Math.max(...arg.map(i => {
let [, _] = String(i).split('.')
console.log(_)
return _ ? _.length : ''
}))
return arg.reduce((all, i) => all + i * len / len, 0)
}
函数克里化
let curry = fn => ju = (...arg) => arg.length == fn.length ? fn(...arg) : (...args) => ju(...arg, ...args)
手写ajax
let ajax=obj=>{
let _=Object.assign({
methods:'GET',
url:'www.xxx.com',
data:''
},obj)
return new Promise((resolve,reject)=>{
let xhr = new XMLHttpRequest,
sendData = ''
if(_.data){
for(let i in _.data){
sendData += `&${i}=${_.data[i]}`
}
}
let url = sendData ? `${obj.url}?${sendData}` : obj.url
if (methods = 'GET') {
xhr.open('GET', obj.url, true)
xhr.send(sendData)
}
if (methods = 'POST') {
xhr.open('POST', obj.url, true)
xhr.send(sendData.slice(1))
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200 || XHR.status === 304) {
resolve(JSON.parse(xhr.responseText))
} else {
reject(Error)
}
}
}
})
}
队列函数(无论是否异步按照顺序调用函数)
let stack=[],
index=0
function next(){
var fn=stack[i]
index += 1
if (typeof fn == 'function') {
fn();
}
}
function fn1(){
console.log('第一个调用')
next();
}
function fn2(){
setTimeout(function() {
console.log('第二个被调用');
next();
}, 1000)
}
function fn3() {
console.log('第三个调用');
next();
}
stack.push(fn1, fn2, fn3)
next();
使用async写异步函数(图片是否被正确加载)
async function load(url) {
var image = new Image();
image.onload = function() { //图片加载成功，调用resolve方法
return console.log(image)
};
image.onerror = function() { //图片加载不成功，调用reject方法
throw '错误'
};
image.src = url;
}
运行
~async function img() {
return await load(
'https://www.xxx.com'
)
}()
Instanceof函数
function Instanceof_(obj, fn) {
while (true) {
if (obj.__proto__ === null) return false
if (obj.__proto__ === fn.prototype) return true
obj= obj.__proto__;
}
}
call函数
Function.prototype.call_ = function() {
let obj = Array.from(arguments)[0] || window,
arg = Array.from(arguments).slice(1),
key = Symbol(),
result
obj[key] = this
result = obj[key](...arg)
delete obj[key]
return result
}
bind函数
Function.prototype.bind_ = function() {
let obj = Array.from(arguments)[0] || window,
arg = Array.from(arguments).slice(1),
self = this
return function(){
let args=Array.from(arguments).slice(1)
return self.call(obj,[...arg,...args])
}
}
EventEmitter(收集发布)
class EventEmitter {
constructor() {
this.obj = {}
}
on(key, fn) {
let Events = []
Event.push(fn)
this.obj[key] = Event
}
emit(key, ...arg) {
let Events = this.obj[key]
if (Events.length) {
Events.forEach(i => i(...arg))
}
}
}
深拷贝（解决循环引用）
function clone(target, map = new WeakMap()) {
if (typeof target === 'object') {
let cloneTarget = Array.isArray(target) ? [] : {};
if (map.get(target)) {
return map.get(target);
}
map.set(target, cloneTarget);
for (const key in target) {
cloneTarget[key] = clone(target[key], map);
}
return cloneTarget;
} else {
return target;
}
};
dom节点的遍历
function one_(node) {
if (node.nodeType == 1) {
console.log(node.tagName.toLowerCase())
}
for (var i = 0; i < node.childNodes.length; i++) {
if (node.childNodes[i].nodeType === 1) {
one_(node.childNodes[i])
}
}
}
LRU算法
class Lru_cache {
constructor(max) {
this.max = max;
this.cache = new Map();
}
get(key) {
let value = this.cache.get(key);
if (!value) return;
this.cache.delete(key);
this.cache.set(key, value);
return value;
}
add(key, value) {
if (this.cache.size > this.max - 1) {
const keys = this.cache.keys().next().value;
this.cache.delete(keys);
}
this.cache.set(key, value);
}
}
es5继承
function Far(name){
this.name = name;
this.color = ["red","green","blue"];
}
Far.prototype.sayName = function(){
console.log(this.name);
};
function Son(name,age){
Far.call(this,name);
this.age = age;
}
Son.prototype=Object.creat(Far.prototype)
San.prototype.constructor = San
es6继承
class Big {
constructor(name) {
this.name = name
}
getName() {
return this.name
}
}
class Small extends Big {
constructor(name, sex) {
super(name)
this.sex = sex
}
getSex() {
return this.sex
}
}
var big = new Big('o(￣ヘ￣o＃)')
var small = new Small('o(￣ヘ￣o＃)', '♀')
console.log(big.getName())
console.log(small.getName())
手写new
function new_(fn,arg){
let obj={}
Object.getPrototypeOf(obj,fn.prototype)
fn.apply(obj,arg)
return obj
}
手写Object.create
function _create(obj) {
function C() {}
C.prototype = obj;
return new C();
}
手写Promise
class MyPromise {
constructor(fn) {
this.status = 'padding'
this.data = ''
this.error = ''
this.resolveArr = []
this.rejectArr = []
let resolve = (data) => {
setTimeout(() => {
if (this.status == 'padding') {
this.data = data
this.status = 'resolved'
this.resolveArr.forEach(i => i())
}
}, 0);
}
let reject = (error) => {
setTimeout(() => {
if (this.status == 'padding') {
this.error = error
this.status = 'rejected'
this.rejectArr.forEach(i => i())
}
}, 0);
}
fn(resolve, reject)
}
then(Onresolve, Onreject) {
if (this.status == 'resolved') {
return new MyPromise((resolve, reject) => {
let res = Onresolve(this.data)
if (res instanceof MyPromise) {
res.then(resolve, reject)
} else {
resolve(res)
}
})
}
if (this.status == 'rejected') {
return new MyPromise((resolve, reject) => {
let res = Onreject(this.error)
if (res instanceof MyPromise) {
res.then(resolve, reject)
} else {
resolve(res)
}
})
}
if (this.status == 'padding') {
return new MyPromise((resolve, reject) => {
this.resolveArr.push(() => {
let res = Onresolve(this.data)
if (res instanceof MyPromise) {
res.then(resolve, reject)
} else {
resolve(res)
}
})
this.rejectArr.push(() => {
let res = Onreject(this.error)
if (res instanceof MyPromise) {
res.then(resolve, reject)
} else {
resolve(res)
}
})
})
}
}
static resolve(data) {
return new MyPromise(resolve => resolve(data))
}
static reject(error) {
return new MyPromise(reject => reject(error))
}
}
手写reduce
Array.prototype.reduce_2 = function(fn, back) {
let arr = this
for (var i=0; i < arr.length; i++) {
return !back ? fn(arr[i], arr[i + 1], i + 1, arr) : fn(back, arr[i], i, arr)
}
}
手写map
Array.prototype.map_ = function(fn) {
let arr = this
let arr_ = []
for (let i = 0; i < arr.length; i++) {
arr_[i] = fn(arr[i], i, arr)
}
return arr_
}
手写filter
Array.prototype.filter_=function(fn){
let arr=this,
arr_=[]
for (let i = 0; i < arr.length; i++) {
if(fn(arr[i],i,arr)){
arr_[i]=arr[i]
}
}
return arr_
}
实现冒泡排序
function bubbing_(arr) {
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
}
}
}
return arr
}
实现选择排序
function select_(arr) {
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[j] < arr[i]) {
[arr[j], arr[i]] = [arr[i], arr[j]]
}
}
}
return arr
}
实现插入排序
function insert(array) {
for (let i = 1; i < array.length; i++) {
var j = i - 1;
while (j >= 0 && array[j] > array[i]) {
[arr[j], arr[i]] = [arr[i], arr[j]]
j--;
}
}
return array;
}
实现快速排序
function fast_(arr) {
let len = arr.length,
r = [],
l = [],
bsc = arr[0]
if (len < 2) {
return arr
}
for (let i = 1; i < len; i++) {
if (arr[i] < bsc) {
l.push(arr[i])
} else {
r.push(arr[i])
}
}
return [...k(l), bsc, ...k(r)]
}
取任意区间任意个任意值
function yi(mi, ma, k) {
if (mi > ma)[mi, ma] = [ma, mi]
let max = Math.floor(ma),
min = Math.ceil(mi),
o = new Set()
while (o.size < k) {
o.add(Math.floor(Math.random() * (max - min + 1)) + min)
}
let c = [...o].sort((a, b) => {
return a - b
})
let _c = c.reduce((a, b) => a + b, 0)
return _c
}