1.数组随机排序
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// function result(params) {
// for (let i = 0; i < params.length; i++) {
// let randomIndex = parseInt(Math.random() * params.length)
// //定义完随机数后我们开始把当前数据存起来用于给赋值后的随机数对应的数字
// let current = arr[i]
// //把随机的值赋值给当前下标
// arr[i] = arr[randomIndex]
// //现在arr[randomIndex]可以视为一个空数字把之前存好的给他
// arr[randomIndex] = current
// }
// //数据处理完后返回数组
// return arr
// }
//用sort
arr.sort(() => Math.random() - 0.5)
//sort里面ab当返回值为负数时就会交换ab的前后位置
console.log(arr);
// console.log(result(arr));2.请求排序不使用promise.All
function a() {
setTimeout(() => {
console.log('第一条数据加载成功');
fns('data1');
}, 1000)
}
function b() {
setTimeout(() => {
console.log('第二条数据加载成功');
fns('data2');
}, 1000)
}
function c() {
setTimeout(() => {
console.log('第三条数据加载成功');
fns('data3');
}, 1000)
}
//我这里提前准备好了三个请求模拟
//最好的方法就是用promise.all()
// Promise.all([a(), b(), c()]).then(result => {
// console.log(result);
// })
//当然我们不是用这个方法面试
//我们可以声明一个数组接收他们返回的值
let arr = []
function fns(data) {
arr.push(data)
if (arr.length == 2) {
c()
}
}
a()
b()2.1使用递归实现请求排序⭐
function makeRequest(url) {
return new Promise((resolve, reject) => {
// 发起请求
// ...
// 请求完成后调用resolve或reject
// ...
});
}
function sequentialRequests(urls) {
if (urls.length === 0) {
return Promise.resolve([]);
}
//注意此处是shift删除并返回删除的值，所以不用担心重复递归一个值
const url = urls.shift();
return makeRequest(url)
.then(response => {
return sequentialRequests(urls)
.then(responses => [response, ...responses]);
});
}
const urls = ['url1', 'url2', 'url3'];
sequentialRequests(urls)
.then(responses => {
console.log(responses); // 按请求顺序返回的结果数组
})
.catch(error => {
console.error(error);
});
sequentialRequests函数采用递归的方式，依次发起请求，并将返回结果按照请求顺序依次添加到结果数组中。当所有请求都完成后，最终返回结果数组。
3.两数之和⭐
//两数之和
//获取数组nums里面的和为num的两个数的下标
let nums = [1, 7, 8, 3, 11]
let num = 8
function twoNums(arr, num) {
for (let i = 0; i < arr.length; i++) {
//通过小学算术计算
//使用indexof找出加数的下标
let indexSum = arr.indexOf(num - arr[i])
//这里找到的下标不能等于-1等于-1就是没找到
//并且找到的下标不能等于当前下标
if (indexSum > -1 && indexSum !== i) {
return [i, indexSum]
}
}
}
console.log(twoNums(nums, num));4.消息订阅与发布者模式（观察者模式都是几乎一摸一样的思想）
class Observer {
//存储消息的地方-----------------------------消息队列-constructor是函数构造器
constructor() { this.message = {} }
//type看着是什么行为
//fn行为发生之后做什么事情
//注册消息的地方---------------------------
$on(type, fn) {
// this.message.type=fn
//也就是this.message.abc=handlerA
if (!this.message[type]) {
this.message[type] = []
}
this.message[type].push(fn)
}
//移除消息的地方
$off(type, fn) {
//判断有没有这个消息
if (!this.message[type]) return new Error('消息队列中没有找到这个消息')
//如果有这个消息的话有没有他的方法
if (!fn) return this.message[type] = undefined;//这里用delete会有点小bug所以用Undefined
//如果有方法就把ta过滤掉,不等于它的重新赋值给消息队列
this.message[type] = this.message[type].filter(item => item != fn)
}
//执行消息的地方
$emit(type) {
//判断有没有这个消息
if (!this.message[type]) return new Error('消息队列中没有找到这个消息')
//有的话直接调用执行
this.message[type].forEach(item => {
item()
});
}
}
const handler = new Observer()
handler.$on('abc', handlerA)
handler.$on('abc', handlerB)
handler.$on('abc', handlerC)
//使用emit
handler.$emit('abc')
//这种情况会把整个消息从消息队列中删除
// handler.$off('abc')
// 这种情况只会删除消息对应的函数不会删除abc这个数组
handler.$off('abc', handlerA)
function handlerA(params) {
console.log('这是handlerA');
}
function handlerB(params) {
console.log('这是handlerB');
}
function handlerC(params) {
console.log('这是handlerC');
}5.前端优化首页白屏加载时间长怎么解决
// 原因：css和js会阻塞页面和渲染，加载时间长会导致页面出现长时间白屏
//如何优化？
//DNS解析
//--DNS缓存优化，预加载，确定可靠的DNS服务器
//--优化精简代码结构Html,css文件和结构
// --将首屏css内敛到html中,尽量不使用内联js
//延迟首屏不需要的资源加载，预加载首屏所需要的图片