几道常考的手写面试题

最新推荐文章于 2023-02-13 10:15:07 发布
最新推荐文章于 2023-02-13 10:15:07 发布
阅读量225 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yxorg/article/details/108765275
版权 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 手写实现Array.prototype.map
    function map(arr, mapCallback) {
      // 首先检查传递的参数是否正确
      if (!Array.isArray(arr) || !arr.length || typeof mapCallback !== 'function') {
        return []
      } else {
        // 每次调用此函数时，我们都会创建一个 result 数组
        // 因为我们不想改变原始数组。
        let result = []
        for (let i = 0; i < arr.length; i++) {
          result.push(mapCallback(arr[i], i, arr))
        }
        return result
      }
    }


    // 手动实现Array.prototype.filter
    function filter(arr, filterCallback) {
      if (!Array.isArray(arr) || !arr.length || typeof mapCallback !== 'function') {
        return []
      } else {
        // 每次调用此函数时，我们都会创建一个 result 数组
        // 因为我们不想改变原始数组。
        let result = []
        for (let i = 0; i < arr.length; i++) {
          // 检查 filterCallback 的返回值是否是真值
          if (filterCallback(arr[i], i, arr)) {
            // 如果条件为真，则将数组元素 push 到 result 中
            result.push(arr[i])
          }
        }
        return result
      }
    }

    // 手写实现reduce
    function reduce(arr, reduceCallback, initialValue) {
      if (!Array.isArray(arr) || !arr.length || typeof reduceCallback !== 'function') {
        return []
      } else {
        // 如果没有将initialValue传递给该函数，我们将使用第一个数组项作为initialValue
        let hasInitialValue = initialValue !== undefined
        let value = hasInitialValue ? initialValue : arr[0]
        // 如果有传递 initialValue，则索引从 1 开始，否则从 0 开始
        for (let i = hasInitialValue ? 0 : 1; i < arr.length; i++) {
          value = reduceCallback(value, arr[i], i, arr)
        }
        return value
      }
    }

    // 深拷贝
    function deepCopy(newObj, oldObj) {
      for (let k in oldObj) {
        var item = oldObj[k]
        // 判断数组
        if (item instanceof Array) {
          newObj[k] = []
          deepCopy(newObj[k], item)
          // 判断对象
        } else if (item instanceof Object) {
          newObj[k] = {}
          deepCopy(newObj[k], item)
        } else {
          newObj[k] = item
        }
      }
    }

    // 手写实现call
    Function.prototype.myCall = function (context) {
      // 判断调用对象
      if (typeof this !== 'function') {
        console.error('type error')
      }
      // 获取参数
      let args = [...arguments].slice(1)
      result = null
      // 判断context是否传入，如果为传入，设置成window
      context = context || window
      // 将调用函数设置成对象的方法
      context.fn = this
      // 调用函数
      result = context.fn(...args)
      // 将属性删除
      delete context.fn
      return result
    }


    // 手写实现apply
    Function.prototype.myApply = function (context) {
      if (typeof this !== 'function') {
        console.error('type error')
      }
      context = context || window
      let result = null
      context.fn = this
      // 调用方法
      if (arguments[1]) {
        result = context.fn(...arguments[1])
      } else {
        result = context.fn()
      }
      delete context.fn
      return result
    }
    // 手写实现bind
    Function.prototype.myBind = function (context) {
      // 判断调用对象是否为函数
      if (typeof this !== "function") {
        throw new TypeError("Error");
      }
      // 获取参数
      var args = [...arguments].slice(1)
      fn = this
      return function Fn() {
        // 根据调用方式，返回不同的值
        return fn.apply(this instanceof Fn ? this : context, args.concat(...arguments))
      }
    }


    // 函数柯理化
    // 是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。
    function curry(fn, args) {
      let length = fn.length
      args = args || []
      return function () {
        let subArgs = args.slice(0)
        // 拼接得到的所有参数
        for (let i = 0; i < arguments.length; i++) {
          subArgs.push(arguments[i])
        }
        // 判断参数长度是否满足函数所需参数的长度
        if (subArgs.length >= length) {
          // 执行函数
          return fn.apply(this, subArgs)
        } else {
          return curry.call(this, fn, subArgs)
        }
      }
    }

    // ES6实现
    function curry(fn, args) {
      return fn.length <= args.length ? fn(...args) : curry.bind(null, fn, ...args)
    }


    // 快速排序
    function quickSort(arr) {
      if (arr.length <= 1) {
        return arr
      }
      const cIndex = Math.floor(arr.length / 2)
      const index = arr.splice(cIndex, 1)
      var l = []
      var r = []
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] < index) {
          l.push(arr[i])
        } else {
          r.push(arr[i])
        }
      }
      return quickSort(l).concat(index, quickSort(r))
    }
    console.log(quickSort([1, 8, 4, 6, 5, 9, 2, 3, 15, 45])); // (10) [1, 2, 3, 4, 5, 6, 8, 9, 15, 45]


    // 冒泡排序
    function mySort(arr) {
      if (arr == null || arr.length <= 1) {
        return arr
      }
      for (var i = 0; i < arr.length - 1; i++) {
        var done = true
        for (var j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            var temp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
            done = false
          }
        }
        if (done) {
          break
        }
      }
      return arr
    }
    alert(mySort([1, 5, 4, 6, 8, 3, 2]))

    // 深拷贝
    function deepClone(newObj, oldObj) {
      for (let k in oldObj) {
        let item = oldObj[k]
      }
      if (item instanceof Array) {
        newObj[k] = []
        deepClone(newObj[k], item)
      } else if (item instanceof Object) {
        newObj[k] = {}
        deepClone(newObj[k], item)
      } else {
        newObj[k] === item
      }
    }
    // 手写Promise
    function myPromise(constructor) {
      let self = this;
      self.status = 'Pending'
      self.value = undefined
      self.reason = undefined
      function resolve(value) {
        if (self.status === 'Pending') {
          self.value = value
          self.status = 'resolved'
        }
      }
      function reject(reason) {
        if (self.status === 'Pending') {
          self.reason = reason
          self.status = 'rejected'
        }
      }
      try {
        constructor(resolve, reject)
      } catch (e) {
        reject(e)
      }
    }
    myPromise.prototype.then = function (onFulfilled, onRejected) {
      let self = this
      switch (self.status) {
        case 'resolved':
          onFulfilled(self.value)
          break
        case 'rejected':
          onRejected(self.reason)
          break
        default:
      }
    }

    // instanceof  原理
    function myInstanceof(left, right) {
      let prototype = right.prototype
      left = left.__proto__
      while (true) {
        if (left === null || left === undefined)
          return false
        if (prototype === left)
          return true
        left = left.__proto__
      }
    }

    // 函数节流
    function throttle(fn, delay) {
      var preTime = Data.now()
      return function () {
        var context = this
        args = arguments
        nowTime = Data.now()
        if (nowTime - preTime > delay) {
          preTime = Data.now()
          return fn.apply(context, args)
        }
      }
    }
    // 函数防抖
    function debounce(fn, wait) {
      var timer = null
      return function () {
        var context = this
        args = arguments
        if (timer) {
          clearTimeout(timer)
          timer = null
        }
        timer = setTimeout(() => {
          fn.apply(context, args)
        }, wait)
      }
    }


  </script>
