前端面试手写题

深拷贝

// 深拷贝
function deepClone(ori) {let tar;if (typeof ori === 'object' && ori !== null) {tar = Array.isArray(ori) ? [] : {}for (let k in ori) {if (ori.hasOwnProperty(k)) {tar[k] = deepClone(ori[k])}}} else {tar = ori}return tar}

继承

// 圣杯模式实现继承
function Parent() { }
function Child() { }
function Buffer() { }
Buffer.prototype = Parent.prototype
Child.prototype = new Buffer()
Child.prototype.constructor = Child
Child.prototype.super_class = Parent
// ES6 类的继承
class Parent { }
class Child extends Parent {constructor() {super()}
}
// 组合继承
function Child() {Parent.call(this)
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

Promise

// Promise
const pending = Symbol('pending')
const fulfilled = Symbol('fulfilled')
const rejected = Symbol('rejected')class Promise {constructor(executor) {this.status = 'pending'this.value = undefinedthis.reason = undefinedthis.onFulfilledCbs = []this.onRejectedCbs = []function resolve(value) {if (this.status === 'pending') {this.status = 'fulfilled'this.value = valuethis.onFulfilledCbs.forEach(fn => fn())}}function reject(reason) {if (this.status === 'pending') {this.status = 'rejected'this.reason = reasonthis.onRejectedCbs.forEach(fn => fn())}}try {executor(resolve, reject)} catch (err) {reject(err)}}then(onFulfilled, onRejected) {onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => valueonRejected = typeof onRejected === 'function' ? onRejected : reason => reason// 异步返回promiselet promise = new Promise((resolve, reject) => {if (this.status === 'fulfilled') {setTimeout(() => {try {let x = onFulfilled(this.value)resolvePromise(promise, x, resolve, reject)} catch (e) {reject(e)}});}if (this.status === 'rejected') {setTimeout(() => {try {let x = onRejected(this.reason)resolvePromise(promise, x, resolve, reject)} catch (e) {reject(e)}});}if (this.status === 'pending') {this.onFulfilledCbs.push(() => {setTimeout(() => {try {let x = onFulfilled(this.value)resolvePromise(promise, x, resolve, reject)} catch (e) {reject(e)}});})this.onRejectedCbs.push(() => {setTimeout(() => {try {let x = onRejected(this.reason)resolvePromise(promise, x, resolve, reject)} catch (e) {reject(e)}});})}})return promise}// Promise构造器上方法static resolve(result) {return new Promise((resolve) => {resolve(result)})}static resolve(reason) {return new Promise((resolve, reject) => {reject(reason)})}static all(iterator) {return new Promise((resolve, reject) => {const final = []for (let item of iterator) {Promise.resolve(item).then(result => {final.push(result)if (final.length === iterator.length) {resolve(final)}}, reason => {reject(reason)})}})}static race(iterator) {return new Promise((resolve, reject) => {for (let item of iterator) {Promise.resolve(item).then(resolve, reject)}})}
}
function resolvePromise(promise, x, resolve, reject) {if (x === promise) {return reject(new TypeError('chaining cycle'))}let called;if (x !== null && (typeof x === 'function' || typeof x === 'object')) {try {let then = x.thenif (typeof then === 'function') {then.call(x, y => {if (called) returncalled = trueresolvePromise(promise, y, resolve, reject)}, err => {if (called) returncalled = truereject(err)})} else {if (called) returncalled = trueresolve(x)}} catch (err) {if (called) returncalled = truereject(err)}} else {resolve(x)}
}

防抖节流

// 防抖
function debounce(fn, delay, triggerNow) {let t = null;return function () {let _this = thisif (t) {clearTimeout(t)}if (triggerNow) {let exec = !tt = setTimeout(function () {t = null}, delay);if (exec) {fn.apply(_this, arguments)}} else {t = setTimeout(function () {fn.apply(_this, arguments)}, delay);}}
}
// 节流 不会立即执行
function throttle1(fn, delay) {let t = null, begin = Date.now();return function () {_this = thisclearTimeout(t)const cur = Date.now()if (cur - begin >= delay) {fn.apply(_this, arguments) // 就执行吧begin = cur} else {t = setTimeout(function () {fn.apply(_this, arguments)}, delay);}}
}
// 节流 且会立即执行
function throttle2(fn, delay) {let valid = true // 初始化开着return function () {if (!valid) returnvalid = false // 先关了t = setTimeout(function () {fn.apply(_this, arguments)value = true // 定时器里再开起来}, delay);}
}

call、bind、apply

// call、bind、apply
// fn.call(obj, ...args)
// 第一个参数是this指向
Function.prototype.call = function (context = window, ...args) {// this指向这个函数const fn = Symbol('fn')context[fn] = thiscontext[fn](...args) // 隐式绑定delete context[fn]
}
Function.prototype.apply = function (context = window, argsArr) {// this指向这个函数const fn = Symbol('fn')context[fn] = thiscontext[fn](...argsArr) // 隐式绑定delete context[fn]
}
Function.prototype.bind = function (context = window, ...args) {// this指向这个函数const fn = Symbol('fn')context[fn] = thisreturn function (..._args) {let arr = [...args, ..._args]context[fn](...arr)delete context[fn]}
}

排序算法

// 冒泡排序算法
function bubbleSort(arr) {let len = arr.lengthfor (let i = 0; i < len - 1; i++) {for (let j = 0; j < len - 1 - i; j++) {let a = arr[j],b = arr[j + 1]if (a > b) {[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]}}}return arr
}
console.log(bubbleSort([2, 1, 4, 0, 3]))
// 阮一峰分而治之 快排的思想 但在复杂度上没有真正的快排好 只能作为辅助理解
function quickSort(arr) {let len = arr.length// 非常重要 否则死循环if (len <= 1) {return arr}let pivotIndex = Math.floor(len / 2)let pivot = arr.splice(pivotIndex, 1)[0]let left = [], right = []for (let item of arr) {if (item < pivot) {left.push(item)} else {right.push(item)}}return [...quickSort(left), pivot, ...quickSort(right)]
}
console.log(quickSort([2, 1, 4, 0, 3]))function quickSort(arr, left, right) {var partitionIndex;if (left < right) {partitionIndex = partition(arr, left, right);quickSort(arr, left, partitionIndex - 1);quickSort(arr, partitionIndex + 1, right);}return arr;
}
// 找基准
function partition(arr, left, right) {var pivotIndex = left,index = pivotIndex + 1;for (var i = index; i <= right; i++) {if (arr[i] < arr[pivotIndex]) {swap(arr, i, index);index++; // index会变}}swap(arr, pivotIndex, index - 1);return index - 1;
}
function swap(arr, i, j) {[arr[i], arr[j]] = [arr[j], arr[i]]
}
console.log(quickSort(test, 0, test.length - 1))

// 斐波那契数列

function* test(n) {let [prev, cur] = [0, 1];for (let i = 0; i < n; i++) {yield prev;[prev, cur] = [cur, prev + cur];}
}
console.log(...test(15))

手写JSONP JSON with Padding

  • 有src属性的标签如script img iframe能跨域
  • 前端在得到了后端返回的内容jsonpCallback({“title”:“title1”})，发现里面是一段执行函数的语句
  • 不能用Symbol，不能转为字符串
  • 动态添加script，在定义在全局的callback中处理数据，并移除script
; (function (win) {function jsonp(url, params = {}, cb) {const src = Object.entries(params).map(([key, value]) => {return `${key}=${value}`}).join('&')const cbName = 'cb' + Date.now()const s = document.createElement('script')s.setAttribute('src', url + '?' + src + '&callback=' + cbName)document.body.appendChild(s)win[cbName] = function (res) {cb(res)document.body.removeChild(src)}}window.jsonp = jsonp
})(window);

三角形

setTimeout实现setInterval、clearInterval

  • IIFE
  • 全局的定时器id t
let t = null
function mysetInterval(cb, time) {;(function () {cb()t = setTimeout(arguments.callee, time)})();return t
}
t = mysetInterval(() => {console.log(1)
}, 500)
function myClearTnterVal(t) {clearTimeout(t)t = nullconsole.log(t)
}
setTimeout(() => {myClearTnterVal(t)
}, 1500)

lastPromise

编写一个高阶函数，这个高阶函数接受一个promise参数，然后返回一个函数。每次调用返回的函数的时候，只会输出最后一个promsie的结果。就像下面示例一样。

function lastPromise(promiseFunction) {// TODO
}// 示例
let count = 1;
// 这是一个函数，返回promise
let promiseFunction = () =>new Promise(rs =>setTimeout(() => {rs(count++);}));let lastFn = lastPromise(promiseFunction);lastFn().then(console.log); // 无输出
lastFn().then(console.log); // 无输出
lastFn().then(console.log); // 3

let count = 1;
// 这是一个函数，返回promise
let promiseFunction = () =>new Promise(rs =>setTimeout(() => {rs(count++);}));
function lastPromise(promiseFunction) {// 返回函数 函数有一个then方法let mC = 0return function () {mC++function then(cb) {promiseFunction().then(res => {if (mC == res) {cb(res)}})}return { then }}
}
let lastFn = lastPromise(promiseFunction)
lastFn().then(console.log)
lastFn().then(console.log)
lastFn().then(console.log)

animation动画 transition过渡 transform转换

画三角形

  • 没宽高，看到的是边
  • 边有left right top bottom 要分开写
  • 左边是左上三角 右边是右上三角
  • 下边是一个正三角
  • 上边是一个倒三角
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

正方形

  1. vw
  2. 设置宽度，padding-top div里写字会撑高

单链表循环
快速排序
算24点

从左到右动画

  • 不理解为何定位做不到抛物线效果，没有过渡
  • 用transform就好，有移动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<style>div {width: 50px;height: 50px;background: red;border-radius: 50%;position: absolute;animation: mymove 5s infinite;}@keyframes mymove {from {left: 0px;}to {left: 300px;}}
</style>
<body><div></div></div>
</body>
</html>

抛物线/贝塞尔曲线动画 没用到定位 用的是transform

  • animation-timing-function控制直线/曲线轨迹
  • linear：对角线运动
  • 我的理解：ease-in缓慢开始 ease-out缓慢结束
  • ease相关：抛物线运动ease-in ease-out (_
  • ease-out ease-in：铅球 T)
  • 需要2元素-2动画分别控制水平/竖直方向
  • span和span:after
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素弧线运动</title><style>.box{width: 400px;height: 400px;border: 2px solid #ff8800;}span{display: block;width: 40px;height: 40px;border: 1px solid #222;animation: center1 2s linear forwards;}span:after{content: '';display: block;width: 40px;height: 40px;border-radius: 20px;background: greenyellow;animation: center2 2s linear forwards;}@keyframes center1 {to{transform: translateX(360px)}}@keyframes center2 {to{transform: translateY(360px)}}</style>
</head>
<body>
<div class="box"><span></span>
</div>
</body>
</html>

三角形翻转

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>三角形翻转</title><style>.box {width: 400px;height: 400px;border: 2px solid #ff8800;}span {display: block;width: 40px;height: 40px;/* border: 1px solid #222; *//* 隐藏了 */animation: center1 2s ease-out forwards;}span:after {content: '';display: block;width: 0;height: 0;border-top: 40px solid transparent;border-right: 40px solid greenyellow;animation: center2 2s ease-in forwards;}@keyframes center1 {to {transform: translateX(360px)}}@keyframes center2 {to {transform: translateY(360px) rotate(360deg)}}</style>
</head><body><div class="box"><span></span></div>
</body></html>

翻牌

  • js实现，因为是点击事件触发的
  • 正反面的rotateY都是减小的 正面0 → -180 反面180 → 0
  • 正面一开始层级高 backface-visibility:hidden
  • perspective: 看起来更有动效 2000px离远一点，太近长度变化太夸张
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>翻牌</title><style>div {position: absolute;width: 200px;height: 350px;line-height: 350px;text-align: center;transition: all 3s;perspective: 3000px;}.front {background: gainsboro;transform: rotateY(0);z-index: 1;backface-visibility: hidden;}.back {background: goldenrod;transform: rotateY(180deg);}</style>
</head><body><div class="box"><div class="front">正面</div><div class="back">反面</div></div><script>const oBox = document.getElementsByClassName('box')[0]console.log('oBox', oBox)oBox.onclick = function(){const oFront = document.getElementsByClassName('front')[0]const oBack = document.getElementsByClassName('back')[0]oFront.style = 'transform:rotateY(-180deg)'oBack.style = 'transform:rotateY(0)'}</script>
</body></html>

用reduce实现map

  • reduce做累加可不能初始传[]进去，[]的toString为’’，最后reduce的结果会变成字符串join
const arr = [1, 2, 3, 4]
// arr.map(callback) 遍历每个元素 返回[] cb：item index arr
Array.prototype.myMap = function (cb) {const list = []this.reduce((prev, cur, index) => {const r2 = cb(cur, index, this)list.push(r2)}, [])// reduce初始从[]开始，保证index从0开始return list}
const res = arr.myMap((item, index, list) => {return item * 2
})
console.log(res)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/250926.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

node --- 使用express.Router与body-parser

node --- 使用express.Router与body-parser

express框架提供了一个Router方法,用于监听路由 // 命令行(windows*64) npm install express --save// router.js const express require("express"); // 定义路由 const router express.Router();// 处理http://host:port/students/ 路由(GET方法) router.get…
阅读更多...
python基础1 第一天

python基础1 第一天

TEST 1 阿斯蒂芬 day1test1 while 1&#xff1a;print&#xff08;333&#xff09; import randomprint转载于:https://www.cnblogs.com/shuangzhu/p/9243853.html
阅读更多...
微软认知服务应用秘籍 – 漫画翻译篇

微软认知服务应用秘籍 – 漫画翻译篇

概述 微软认知服务包括了影像、语音、语言、搜索、知识五大领域&#xff0c;通过对这些认知服务的独立或者组合使用&#xff0c;可以解决很多现实世界中的问题。作为AI小白&#xff0c;我们可以选择艰难地攀登崇山峻岭&#xff0c;也可以选择像牛顿一样站在巨人的肩膀上。本章节…
阅读更多...
01 React初步认知、React元素、渲染、工程化

01 React初步认知、React元素、渲染、工程化

定义 react&#xff1a;用于构建用户界面的 JavaScript 库 &#xff08;仅负责View层渲染、应在视图上体现交互逻辑&#xff09;vue&#xff1a;渐进式JavaScript 框架&#xff08;MVVM&#xff09; 使用 引入CDN脚本添加根容器 div #app创建React组件 ReactDOM.render Re…
阅读更多...
node --- 在express中配置使用模板引擎(art-template)

node --- 在express中配置使用模板引擎(art-template)

下载依赖: npm install --save art-template express-art-template配置: // app.js const express require("express"); const app express(); app.engine("html", require("express-art-template"));使用: 例如处理浏览器GET请求 /students…
阅读更多...
PAM认证机制

PAM认证机制

一、PAM简介 Sun公司1995年开发的一种与认证相关的通用框架机制&#xff0c;PAM只关注如何为服务验证用户的API&#xff0c;通过提供一些动态链接库和一套统一的API&#xff0c;将系统提供的服务和该服务的认证方式分开&#xff1b;PAM只是一个框架而已&#xff0c;自身不做认证…
阅读更多...
02 JSX学习

02 JSX学习

使用vite处理jsx vite引入的脚本必须是ESM的 npm init -y yarn add vite package.json 添加vite命令 index.html引入jsxJSX是什么 一种标签语法&#xff0c;在JS基础上进行的语法扩展不是字符串、也不是HTML是描述UI呈现与交互的直观的表现形式JSX被编译后会生成React元素 &am…
阅读更多...
使用FreeCookies 控制浏览器cookies及修改http响应内容

使用FreeCookies 控制浏览器cookies及修改http响应内容

FreeCookies 插件安装 1&#xff1a;您的计算机需要已经安装Fiddler &#xff08;如未安装&#xff0c;请至官网下载安装 http://docs.telerik.com/fiddler/configure-fiddler/tasks/configurefiddler&#xff09; 2&#xff1a;进入Fiddler安装目录下的Scripts目录下&#xff…
阅读更多...
node --- 使用node连接mysql

node --- 使用node连接mysql

1.确保下载了mysql,且mysql处于打开状态. 2.确保下载了node,并成功安装:https://nodejs.org/en/ (小黑窗 node -v 查看) 3.安装node操作mysql的依赖包: # 命令行 npm install --save -mysql# 注:如果没有package.json 建议先使用 npm init -y 初始化正题 // app.js// 1. 引…
阅读更多...
03 渲染元素ReactDOM.render

03 渲染元素ReactDOM.render

React与ReactDOM是2个不同的库&#xff0c;根节点内的所有内容&#xff08;和DOM更新、渲染相关&#xff09;由ReactDOM来管理一个React应用只有一个根节点用ReactDOM.render将React元素渲染到根节点 ReactDOM.render 参数1 React元素&#xff08;React.createElement(类组件/…
阅读更多...
javascript --- 异步按顺序执行

javascript --- 异步按顺序执行

使用promise可以很优雅的封装一个异步函数,使其按指定顺序执行: // 异步读取文件操作 const fs require("fs"); function promiseReadFile(url) {return new Promise(function (resolve, reject) {fs.readFile(url, function(err, data) {if(err) {reject(err);} e…
阅读更多...
web提高：负载均衡

web提高：负载均衡

1、集群 1、为什么建议在阿里云购买负载均衡 非常便宜&#xff0c;又好用&#xff0c;有稳定&#xff0c;有简单。自己搭建不了负载均衡&#xff0c;因为共有云不支持组播跑不了vrp协议。你不会集群的概念&#xff0c;你还是蒙蒙的。2、为什么使用集群&#xff1f; 1、小规模　…
阅读更多...
node --- 一个很好用的包json-server

node --- 一个很好用的包json-server

这个第三方包,可以将json文件暴露出来,用http获取. (data.json如下) 下载依赖: npm install --g json-server查看是否含有json-server json -sever --version启动json-server 参考:https://www.npmjs.com/package/json-server
阅读更多...
利用ionic3进行上一行和左一行不动，中间移动的功能

利用ionic3进行上一行和左一行不动，中间移动的功能

首先在html中的写法是 <ion-header><ion-navbar><ion-title>历史数据</ion-title></ion-navbar></ion-header><ion-content ><div style"display:flex;width:625px;"><div class"head">地区</di…
阅读更多...
jquery --- 阻止表单默认的提交行为,标准化表单的数据

jquery --- 阻止表单默认的提交行为,标准化表单的数据

表单如下: // .html <form id"topics_new_form" method"post" action"/topics/new"><div class"form-group"><label for"exampleInputEmail1">选择模块</label><selecet class"form-contr…
阅读更多...
javascript --- spa初体验

javascript --- spa初体验

首先使用express创建一个简单的服务器 创建文件夹 be-project # (确保安装了node,并配置好了环境) 在be-project目录下(命令行执行) npm init -y npm install --save express body-parse npm install --global nodemon// app.js const express require("express");…
阅读更多...
python学习HTML之CSS(2)

python学习HTML之CSS(2)

1、边框的属性设置 PS&#xff1a;边框的高度和宽度可以采用百分比&#xff0c;但是高度方向的百分比基本无用&#xff0c;因为基数没定&#xff0c;参考没意义&#xff01;&#xff01; 2、内边距和外边距 3、在右下角添加一个“回顶部”的标签。 <div></div>中的…
阅读更多...
06 事件处理函数绑定与事件对象

06 事件处理函数绑定与事件对象

事件处理函数绑定 DOM事件处理 addEventListener or onclick function(){} 纯小写React元素也采用了类似DOM0标准中的事件属性定义的方法 小驼峰 JSX <button onClick{ this.doSth }></button>直接创建React元素 React.createElement(button,{onClick: { this.…
阅读更多...
07、08 条件渲染、列表渲染

07、08 条件渲染、列表渲染

条件渲染 React没有像v-if、v-show这样的指令&#xff0c;需要使用JSX表达式组合而成 // 与运算 三目 // 判断表达式一定是false/null/undefined时才不会被渲染&#xff0c;0、空字符串、NaN会显示 // 如果render函数返回null&#xff0c;不会进行任何渲染 ......state {showL…
阅读更多...
面向对象命名空间、组合

面向对象命名空间、组合

一 类命名空间与对象、实例的命名空间 创建一个类就会创建一个类的名称空间&#xff0c;用来存储类中定义的所有名字&#xff0c;这些名字称为类的属性 而类有两种属性&#xff1a;静态属性和动态属性 静态属性就是直接在类中定义的变量动态属性就是定义在类中的方法class Pers…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023