前端大厂面试一点总结

最新推荐文章于 2023-11-23 18:08:44 发布

WEB前端含光

最新推荐文章于 2023-11-23 18:08:44 发布

阅读量361

点赞数

分类专栏：前端面试

本文链接：https://blog.csdn.net/Arui_0/article/details/106673795

版权

前端面试专栏收录该内容

102 篇文章 0 订阅

订阅专栏

一、前言

大家好！今天来跟大家分享一下冲刺大厂必会的手写代码篇，为了整个篇幅看起来更加舒适一些，今天这篇是搜集的手写代码，下一篇将会总结大厂的高频问答篇。请大家耐心等待ing…

本篇适用人群：正在处于面试阶段的你，或者正准备跳槽，或者平时工作中用到以下代码的…，都欢迎大家来给捧场。

本篇的代码都做了详细的注释，方便大家阅读与理解，如果仍有不理解的可以在评论区讨论一下。

开始让我们的遨游在代码的世界里吧~~~

二、代码篇

URL处理

实现效果：将地址栏中的URL中问号后面的内容变为对象的形式：http://www.baidu.com/search?name=li&age=18#student

{HASH: “student”, name: “li”, age: “18”}

1.1 使用数组中的方法实现

如果对下面案例中的正则不熟悉，可以查看这个正则篇来学习一下：正则学习

实现效果：把数组中的重复项去掉。例如： [1,2,3,4,2,1] => [1,2,3,4]

2.1 时间复杂度为O(n^2)的实现

Set 是ES6中一种没有重复项的数据结构：阮一峰老师ES6语法的讲解

let ary = [1, 2, 2, 3, 4, 2, 1, 3, 1, 3];
ary = Array.from(new Set(ary));
console.log(ary);
复制代码
3. 内置new的实现

var a = ?;
if (a == 1 && a == 2 && a == 3) {
console.log(‘ok’);
}
复制代码
//方案一
var a = {
n:0,
toString:function(){
return ++this.n;
}
}

//方案二
var a = [1,2,3];
a.toString = a.shift;

//方案三
var i = 0;
Object.defineProperty(window,‘a’,{
get(){
//只有获取a的值，就一定会触发get方法执行
return ++i;
}
})
复制代码
5. 内置call

Function.prototype.changeThis = function changeThis(context,…args){
if(context == null){
//：null和undefined在两个等号的时候相等，因为if后面，只要传递进来是undefined或者null都可以
context = window;
}
if(typeof context ! ‘object’ && typeof context !== ‘function’){
context = new context.constructor(context);
}
let uniqueKey = $${new Date().getTime()};
context[uniqueKey] = this;
let result = contextuniqueKey;
delete context[uniqueKey];
return result;
}
复制代码
6. 内置apply

Function.prototype.myApply = function (context) {
// 如果没有传或传的值为空对象 context指向window
if (context == null) {
context = window
}
let fn = mySymbol(context)
context[fn] = this //给context添加一个方法指向this
// 处理参数去除第一个参数this 其它传入fn函数
let arg = […arguments].slice(1) //[…xxx]把类数组变成数组，arguments为啥不是数组自行搜索 slice返回一个新数组
contextfn //执行fn
delete context[fn] //删除方法
}

复制代码
7. 内置bind

Function.prototype.bind = function (context) {
//返回一个绑定this的函数，我们需要在此保存this
let self = this
// 可以支持柯里化传参，保存参数
let arg = […arguments].slice(1)
// 返回一个函数
return function () {
//同样因为支持柯里化形式传参我们需要再次获取存储参数
let newArg = […arguments]
console.log(newArg)
// 返回函数绑定this，传入两次保存的参数
//考虑返回函数有返回值做了return
return self.apply(context, arg.concat(newArg))
}
}

复制代码
8. 防抖

函数的防抖debounce：不是某个事件触发就去执行函数，而是在指定的时间间隔内，执行一次，减少函数执行的次数。（在一定时间只能只能执行一次）

@Parma
func要执行的函数
wait间隔等待的时间
immediate在开始边界还是结束边界触发执行（true在开始边界）
@return
可被调用的函数
by 不要情绪 on 2020/05/24
*/
function debounce(func, wait, immediate) {
let result = null,
timeout = null;
return function (…args) {
let context = this,
now = immediate && !timeout;
clearTimeout(timeout); //重点：在设置新的定时器之前，要把之前设置的定时器都清除，因为防抖的目的是等待时间内，只执行一次
timeout = setTimeout(() => {
if (!immediate) result = func.call(context, …args);
clearTimeout(timeout);
timeout = null;
}, wait);
if (now) result = func.call(context, …args);
}
}
复制代码

节流

函数的节流（throttle）：为了缩减执行的频率，但不像防抖一样，一定时间内只能执行一次，而是一定时间内能执行多次