</body>

</html>
yxorg
关注
2024年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
努力前行，总会成为自己心中的那道光
02-23 12万+
正所谓 金三银四 ，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。 那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！ 本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！
金九银十：20道前端手写面试题
java_beautiful的博客
08-10 1545
最后希望大家能理解这些题并知晓why，有些题，并不是单单只是用来考你。而是变相的让你理解这其中深藏的意义。以上的题目，我的答案并非就是最优答案。若你有更好的解决方法，请不要吝啬，大胆的敲到评论区！我会把你的解决方法补充到文章里面。...
前端面试题之手写代码
dpy521的博客
04-09 1000
面试中经常会遇到的手写代码系列 函数防抖(debounce) 概念:在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。 function debounce(fn, wait) { var timer = null; return function() { var context = this; var args = arguments; ...
Array.prototype.filter()的实现
weixin_30872789的博客
09-22 181
来源 今年某前端笔试的一道题，大概就是实现一遍filter，包括一个可以改变上下文的要求，其实就是改变this啦，跟原生的filter一样的功能跟参数。 解析 filter的功能就是过滤，传入一个函数作为条件，返回true则将元素加入最终返回的数组中。 实现 Array.prototype.filter = function(cb, context){ ...
一文帮你搞定90%的JS手写题
LuckyWinty的博客
05-22 322
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群还在害怕手写题吗，本文可以帮你扩展并巩固自己的JS基础，顺便搞定90%的手写题。在工作中还可以对常用的需求进行手写实现，比如深拷贝...
自己动手实现一个Array.prototype.filter？
SCUhzs
09-12 407
文章目录语法简单示例动手实现参考资料 语法 array.filter(function(currentValue,index,arr), thisValue) function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数 参数 描述 currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象 thisValue 可选。对象作为该执行回调时使用，传递给函数
手动实现一个filter
weixin_42652475的博客
02-09 291
手动实现一个数组的filter方法 let arr = [1,2,3,4,5,6]; Array.prototype.myFilter = function(callback){ let result = []; for(let i=0;i<this.length;i++){ if(callback(this[i])){ result.push(this[i]); } } return result; } let arr1 = arr.myFilter(function(item
集锦大厂面试常考的 前端手写题和 leetcode 算法题
最新发布
09-27
前端手写题集锦 记录大厂笔试，面试常考手写题，2022 年前端面试中常见的 leetcode 算法题, 致力打造最全的前端 JavaScript 手写题题库和答案的最优解
前端一面常考手写面试题整理
helloworld1024fd的博客
02-13 374
运行的字符串代码被恶意方（不怀好意的人）操控修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)其实是相同的，只是遍历的顺序相反，它是从数组的最后一项开始，向前遍历到第一项。函数处理过的对象，我们就可以方便地访问普通对象内部的深层属性。是一个危险的函数，他执行的代码拥有着执行者的权利。都有着动态编译js代码的作用，但是在实际的编程中并不推荐使用。在转换JSON的实际应用中，只需要这么做。渲染大数据时，合理使用。
前端工程师常考手写面试题指南
helloworld1024fd的博客
12-07 340
函数柯里化概念： 柯里化（Currying）是把接受多个参数的函数转变为接受一个单一参数的函数，并且返回接受余下的参数且返回结果的新函数的技术。1）粗暴版 2）柯里化解决方案 对于add(3)(4)(5)，其执行过程如下：先执行add(3)，此时m=3，并且返回temp函数；执行temp(4)，这个函数内执行add(m+n)，n是此次传进来的数值4，m值还是上一步中的3，所以add(m+n)=add(3+4)=add(7)，此时m=7，并且返回temp函数执行temp(5)，这个函数内执行add(m+n)，
面试题手写代码（很实用）
04-20
这是我面试了十三家所总结的手写代码题，希望能帮助您！
牛客刷题：手动实现数组filter方法
qq_45989814的博客
08-01 169
手动实现filter方法
JavaScript filter()用法
qq_44766377的博客
12-17 1723
MDN的定义 filter为数组中的每个元素调用一次callback函数，并利用所有使得callback返回 true 或等价于 true的值的元素创建一个新数组。callback只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过callback测试的元素会被跳过，不会被包含在新数组中。 callback被调用时传入三个参数： 元素的值 元素的索引 被遍历的数组本身 如果为filter提供一个thisArg参数，则它会被作为c...
Array.prototype.filter()
超超玄著
09-12 2035
Summary The filter() method creates a new array with all elements that pass the test implemented by the provided function. Syntax arr.filter(callback[, thisArg]) Parameters callbackFunc
手动实现JS数组中map、filter、reduce方法
weixin_46042787的博客
02-12 767
手动实现 Array.prototype.map 方法 map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果 function map(arr,callback){ // 检查传递的参数是否正确 if(!Array.isArray(arr) || !arr.length || typeof callback !== 'function'){ ...
实现Array.prototype.filter
weixin_50964668的博客
02-16 243
Array.prototype.my_filter = function(fn, context) { let resArr = [] const me = this const ctx = context ? context : this // 判断上下文 if (typeof fn !== 'function') { throw new Error(`${fn} is not a function`) } me.forEach((i
数组的方法之(Array.prototype.filter() 方法)
weixin_30784501的博客
03-13 319
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意：filter() 不会对空数组进行检测。 注意：filter() 不会改变原始数组。 转载于:https://www.cnblogs.com/xuzhudong/p/8554331.html...
2022必会的前端手写面试题
潇晨1998的博客
05-01 471
面试题视频讲解（高效学习）：进入学习 二、题目 1. 防抖节流 这也是一个经典题目了，首先要知道什么是防抖，什么是节流。 防抖： 在一段时间内，事件只会最后触发一次。 节流： 事件，按照一段时间的间隔来进行触发。 实在不懂的话，可以去这个大佬的Demo地址玩玩防抖节流DEMO // 防抖 function debounce(fn) { let timeout = null; return function () {
详细整理出2023前端面试常考的手写题
05-05
以下是一些可能会在2023前端面试中常见的手写题： 1. 实现一个事件订阅/发布模式 ```javascript class EventEmitter { constructor() { this.events = {}; } on(eventName, callback) { if (!this.events...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值