前記
前端不能說必會吧,emm,最好都會,其實每個都有很多種寫法,可以自行擴充套件
程式碼
debounce
function debounce(fn,wait = 50){
let timeId
return function(){
if(timeId){
clearTimeout(timeId)
}
timeId = setTimeout(fn(...arguments),wait)
}
}
複製程式碼
throttle
function throttle(fn, wait = 100) {
let pre
return function () {
if (!pre) {
pre = +new Date
}
let now = +new Date
if (now - pre > wait) {
pre = now
fn()
}
}
}
複製程式碼
flat
const flatten1 = function(arr){
while(arr.some(item=>Array.isArray(item))){
arr = [].concat(...arr)
}
return arr
}
const flatten2 = function(arr){
return arr.reduce((acc,cur)=>{
return Array.isArray(cur)?[...acc,...flatten2(cur)]:[...acc,cur]
},[])
}
const flatten3 = function(arr){
return arr.toString().split(',')//注意適用型別
}
複製程式碼
binary_search
var search = function(nums, target) {
let low = 0
let high = nums.length
let mod
while(high > low){
mod = Math.floor((low + high) / 2)
if(nums[mod] === target){
return mod
}else if(nums[mod] > target){
if(high !== mod){
high = mod
}else{
return -1
}
}else{
if(low !== mod){
low = mod
}else{
return -1
}
}
}
return -1
};
複製程式碼
mycall
Function.prototype.myCall = function (context, ...arg) {
if (typeof this !== 'function') {
throw new Error('不是函式')
}
let fn = Symbol()
context[fn] = this
let result = context[fn](...arg)
return result
}
複製程式碼
myapply
Function.prototype.myCall = function (context, ...arg) {
if (typeof this !== 'function') {
throw new Error('不是函式')
}
let fn = Symbol()
context[fn] = this
let result = context[fn](arg)
return result
}
複製程式碼
mybind
Function.prototype.myBind = function (context, ...arg) {
const _this = this
return function F() {
if (this instanceof F) {
return new _this(...arg, ...arguments)
}
return _this.apply(context, [...arg, ...arguments])
}
}
複製程式碼
new
function create(Constructor, ...arg) {
let obj = {}
obj = Object.create(Constructor.prototype)
let result = Constructor.apply(obj, arg)
return typeof result === 'object' ? result : obj
}
複製程式碼
sleep
function sleep(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms)
})
}
async function time() {
console.log(111)
await sleep(5000)
console.log(222)
}
複製程式碼
function sleep2(ms) {
let now = new Date().getTime()
let ful = new Date().getTime()
while (ful - now < ms) {
ful = new Date().getTime()
}
}
console.log(111)
sleep2(5000)
console.log(222)
複製程式碼
deepClone
function deepClone(obj){
function isObj(obj){
return(typeof obj === 'object' || typeof obj === 'function') && typeof obj !== null
}
if(!isObj(obj)){
throw new Error('不是物件')
}
let isArray = Array.isArray(obj)
let newObj = isArray ? [...obj] : {...obj}
Reflect.ownKeys(newObj).forEach((key)=>{
newObj[key] = isObj(obj[key]) ? deepClone(obj[key]) : obj[key]
})
return newObj
}
複製程式碼
quickSort
function quick(arr){
if(arr.length <= 1){return arr}
let index = Math.round(Math.random() * (arr.length - 1))
let right = []
let left = []
for(let i = 0; i < arr.length; i++){
if(i !== index){
if(arr[i] <= arr[index]){
right.push(arr[i])
}else{
left.push(arr[i])
}
}
}
return quick(right).concat(arr[index],quick(left))
}
複製程式碼
bubbleSort
function swap(arr, i, j){
let temp = arr[i]
arr[i] = arr[j]
arr[j] = temp
}
function bubble(arr){
for(let i = arr.length - 1; i >= 0; i--){
for(let j = 0; j < i; j++){
if(arr[j] > arr[j+1]){
swap(arr, j, j+1)
}
}
}
return arr
}
複製程式碼
selectionSort
function selectionSort(arr){
let length = arr.length
let minIndex, temp
for(let i = 0; i < length; i++){
minIndex = i
for(let j = i+1; j < length; j++){
if(arr[minIndex] > arr[j]){
minIndex = j
}
}
temp = arr[i]
arr[i] = arr[minIndex]
arr[minIndex] = temp
}
return arr
}
複製程式碼
trim
function trim(str){
return str.replace(/^\s* | \s*$/g, '')
}
複製程式碼
unique
function unique1(arr){
return arr.filter((item,index,arr)=>{
return arr.indexOf(item) === index
})
}
function unique2(arr){
return [...new Set(arr)]
}
function unique3(arr){
let obj = {}
let array = []
for(let i = 0; i < arr.length; i++){
obj[arr[i]] = 0
}
for(let key in obj){
array.push(key)
}
return array
}
複製程式碼
MyPromise && ajax
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'
function MyPromise(fn){
const that = this
that.state = PENDING
that.value = null
that.resolvedCallbacks = []
that.rejectedCallbacks = []
function resolve(value){
if(that.state === PENDING){
that.state = RESOLVED
that.value = value
that.resolvedCallbacks.map(cb => cb(value))
}
}
function reject(value){
if(that.state === PENDING){
that.state = REJECTED
that.value = value
that.rejectedCallbacks.map(cb => cb(value))
}
}
try{
fn(resolve,reject)
} catch(e){
reject(e)
}
}
MyPromise.prototype.then = function(onFulfilled, onRejected){
const that = this
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v
onRejected = typeof onRejected === 'function' ? onRejected: r => {throw r}
if (that.state === PENDING) {
that.resolvedCallbacks.push(onFulfilled)
that.rejectedCallbacks.push(onRejected)
}
if (that.state === RESOLVED) {
onFulfilled(that.value)
}
if (that.state === REJECTED) {
onRejected(that.value)
}
}
function get(url){
return new MyPromise((resolve, reject)=>{
let xhr = new XMLHttpRequest
xhr.open('get', url, true)
xhr.onreadystatechange = function(){
if(this.readyState === 4){
if(this.status === 200){
resolve(this.response, this)
}else{
let resJson = { code: this.status, response: this.response }
reject(resJson, this)
}
}
}
xhr.send()
})
}
get('http://api.wwnight.cn').then((value, that)=>{
console.log(value)
})
複製程式碼
lazyLoad
這個有兩種方法,都可以選
html
<body>
<div style="height:100vh;width: 100vw;"></div>
<div>
<img class="my-photo" alt="" data-src="http://img.wwnight.cn//image/1.png">
</div>
<div>
<img class="my-photo" alt="" data-src="http://img.wwnight.cn//image/2.png">
</div>
<div>
<img class="my-photo" alt="" data-src="http://img.wwnight.cn//image/3.png">
</div>
</body>
複製程式碼
第一種
function checkImgs(){
const imgs = Array.from(document.querySelectorAll('.my-photo'))
imgs.forEach(item => io.observe(item))
}
function loadImg(el){
if(!el.src){
const source = el.dataset.src
el.src = source
}
}
const io = new IntersectionObserver(ioes => {
ioes.forEach((ioe)=>{
const el = ioe.target
const intersectionRatio = ioe.intersectionRatio
if(intersectionRatio > 0 && intersectionRatio <= 1){
loadImg(el)
}
el.onload = el.onerror = ()=>io.unobserve(el)
})
})
複製程式碼
第二種
function inSight(el) {
const bound = el.getBoundingClientRect()
const height = window.innerHeight
return bound.top < height
}
const imgs = document.querySelectorAll('.my-photo')
function checkImg() {
console.log(1)
imgs.forEach(img => {
if (inSight(img)) {
loadImg(img)
}
})
}
function loadImg(el) {
if (!el.src) {
const source = el.dataset.src
el.src = source
}
}
function throttle(fn, wait = 100) {
let pre
return function () {
if (!pre) {
pre = +new Date
}
let now = +new Date
if (now - pre > wait) {
pre = now
fn()
}
}
}
window.onscroll = throttle(checkImg)
複製程式碼
後記
暫時寫了這麼多,有更新的話會再更新的