throttle：函数节流是为了缩减执行频率，当达到了一定的时间间隔就会执行一次
@params
```
 func:需要执行的函数
```
```
 wait:设置的间隔时间
```
@return
```
 返回可被调用的函数
```
by 不要情绪 on 2019/08/20
*/
let throttle = function (func, wait) {
let timeout = null,
result = null,
previous = 0; //=>上次执行时间点
return function (…args) {
let now = new Date,
context = this;
//=>remaining小于等于0，表示上次执行至此所间隔时间已经超过一个时间间隔
let remaining = wait - (now - previous);
if (remaining <= 0) {
clearTimeout(timeout);
previous = now;
timeout = null;
result = func.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(() => {
previous = new Date;
timeout = null;
result = func.apply(context, args);
}, remaining);
}
return result;
};
};

复制代码
10. 深克隆

不仅把第一级克隆一份给新的数组，如果原始数组中存在多级，那么是把每一级都克隆一份赋值给新数组的每一个级别

function cloneDeep(obj) {
// 传递进来的如果不是对象，则无需处理，直接返回原始的值即可（一般Symbol和Function也不会进行处理的）
if (obj === null) return null;
if (typeof obj !== “object”) return obj;

// 过滤掉特殊的对象（正则对象或者日期对象）：直接使用原始值创建当前类的一个新的实例即可，这样克隆后的是新的实例，但是值和之前一样
if (obj instanceof RegExp) return new RegExp(obj);
if (obj instanceof Date) return new Date(obj);

// 如果传递的是数组或者对象，我们需要创建一个新的数组或者对象，用来存储原始的数据
// obj.constructor 获取当前值的构造器（Array/Object）
let cloneObj = new obj.constructor;
for (let key in obj) {
// 循环原始数据中的每一项，把每一项赋值给新的对象
if (!obj.hasOwnProperty(key)) break;
cloneObj[key] = cloneDeep(obj[key]);
}
return cloneObj;
}

复制代码

image
11. 深比较

function _assignDeep(obj1, obj2) {
// 先把OBJ1中的每一项深度克隆一份赋值给新的对象
let obj = _cloneDeep(obj1);

// 再拿OBJ2替换OBJ中的每一项
for (let key in obj2) {
if (!obj2.hasOwnProperty(key)) break;
let v2 = obj2[key],
v1 = obj[key];
// 如果OBJ2遍历的当前项是个对象，并且对应的OBJ这项也是一个对象，此时不能直接替换，需要把两个对象重新合并一下，合并后的最新结果赋值给新对象中的这一项
if (typeof v1 === “object” && typeof v2 === “object”) {
obj[key] = _assignDeep(v1, v2);
continue;
}
obj[key] = v2;
}

return obj;
}
复制代码
12. 验证手机号

规则：

11 位

第一位是数字 1

第二位是数字 3-9 中的任意一位

let reg = /^1[3-9]\d{9}$/;
console.log(reg.test(‘13245678945’)); //true
console.log(reg.test(‘1324567895’)); //false
console.log(reg.test(‘12245678945’)); //false
复制代码
13. 验证是否是有效数字

规则：

开头可以有+ -

整数位：

如果是一位数可以是 0-9 任意数；

如果是多位数，首位不可以是 0；

小数位：如果有小数位，那么小数位后面至少有一位数字，也可以没有小数位

let reg = /¹?(\d|[1-9]\d+)(.\d+)?$/;
console.log(reg.test(‘0.2’)); //true
console.log(reg.test(‘02.1’)); //false
console.log(reg.test(‘20.’)); //false
复制代码
14. 验证密码

规则：

6-16 位组成

必须由数字字母组成

let reg = /^(?=.\d)(?=.[a-z])(?=.*[A-Z])[\d(a-z)(A-Z)]{6,16}$/;
复制代码
15. 验证真实姓名

规则：

必须是汉字

名字长度 2-10 位

可能有译名：·汉字

let reg = /²{2,10}(·[\u4E00-\u9FA5]{2,10})?$/;
复制代码
16. 验证邮箱

规则：邮箱的名字以‘数字字母下划线-.’几部分组成，但是-/.不能连续出现也不能作为开头 \w+((-\w+)|(.\w+))
;

@ 后面可以加数字字母，可以出现多位 @[A-Za-z0-9]+ ;

.com/.cn 等域名 .[A-Za-z0-9]+

