前端---场景题

一个下拉框 200条数据怎么优化（默认展示10条）
60个请求（限制最多同时请求6个）请求并行方案
原生拖拽方案及实现细节（mouseMove、drag，drop） ✅ （有待继续完善）
数组遍历方法哪个快
手写函数实现数组。[12, 3, 24, 1, 932, 6423]按照首位排序
手写实现add函数满足 add(1)(2)(3)() 返回 6

2、60个请求（限制最多同时请求6个）请求并行方案

  <script>/*** 此问题目的为了解决类似http请求的并发量过大导致内存可能溢出的问题。1、同时执行任务数6个2、每执行一次就需要将请求 --3、当前任务队列执行完成之后，执行下一个4、所有任务添加到队列后，自动开始执行任务*/debuggerfunction concurrentPoll() {this.tasks = []; // 任务队列this.max = 10; // 最大并发数// 函数主体执行完后立即执行，由于setTimeout是macrotask（宏任务），promise是microtask（微任务）// 所以，addTask方法添加的函数会优先执行setTimeout(() => {this.run()}, 2000)}concurrentPoll.prototype.addTask = function (task) { // 原型添加任务方法this.tasks.push(task)}concurrentPoll.prototype.run = function () { // 原型任务运行方法if (this.tasks.length == 0) { // 判断是否还有任务return}const min = Math.min(this.tasks.length, this.max); // 取任务个数与最大并发数最小值console.log('min', min)for (let i = 0; i < min; i++) {this.max--; // 执行最大并发递减const task = this.tasks.shift(); // 从数组头部取任务task().then((res) => { // 重：此时可理解为，当for循环执行完毕后异步请求执行回调,此时max变为0debuggerconsole.log(res)console.log('res', this.max) // 0 1 2 3 4 5 6 7 8 9 / 10 11 12}).catch((err) => {console.log(err)}).finally(() => { // 重：当所有请求完成并返回结果后，执行finally回调，此回调将按照for循环依次执行，此时max为0.debuggerthis.max++; // 超过最大并发10以后的任务将按照任务顺序依次执行。此处可理解为递归操作。// 0++ = 1 0++ = 1 0++ = 1this.run(); //               1-- = 0  1-- = 0  1-- = 0// tasks.length  2        1        0console.log('finally', this.max)// 0 0 0 1 2 3 4 5 6 7之后执行.then,执行完之后再执行 8 9 10})}}const poll = new concurrentPoll(); // 实例for (let i = 0; i < 13; i++) { // 数据模拟poll.addTask(function () {return new Promise(function (resolve, reject) {// 一段耗时的异步操作resolve(i + '成功') // 数据处理完成// reject('失败') // 数据处理出错})})}</script>

3、原生拖拽方案及实现细节（mouseMove、drag，drop）

<script>
export default {name: 'drag',data() {return {afterData: ['', '', '', ''],beforeData: ['花', '好', '月', '圆'],resData: [['花', '好', '月', '圆'],['百', '年', '好', '合'],['一', '帆', '风', '顺']],beforeId: '',dragId: '',downMoveX: 0, // 按下的 div 移动的坐标downMoveY: 0,mouseX: 0, // 鼠标在 div中 x坐标mouseY: 0,}},mounted() {this.dragId = document.getElementById('drag')this.oldBlanks = document.querySelectorAll('.after')console.log('oldBlanks', this.oldBlanks)console.log('drag-offsetTop', this.dragId.offsetTop)},methods: {// handleDarg() {// },handleBeforeDown(e, id) {this.beforeId = document.getElementById(id)console.log('eeee->', e)const { offsetX, offsetY } = ethis.mouseX = offsetXthis.mouseY = offsetYthis.downMoveX = this.beforeId.offsetLeft     this.downMoveY = this.beforeId.offsetTopconsole.log('this.downMoveY',  this.downMoveY)const setDiv = this.beforeId.stylesetDiv.background = 'pink'setDiv.position = 'absolute'setDiv.top = this.downMoveY + 'px'setDiv.left = this.downMoveX + 'px'setDiv.width = '98px'setDiv.height = '98px'this.beforeId.addEventListener('mousemove', this.handleBeforeMove)console.log('beforeId', this.beforeId)},handleBeforeMove(e){console.log('9023', e)console.log('232', window.event)const { offsetX, offsetY, clientX, clientY } = elet moveY = clientY - this.dragId.offsetTop - this.mouseYlet moveX = clientX - this.dragId.offsetLeft - this.mouseXconsole.log('moveY-->', moveY)console.log('moveX-->', moveX)// 2、设置边界if (moveY <= 0) {moveY = 0} else if (moveY >= 500) {moveY = 500}if (moveX <= 0) {moveX = 0} else if (moveX >= 500) {moveX = 500}// 1、开始移动距离this.beforeId.style.top = moveY + 'px'this.beforeId.style.left = moveX + 'px'},handleBeforeUp() {if (this.beforeId) {this.handleDIvAdsorption()// this.beforeId.style = {}this.beforeId.removeEventListener('mousemove', this.handleBeforeMove)this.beforeId = ''this.mouseX = 0this.mouseY = 0this.downMoveX = 0  this.downMoveY = 0}},// 拖动的div，查看吸附哪个空白div上handleDIvAdsorption() {const whiteDivArea = this.oldBlanks[0].offsetWidth * this.oldBlanks[0].offsetHeightfor (let i = 0;i < this.oldBlanks.length; i++) {if (this.afterData[i] !== '') {continue;}const oldDiv = this.oldBlanks[i]const { offsetTop, offsetLeft } = this.beforeIddebuggerlet verticalLength = oldDiv.offsetHeight - ( offsetTop - oldDiv.offsetTop )console.log('verticalLength', verticalLength)let transverseLength = 0if (offsetLeft >= oldDiv.offsetLeft) {transverseLength = oldDiv.offsetWidth - (offsetLeft - oldDiv.offsetLeft)} else {transverseLength = oldDiv.offsetWidth - (oldDiv.offsetLeft - offsetLeft)}if (verticalLength > 0 && transverseLength > 0) {const occupiedArea = transverseLength * verticalLengthconsole.log('transverseLength', transverseLength)if (occupiedArea / whiteDivArea >= 0.5 ) {console.log('在指定区域，可以吸附')this.handleSetMouseDiv(oldDiv.offsetTop, oldDiv.offsetLeft)this.afterData.splice(i, 1, this.beforeId.innerText)return}console.log('不可以吸附')this.handleSetMouseDiv(this.downMoveY, this.downMoveX)}}},handleSetMouseDiv(top, left){const setDiv = this.beforeId.stylesetDiv.top = top + 'px'setDiv.left = left + 'px'}}
}
</script>