2024年前端校招字节跳动面试 第四篇，2024年最新阿里巴巴面试题及答案

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

.triangle{

width: 0;

height: 0;

border-top: 50px solid black;

border-right: 50px solid transparent;

border-left: 50px solid transparent;

}

9.设计一个简单的任务队列，要求分别在1,3,4秒后打印出”1“，”2“，”3“

---

new Quene()

.task(1000, () => {

console.log(1)

})

.task(2000, () => {

console.log(2)

})

.task(1000, () => {

console.log(3)

})

.start()

function Quene() { … }

A：看这代码显然是链式调用，那就是Promise.then了

function Quene() {

this.quene = [];

}

Quene.prototype.task = function (time, callback) {

this.quene.push({ time, callback });

return this;

};

Quene.prototype.start = function () {

const quene = this.quene;

let result = Promise.resolve();

quene.forEach((item) => {

result = result.then(() => {

return new Promise((resolve, reject) => {

setTimeout(() => {

resolve(item.callback());

}, item.time);

});

});

});

return result;

};

new Quene()

.task(1000, () => {

console.log(1)

})

.task(2000, () => {

console.log(2)

})

.task(1000, () => {

console.log(3)

})

.start()

要是没有题目的限制，用async await超简单

async function one() {

setTimeout(function() {

console.log(1);

}, 1000);}

async function two() {

setTimeout(function() {

console.log(2);

}, 3000);}

async function three() {

setTimeout(function() {

console.log(3);

}, 4000);}

async function run() {

var p1 = await one();

var p2 = await two();

var p3 = await three();

}

run();

10、http的七层模型

---

SSL协议到底工作在OSI模型中的哪一层

---

SSL协议位于TCP/IP协议与各种应用层协议之间，为数据通讯提供安全支持。SSL协议可分为两层：

1. SSL记录协议（SSL Record Protocol）：它建立在可靠的传输协议（如TCP）之上，为高层协议提供数据封装、压缩、加密等基本功能的支持。

2. SSL握手协议（SSL Handshake Protocol）：它建立在SSL记录协议之上，用于在实际的数据传输开始前，通讯双方进行身份认证、协商加密算法、交换加密密钥等。

会话层的功能和表示层的功能正好和SSL记录协议和握手协议的功能一样，我想这两层协议就应该分别工作在这上面！

11.给定一个升序整数数组[0,1,2,4,5,7,13,15,16]，找出其中连续出现的数字区间如下：

---

[“0->2”,”4->5“,“7”,“13”,“15->16”]

A:还算比较简单的算法题吧，还好当时做出来了，不然可能就止步于此。。也希望大家能谈点自己对这道题的解法

function Arr(arr) {

var len = arr.length,

j,

newArr = [],

str = ‘’;

for (var i = 0; i < len; i++) {

j = i;

if (arr[i] + 1 === arr[j + 1]) {

while (arr[j] + 1 === arr[j + 1]) {

str = ‘->’ + arr[j + 1];

j++;

}

str = arr[i] + str;

newArr.push(str)

i = j

} else {

newArr.push(arr[i].toString())

}

}

return newArr;

}

12、xss和跨站伪造攻击防御

---

参考

WEB安全之-CSRF（跨站请求伪造）

web安全之XSS攻击原理及防范

13、类数组对象是什么？

---

1.定义

满足两个条件的对象就是类数组。

• (1)有length属性，最好加上push方法

• (2)属性要为索引属性

如下：

var arr = {

“0”: “a”,

“1”: “b”,

“2”: “c”,

length: 3

};

类数组并不能直接使用数组的方法，需要用call()或者apply()调用数组的方法。、

类似于这样

var obj = {

“0”: “a”,

“1”: “b”,

“2”: “c”,

length: 3

};

Array.prototype.join.call(obj,“+”); //“a+b+c”

2. 类数组转化为数组

第一种方法：

var obj = {

“0”: “a”,

“1”: “b”,

“2”: “c”,

length: 3

};

var b = [];

for (var i = 0; i < obj.length; i++){

b.push(obj[i]);

} //[“a”,“b”,“c”];

第二种方法：

var obj = {

“0”: “a”,

“1”: “b”,

“2”: “c”,

length: 3

};

var

array = Array.prototype.slice.call(obj,0); //截取obj返回一个新数组

第三种方法，ES6中的方法，只要有length属性都可以应用此方法。

var obj = {

“0”: “a”,

“1”: “b”,

“2”: “c”,

length: 3

};

var array = Array.from(obj);

第四种方法：

var newArr = […obj]; //可以应用ES6的扩展运算符

15:、http的状态码

---

1xx 表示信息，服务器收到请求，需要请求者继续执行操作

100 Continue 信息型状态响应码表示目前为止一切正常, 客户端应该继续请求, 如果已完成请求则忽略

101 Switching Protocol（协议切换）状态码表示服务器应客户端升级协议的请求（Upgrade请求头）正在进行协议切换。

2xx 表示成功，操作被成功接收并处理

200 服务器成功处理了请求并提供请求的页面。

202 服务器已接受请求，但尚未处理。最终该请求可能会执行，也可能不执行。

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

---

1xx 表示信息，服务器收到请求，需要请求者继续执行操作

100 Continue 信息型状态响应码表示目前为止一切正常, 客户端应该继续请求, 如果已完成请求则忽略

101 Switching Protocol（协议切换）状态码表示服务器应客户端升级协议的请求（Upgrade请求头）正在进行协议切换。

2xx 表示成功，操作被成功接收并处理

200 服务器成功处理了请求并提供请求的页面。

202 服务器已接受请求，但尚未处理。最终该请求可能会执行，也可能不执行。

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

[外链图片转存中…(img-NgQyS8ey-1715628548464)]
[外链图片转存中…(img-ltVx50fW-1715628548465)]