let reg = /^\w+((-\w+)|(.\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/

复制代码
17. 验证身份证号

let reg =/^([1-9]\d{5})((19|20)\d{2})(0[1-9]|10|11|12)(0[1-9]|[1-2]\d|30|31)\d{3}(\d|x)$/i;
复制代码
18. 时间格式字符串

月日不足十位补零

换成年月日的格式

复制代码
20. 千分符

String.prototype.millimeter = function millimeter() {
return this.replace(/\d{1,3}(?=(\d{3})+$)/g, value => {
return value + ‘,’;
});
};
let str = “2312345638”;
str = str.millimeter();
console.log(str); //=>“2,312,345,638”
复制代码
21. 继承（一）原型继承

function Parent() {
this.x = 100;
}
Parent.prototype.getX = function getX() {
return this.x;
};

function Child() {
this.y = 200;
}
Child.prototype = new Parent; //=>原型继承
Child.prototype.getY = function getY() {
return this.y;
};
let c1 = new Child;
console.log(c1);
复制代码
22. 继承（二）call继承

复制代码
23. 继承（三）组合式继承

let c1 = new Child;
console.log(c1);

复制代码
24. 数组扁平化

[1, 2, [3], [4, 5, [6, [7, 8, 9]]]] => [1,2,3,4,5,6,7,8,9,]
var arr = [1, 2, [3], [4, 5, [6, [7, 8, 9]]]];
function flatten(arr) {
return arr.reduce((res, next) => {
return res.concat(Array.isArray(next) ? flatten(next) : next);
}, []);
}
console.log(flatten(arr));
复制代码
25. 改造代码，输出0-9

闭包的解决方案

for (var i = 0; i< 10; i++){
setTimeout(() => {
console.log(i);
}, 1000)
}
复制代码
for (let i = 0; i< 10; i++){
setTimeout(() => {
console.log(i);
}, 1000)
}
复制代码
26. 冒泡排序

}
return newAry;
}
var res = insertSort(ary);
console.log(res);
复制代码
29. 倒计时案例

let box = document.querySelector(’#box’),
content = document.querySelector(’#content’),
timer = null;
/*

每次页面刷新，必须从服务器拿到时间，才可以进行下面的事情
基于ajax异步去请求，请求成功才做
所以需要放在回调函数里面
为了防止回调地狱问题，可以使用promise
*/

//获取服务器的时间
function getServerTime() {
return new Promise(resolve => {
let xhr = new XMLHttpRequest;
xhr.open(‘get’, ‘./data.json?_=’ + Math.random());
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && /^(2|3)\d{2}$/.test(xhr.status)) {
let time = xhr.getResponseHeader(‘date’);
time = new Date(time);
resolve(time);
}
}
xhr.send(null);
});
}

//根据服务器时间计算倒计时
function computed(time) {
let target = new Date(‘2020/05/13 18:59:00’),
spanTime = target - time;
if (spanTime <= 0) {
//已经到底抢购的时间点了
box.innerHTML = ‘开始抢购吧！’
clearInterval(timer);
return;
}
//计算出毫秒差中包含多少小时、多少分钟、多少秒
let hour = Math.floor(spanTime / (60 * 60 * 1000));
spanTime = spanTime - hour * 60 * 60 * 1000;
let minutes = Math.floor(spanTime / (60 * 1000));
spanTime = spanTime - minutes * 60 * 1000;
let seconds = Math.floor(spanTime / 1000);
hour < 10 ? hour = ‘0’ + hour : null;
minutes < 10 ? minutes = ‘0’ + minutes : null;
seconds < 10 ? seconds = ‘0’ + seconds : null;
content.innerHTML = ${hour}:${minutes}:${seconds};
}

getServerTime().then(time => {
//获取到服务器的时间后
computed(time);
//每隔1秒，累加1
timer = setInterval(() => {
time = new Date(time.getTime() + 1000);
computed(time);
}, 1000);
});

复制代码
30. 随机验证码

//随机验证码：数字和字母组合，（四个数字和字母）
/*
=> 1先把验证码准备好
=> 2随机获取相应的索引值
=> 3获取元素
*/
var code = document.getElementById(“code”);
var btn = document.getElementById(“btn”);
code.innerHTML = getCode();
btn.onclick = function () {
code.innerHTML = getCode();
}
function getCode() {
var str = “qwertyuiopasdfghjklzxcvbnm” + “QWERTYUIOPASDFGHJKLZXCVBNM” + “0123456789”;
var result = “”;
//==> 索引值的范围：0—61
while (result.length < 4) {
var index = Math.round(Math.random() * 61);
var item = str[index];
if (result.indexOf(item) == -1) {
result += item;
}
}
return result;
}
复制代码
31. 选项卡实现

css
js
html

css样式
js行为
HTML结构

复制代码 * { margin: 0; padding: 0; list-style: none; }

#app {
width: 500px;
margin: 20px auto;
}
.list {
overflow: hidden;
position: relative;
top: 1px;
}
.list li {
width: 100px;
float: left;
border: 1px solid #333;
text-align: center;
margin-right: 10px;
height: 50px;
line-height: 50px;
cursor: pointer;
}
.list li.active {
background-color: crimson;
border-bottom-color: crimson;
}
.con li {
width: 100%;
border: 1px solid #333;
height: 300px;
line-height: 300px;
text-align: center;
background-color: crimson;
display: none;
}
.con li.active {
display: block;
}
复制代码
let list = document.querySelector(’.list’),
lists = list.querySelectorAll(‘li’),
con = document.querySelector(’.con’),
cons = con.querySelectorAll(‘li’);
for (let i = 0; i < lists.length; i++) {
lists[i].onclick = function () {
click(i);
};
}
function click(index) {
for (let i = 0; i < lists.length; i++) {
lists[i].className = ‘’;
cons[i].className = ‘’;
}
lists[index].className = ‘active’;
cons[index].className = ‘active’;
}
复制代码