面试|【总结】（大厂面试常考手撕代码 —— JavaScript实现效果） javascript|前端|html5|面试|经验分

文章目录

一、Js实现拖动元素
二、Js实现once效果
三、Js实现深拷贝
- 1.通用方法
- 2. 对象、数组
- 3. 数组
四、实现fetch（Promise封装Ajax）

【面试|【总结】（大厂面试常考手撕代码 —— JavaScript实现效果）】
一、Js实现拖动元素

const div = document.getElementsByTagName('div')[0]//是否按下 let isDown = false //鼠标至边框 let numX = 0 let numY = 0//鼠标点下 div.onmousedown = (e) => { //计算鼠标至边框 numX = e.clientX - div.offsetLeft numY = e.clientY - div.offsetTop isDown = true }//鼠标移动 window.onmousemove = (e) => { if(isDown) { //移动后的左，上，偏移量 let nl = e.clientX - numX let nt = e.clientY - numY div.style.left = nl + 'px' div.style.top = nt + 'px' } }//鼠标弹起 div.onmouseup = () => { isDown = false }

二、Js实现once效果

let fn = function () { console.log(1) }function onece(fn) { let isFirst = true return function() { if(isFirst) { fn.apply(null,arguments) isFirst = false } else { return undefined } } } let b = onece(fn) b() //1 b() //undefined

三、Js实现深拷贝 1.通用方法

//方法一：通用方法 function deepClone(obj) { /*注意typeof无法判断null具体数据类型(会判断为object)，因此这里用call方法*/ if (typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean' || typeof obj === 'undefined' || Object.prototype.toString.call(null) === '[object Null]') { return obj } else if (Array.isArray(obj)) { let newArr = [] /*切记不能直接用这种方式：以免数组里又有对象（无法“深度克隆”） obj.forEach((item) => { newArr.push(item) }) */ for (let i in obj) { newArr.push(deepClone(obj[i])) } return newArr } else { let newOjb = {} for (let i in obj) { newOjb[i] = deepClone(obj[i]) } return newOjb } }

2. 对象、数组

//方法二：JSON.stringify（针对于对象） let obj = ['haha','lala'] let str = JSON.stringify(obj) let newObj = JSON.parse(str) obj[0] = '试试' console.log(obj,newObj); /* 1.可用于深度克隆：对象、数组 2.遇到对象里嵌套对象，可以“深度克隆”！！ 3.注意：使用JSON.stringify()以及JSON.parse()它是不可以拷贝 undefined ， function， RegExp 等等类型的 */

//方法三：Object.assign() var obj = { a:1, b:2 } var newObj = Object.assign({},obj) obj.a = 0 console.log(obj,newObj); //只用于对象或数组 //遇到对象里嵌套对象，无法“深度克隆”

3. 数组

//ES6 三点运算符 let arr = [1,2,3,4] let newArr = [...arr] arr[0] = 0 console.log(arr,newArr);

四、实现fetch（Promise封装Ajax）

//封装Ajax function myAjax(method, url, data) { return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest(); let method = method || 'GET' //为了防止无参，这里设置默认 let data = https://www.it610.com/article/data || null //规定请求 xhr.open(method, url, true) xhr.send(data)//当 readyState 属性发生变化时被调用的函数 xhr.onreadystatechange = () => { if (xhr.status === 200 && xhr.readyState === 4) resolve(xhr.responseText) else reject(xhr.responseText) }}) }myAjax("GET", "/some/url.json", null) .then(res => console.log(res))