【无标题】Javascript面试超高频手写60题：11-20（持续更新中）

最新推荐文章于 2024-08-19 15:26:06 发布

前端晓晓

最新推荐文章于 2024-08-19 15:26:06 发布

阅读量188

点赞数

分类专栏：笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Dzp199903/article/details/125712462

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客涵盖了JavaScript中的一些重要编程技巧，包括数组去重的三种方法、模拟延迟操作、实现JSONP、版本号比较以及LRU缓存机制。还介绍了图片懒加载的工作原理和Ajax请求的实现。这些示例展示了JavaScript在实际开发中的应用。

摘要由CSDN通过智能技术生成

theme: channing-cyan

1.数组去重（三种方式）

    //方式一：使用set
   function removeSame1(arr) {
      return Array.from(new Set(arr))
    }
    
    
    //方式二：filter
    function removeSame2(arr) {
      return arr.filter((val,index) => {
        return arr.indexOf(val)===index
      });
    }
    
    
    //方式三：使用map
    function removeSame3(arr) {
      let m = new Map()
      let obj = arr.reduce((begin,now)=>{
        if(begin.has(now)) begin[now]
        else begin[now] = 1
        return begin
      },m)
      console.log(obj)
      let res = []
      for(let key in obj) {
        res.push(key)
      }
      return  res
    }

2.1s打印一个数字

//方式一；直接for循环
function secondOne(num) {
  for(let i=0;i<num;i++) {
    setTimeout(() => {
      console.log(i)
    }, 1000);
  }
}

//方式二：promise
function secondOne(i) {
  return new Promise((resolve,reject)=>{
    setTimeout(() => {
      resolve(i)
    }, 1000);
  })
}
async function list () {
   for(let i=0;i<5;i++)  {
    let num = await secondOne(i)
    console.log(num)
  }
}
list()

3.模拟sleep

function sleep(timer,fn) {
  return new Promise((resolve,reject)=>{
    setTimeout(() => {
      resolve(fn())
    }, timer*1000);
  })
}

4.jsonp

function jsonp (src,callback) {
  let oScript = document.createElement("script")
  oScript.src = src//后端接口地址
  document.body.appendChild(oScript)

  window.callback = function(data) {
    console.log("后端返回的数据",data)
  }
}

5.下划线转换大写

function downLinetoUpper(str) {
  //abc_def-->abcDef

  let arr = str.split("_")
  return arr.reduce((begin,now,index)=>{
    if(index===0) return begin+now

    let strs = now.split("")
    strs[0] = strs[0].toUpperCase()
    return begin+strs.join("")
  },"")
}

6.url转换对象

function urlParams(str) {
  str = str.split("?")[1]//截取参数部分字符串
  arr = str.split("&")
  return arr.reduce((begin,now)=>{
    let res = now.split("=")
    begin[res[0]] = res[1]
    return begin
  },{})
}

7.版本号比较

 function compareId(id1,id2) {
  //1.01  01.0001
  let arr1 = id1.split(".")
  let arr2 = id2.split(".")
  let min = Math.min(arr1.length,arr2.length)
  for(let i=0;i<min;i++) {
    if(Number(arr1[i]>arr2[i])) return 1
    else if(Number(arr1[i]<arr2[i])) return -1
  }
  for(let i=min;i<arr1.length;i++) {
    if(Number(arr1[i])>0) return 1
  }
  for(let i=min;i<arr2.length;i++) {
    if(Number(arr2[i])>0) return -1
  }
  return 0
}

8.LRU

class Lru {
  constructor(size) {
    this.size = size
    this.m = new Map()
  }
  set(key,val) {
    //1.判断是否存在
    if(this.m.has(key)) {
      //2.存在，先删除，再添加
      this.m.delete(key)
      this.m.set(key,val)
    }else {
      //3.不存在，判断是否满了
      if(this.m.size===this.size) {
        //4.满了，删除第一个。再添加
        this.m.delete(this.m.keys().next().value)
        this.m.set(key,val)
      } else {
        //5.没有满，插入
        this.m.set(key,val)
      }
    }
  }
  get(key) {
    if(this.m.has(key)) {
      let val = this.m.get(key)
      this.m.delete(key)
      this.m.set(key,val)
      return val
    } 
    return null
  }
}

9.图片懒加载（一般不会让手写，但是实现原理必须懂）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img data-src="1.jpg" />
  <img data-src="2.jpg" />
  <img data-src="3.jpg" />
  <script>
    //1.获取所有的图片
    let oImgs = document.querySelectorAll("img")

    //2.全局监听滚动事件
    window.addEventListener("scroll",()=>{
      //3.判断图片是否出现在浏览器的视口
      oImgs.forEach(item=>{
        if(item.getBoundingClientRect().top<window.innerHeight){
          //4.出现视口范围，图片的data-src属性的值赋值给src
          item.setAttribute("src",item.getAttribute("data-src"));
        }
      })
    })
  </script>
</body>
</html>

10.Ajax

function Ajax () {
  return new Promise((resolve,reject)=>{
    let xhr = new XMLHttpRequest();
    xhr.open("GET",url);
    xhr.send(null);
    xhr.onreadystatechange = function (e) {
      if(xhr.readyState===4){
        if(xhr.status===200)
          resolve(xhr.responseText);//获取数据
        else if(xhr.status===404)
          reject(new Error("地址错误"));
      }else{
        reject(new Error("请求错误"));
      }
    }
  })
}