前端手撕代码面试题

金凯枫

于 2023-01-17 08:21:16 发布

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_73596760/article/details/128711383

版权

1.手写flat 方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 准备一个数组
const arr = [[9], [8, [9]], [7, [99, [7, [12, [1], [33]]]]], 1, [2, [3, [4, [5]]]]];

//  arr.flat(Infinity)   Infinity 表示扁平化任意深度

// 第二种方法
function flat(arr) {
    return arr.reduce((acc,cur)=> acc.concat(Array.isArray(cur)? flat(cur) :cur),[])
}
const newArr = flat(arr)
console.log(newArr)
  </script>
</body>
</html>

第一种方法: arr.flat(Infinity) Infinity 表示扁平化任意深度

第二种方法: 利用reduce累加器自己调用自己

2.polyfill

(1) 手写filter polyfill

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //1.准备一个数组
    const arr = [1,3,5,7,9]
    //2.往原型上挂载
    Array.prototype.filter2 = function(callback) {
      //3.准备一个空数组接数据
      const newArr = []
      //4.遍历
      for(let i =0; i<this.length; i++) {
        /* const res = callback(this[i],this)
        if(res){
          newArr.push(this[i])
        } */
        callback(this[i],i,this) && newArr.push(this[i])
        //callback 参数 this[i] 代表每一项
        //callback 参数 i 代表数组下标
        //callback 参数 this 代表数组
      }
      return newArr 
    }
    const res = arr.filter2((item,index,originArr)=> {
      // 当这个函数的返回值为true的时候,保留item到新数组
      return item>=5
    })
    console.log(res)
  </script>
</body>
</html>

(2) 手写forEach polyfill

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //1.准备数组
    const arr = ['胡歌','王凯','朱亚文']
    //2.往原型上挂载
    Array.prototype.forEach2 = function(callback,_this=window) {
      for(let i = 0; i<this.length ; i++) {
        callback.call(_this,this[i], i, this)
      }
    }
    arr.forEach2(function (item,index,originArr) {
      console.log(item,index,originArr,this);
    })
  </script>
</body>
</html>

后续会持续更新......