【js篇】二常见面试题

函数的柯里化

总结：思路，每次执行，判断参数是否齐全，如果不齐全，递归调用把原来的 arguments一起上去

scss 复制代码

      function curry(fn,...args){
        console.log("...args",args) //就是arguments
        // 判断fn需要的参数是否够了
        if(args.length >= fn.length){ //fn.length 是add函数的形参个数
          return fn(...args) // 收集参数齐所有的参数 即是arguments解构
        }
        // 递归调用
        return (...rest)=>{
          console.log('...rest',...rest)// rest就是当前调用的参数 arguments
          return curry(fn,...args,...rest) //递归调用把原来的 arguments一起上去 和当前的arguments一起 解构
        }
      }

      //案例一：
      const add =(x,y,z)=>x+y+z;
      const curryAdd=curry(add);
      let b=curryAdd(1)(2)(3)
      console.log(b) // 6

数组的扁平

bash 复制代码

      const arr = [
        {id: 1, name: '部门1', pid: 0},
        {id: 2, name: '部门2', pid: 1},
        {id: 3, name: '部门3', pid: 2},
        {id: 4, name: '部门4', pid: 3},
        {id: 5, name: '部门5', pid: 4},
      ]


      function changeFun(aray,id){
        let arr=[];
        for(let item of aray){
          if(item.pid==id){
            arr.push({...item,children:children(aray,item.id)})
          }
        }
        return aray
      }

数组的降维度

javascript 复制代码

    let arr12=[1,3,4,[5,6,7,[8,9]]]
    console.log('flat',arr12.flat(1)) //[1,3,4,5,6,7,[8,9]]
    console.log('flat',arr12.flat(Infinity))// [1,3,4,5,6,7,8,9]

去重

ini 复制代码

 let aray=[2,4,1,2,4,6,8,9,1]
    let setArray=new Set(aray)
    aray=[...setArray]
    console.log(aray) // [2, 4, 1, 6, 8, 9]

乱序

冒泡排序

arduino 复制代码

      // 数组排序（升和降）sort()
      // let aray=[2,4,1,6,8,9,20,21,18]
      // function riseNumber(a,b){ // 升序
      //   return a-b;
      // }
      // function dropNumber(a,b){
      //   return b-a
      // }
      // console.log(aray.

sort(riseNumber))//[1, 2, 4, 6, 8, 9, 18, 20, 21] // console.log(aray.sort(dropNumber)) //[21, 20, 18, 9, 8, 6, 4, 2, 1]

ini 复制代码

      // 冒泡排序
      // let aray=[2,4,1,6,8,9,20,21,18]
      // for(var i=0;i<aray.length-1;i++){
      //   let isSort=true;
      //   for(var j=0;j<aray.length-1-i;j++){
      //     if(aray[j]>aray[j+1]){
      //       isSort=false;
      //       let tmp=aray[j]
      //       aray[j]=aray[j+1]
      //       aray[j+1]=tmp
      //     }
      //   }
      //   if(isSort) break;
      // }

面试题一

const声明对象

虽然const变量不能修改指针，但是可以修改值，比如我们定义一个对象，我们就可以修改对象里的属性值，但是不可以重写整个对象。

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

``` ##### CSS ```css .waterfall-container { display: flex; justify-content: space-between; padding: 10px; } .waterfall-column { flex: 1; margin: 0 5px; } .waterfall-item { background-color: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px; padding: 10px; box-sizing: border-box; } ``` ##### JavaScript ```javascript function waterfallLayout(containerSelector, itemSelector, columns) { const container = document.querySelector(containerSelector); const items = document.querySelectorAll(itemSelector); container.innerHTML = ''; const columnElements = []; for (let i = 0; i < columns; i++) { const column = document.createElement('div'); column.className = 'waterfall-column'; container.appendChild(column); columnElements.push(column); } items.forEach(item => { let minHeightColumn = columnElements[0]; columnElements.forEach(column => { if (column.offsetHeight < minHeightColumn.offsetHeight) { minHeightColumn = column; } }); minHeightColumn.appendChild(item.cloneNode(true)); }); } waterfallLayout('.waterfall-container', '.waterfall-item', 3); window.addEventListener('scroll', () => { const { scrollTop, clientHeight, scrollHeight } = document.documentElement; if (scrollTop + clientHeight >= scrollHeight - 10) { loadMoreItems(); } }); function loadMoreItems() { const container = document.querySelector('.waterfall-container'); const newItems = [ '

New Item 1

', '

New Item 2

', '

New Item 3

', ]; newItems.forEach(item => { const div = document.createElement('div'); div.innerHTML = item; container.appendChild(div.firstChild); }); waterfallLayout('.waterfall-container', '.waterfall-item', 3); } ``` ## 手写poromise ```kotlin class MyPromise { constructor(executor) { this.status = 'pending'; // 初始状态 this.value = undefined; // 成功时的值 this.reason = undefined; // 失败时的原因 this.onFulfilledCallbacks = []; // 成功回调队列 this.onRejectedCallbacks = []; // 失败回调队列 // 定义 resolve 函数 const resolve = (value) => { if (this.status === 'pending') { this.status = 'fulfilled'; // 状态改为成功 this.value = value; // 保存成功值 // 执行所有成功回调 this.onFulfilledCallbacks.forEach(fn => fn()); } }; // 定义 reject 函数 const reject = (reason) => { if (this.status === 'pending') { this.status = 'rejected'; // 状态改为失败 this.reason = reason; // 保存失败原因 // 执行所有失败回调 this.onRejectedCallbacks.forEach(fn => fn()); } }; // 执行 executor try { executor(resolve, reject); } catch (error) { reject(error); // 如果 executor 抛出错误，直接 reject } } // 实现 then 方法 then(onFulfilled, onRejected) { // 如果 onFulfilled 不是函数，则创建一个默认函数 onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value; // 如果 onRejected 不是函数，则创建一个默认函数 onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; }; // 返回一个新的 Promise const promise2 = new MyPromise((resolve, reject) => { // 如果当前状态是 fulfilled if (this.status === 'fulfilled') { setTimeout(() => { try { const x = onFulfilled(this.value); // 执行成功回调 resolvePromise(promise2, x, resolve, reject); // 处理返回值 } catch (error) { reject(error); // 如果回调抛出错误，直接 reject } }, 0); } // 如果当前状态是 rejected if (this.status === 'rejected') { setTimeout(() => { try { const x = onRejected(this.reason); // 执行失败回调 resolvePromise(promise2, x, resolve, reject); // 处理返回值 } catch (error) { reject(error); // 如果回调抛出错误，直接 reject } }, 0); } // 如果当前状态是 pending if (this.status === 'pending') { // 将回调函数加入队列 this.onFulfilledCallbacks.push(() => { setTimeout(() => { try { const x = onFulfilled(this.value); // 执行成功回调 resolvePromise(promise2, x, resolve, reject); // 处理返回值 } catch (error) { reject(error); // 如果回调抛出错误，直接 reject } }, 0); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { const x = onRejected(this.reason); // 执行失败回调 resolvePromise(promise2, x, resolve, reject); // 处理返回值 } catch (error) { reject(error); // 如果回调抛出错误，直接 reject } }, 0); }); } }); return promise2; } } // 处理 then 返回值的函数 function resolvePromise(promise2, x, resolve, reject) { // 如果 promise2 和 x 是同一个对象，抛出 TypeError if (promise2 === x) { return reject(new TypeError('Chaining cycle detected for promise')); } // 如果 x 是一个 Promise if (x instanceof MyPromise) { x.then(resolve, reject); } else { // 否则直接 resolve resolve(x); } } ```