记录--前端实习生的这个 bug 被用做了一道基础面试题

这篇具有很好参考价值的文章主要介绍了记录--前端实习生的这个 bug 被用做了一道基础面试题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--前端实习生的这个 bug 被用做了一道基础面试题

前言

测试发现了一个问题,简单描述问题就是通过函数删除一个数组中多个元素,传入的参数是一个数组索引。

然后发现实际效果有时删除的不是想要的内容。

具体 Bug 代码实现:

const arr = [1,2,3,4,5,6,7];
const removeData = (rowIndex:Array<number>)=>{
    if(Array.isArray(rowIndex)){
        rowIndex.forEach((index)=>{
            arr.splice(index,1)
        })
    }
}
removeData([1,4]); 
console.log(arr); // 输出结果 [1,3,4,5,7]
// 期望输出结果 [1,3,4,6,7]

上面代码出现问题的原因是 splice 会改变原始数组的,然后导致索引偏移,不知道有没有同学出过类似问题。

因为这个 bug 我发现有些同学基础该是比较差,导致一些不必要的问题,于是把它变成了一道基础面试题,注意考基础,同时删除数组中的多个元素利用索引数组有多少种方式,把可以想到的方法都写一下哦(其实不是为了难为人,知识想考察一下面试者javaScript的基础编写能力) 接下来介绍这几种方法,欢迎补充

方法一:先倒序后删除

这种方式将参数索引数组按照从大到小排序,避免了删除元素导致的索引偏移

const arr = [1,2,3,4,5,6];
const removeMultipleElement = (rowIndex)=>{
    // 先倒序
    if(Array.isArray(rowIndex)){
        rowIndex = rowIndex.sort((a,b)=>b-a);
        rowIndex.forEach((rowIndex)=>{
            arr.splice(rowIndex,1);
        })
    }
}
removeMultipleElement([1,4]);
console.log(arr);

方法二:使用filter生成新数组

使用 filter 生成新数组,并且结合 includes 。(注意 filter 过滤的内容是浅拷贝过程)

 
let arr = [1,2,3,4,5,6];
const removeMultipleElement = (rowIndex)=>{
    if(Array.isArray(rowIndex)){
        arr =  arr.filter((_,index)=>!rowIndex.includes(index))
    }
}
removeMultipleElement([1,4]);
console.log(arr);

方法三:使用reduce生成新数组

使用 reduce 和 includes 函数,也会生成新数组

let arr = [1,2,3,4,5,6];
const removeMultipleElement = (rowIndex)=>{
    if(Array.isArray(rowIndex)){
        arr = arr.reduce((prev,current,currentIndex)=>{
            if(!rowIndex.includes(currentIndex)){
                prev.push(current)
            }
            return prev
        },[])
    }
}
removeMultipleElement([1,4]);
console.log(arr);

方法四:生成新数组,判断用Set.has 替换 includes

仍然会生成新数组,只是 includes 判断使用 set.has 替换,set.has 判断会比 includes 的性能好一些,但是也要考虑数组数据量的大小,如果只是几个值,可以不考虑

let arr = [1,2,3,4,5,6];
let newArr = [];
const removeMultipleElement = (rowIndex)=>{
  const rowIndexSet = new Set(rowIndex);
  arr.forEach((item,index)=>{
      if(!rowIndexSet.has(index)){
          newArr.push(item)
      }
  })
}
removeMultipleElement([1,4]);
console.log(newArr);

方法五:标记删除法加 filter

创建一个与原始数组相同长度的布尔数组 markedForDeletion,用于标记需要删除的元素。然后,我们遍历索引数组,将对应的标记设置为 true。最后,我们使用 filter 方法创建一个新数组,只保留未被标记为删除的元素。

let arr = [1,2,3,4,5,6];
const removeMultipleElement = (rowIndex)=>{
   const markedForDeletion = new Array(arr.length).fill(false);
   for(const index of rowIndex){
       markedForDeletion[index] = true;
   }
   arr = arr.filter((_,index)=>!markedForDeletion[index])
}
removeMultipleElement([1,4]);
console.log(arr)

本文转载于:

https://juejin.cn/post/7272290608655859731

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--前端实习生的这个 bug 被用做了一道基础面试题文章来源地址https://www.toymoban.com/news/detail-748263.html

到了这里,关于记录--前端实习生的这个 bug 被用做了一道基础面试题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微软 苏州STCA 2022暑期实习生 平行面+终面 面经

    博主背景 中流985软件工程专业本科,acm银牌选手,无实习经历,无项目。 这些部分是我在和一起参与面试的人沟通的时候了解到的,和大家做个分享,希望能帮助到各位。 代码能力 这个不用多说,代码能力越强越好。 沟通能力 这个点是很重要但是很容易被人忽略的一个点

    2024年02月05日
    浏览(51)
  • ChatGPT的插件能用了,每月 20 美元的实习生真香

    哈喽嗨!你好,我是小雨青年,一名 追赶 AI 步伐的程序员。 自从上周 OpenAI 官宣了即将开放插件给 Plus 用户以来,这三天我就每天都会刷新ChatGPT 设置页面。 直到今天早上,插件终于面向我的账户开放啦! 这真是,泰裤辣! 作为本次启用插件的早期会员用户,首先我向大家

    2024年02月05日
    浏览(63)
  • 计算机视觉实习生面经(百度 | 地平线 | 小米 | 旷视 | 快手)

    一面 1.处理样本不平衡的方法 (1) Bootstrapping :训练随机森林,对于每一个树就是采样booststraping方法采样,也算是随机森林的其中一个随机性表现。再比如bagging方法,也是基于该有放回重采样方法。 (2) 数据扩充 :数据降采样 (3) Focal Loss :对不同样本预测错误的惩罚权重不同

    2024年02月08日
    浏览(43)
  • 关于.Net和Java的看法——我见过最牛的一个小实习生经历

    笔者( 小方同学在学习 )是一个专科院校的一名普通学生,目前就职于某三线城市的WEB方面.Net开发实习生,在找实习期间和就业期间的一些看法,发表此文,纯个人想法,欢迎讨论,指正!哈哈轻点喷~ 在校学习技术方面也是.Net方面,所以实习就是.Net开发实习生。我也很喜

    2023年04月08日
    浏览(49)
  • 模型应用系实习生-模型训练笔记(更新至线性回归、Ridge回归、Lasso回归、Elastic Net回归、决策树回归、梯度提升树回归和随机森林回归)

    本次训练的变量是一致对应的,训练准备通过后,后续建模都不会有报错的! scikit-learn包以及镜像 必须全部为数字类型且无空值才能进行训练,关于非数据类型需要进行相对处理例如:可以采用独热编码或者label编码进行处理。 本文演示的是pandas 的dataframe数据类型的操作,

    2024年02月06日
    浏览(43)
  • 记录--这个前端Api管理方案会更好?

    大家好,前端小白一枚,目前接触后台管理系统比较多,经常遇到不同对象的增删改查的接口,如何对Api进行一个有比较好的管理是个问题。在学习偏函数的时候有了灵感,想到一个不错的API管理方案,并应用在项目一个模块当中,并且 开发效率和维护性可读性都很不错 ,

    2024年02月08日
    浏览(35)
  • 和日期相关的代码和bug——一道力扣题中的小发现

    目录 Day of the Week 题目大意 常规方法 Python代码 Golang代码  C++代码 基姆拉尔森公式 Python代码 Golang代码 C++代码 使用库函数 Python代码 Golang代码 C++代码 Given a date, return the corresponding day of the week for that date. The input is given as three integers representing the day , month and year respectively. Retu

    2024年01月25日
    浏览(40)
  • 实习记录小程序|基于SSM的实习记录小程序设计与实现(源码+数据库+文档)

    知识管理 目录 基于SSM的习记录小程序设计与实现 一、前言 二、系统设计 三、系统功能设计  1、小程序端: 2、后台 四、数据库设计  五、核心代码  六、论文参考 七、最新计算机毕设选题推荐 八、源码获取:   博主介绍 :✌️大厂码农|毕设布道师,阿里云开发社区乘

    2024年04月11日
    浏览(72)
  • 实习记录——第三天

    今天还是去学习,昨天看另一个实习生有在了解ctf什么的,我就打算也看一看,问了问我的导师,他说我闲了可以看看,把我拉到了公司的ctf组,本来以为会是什么高大上的组织,结果好像就是平时分享分享知识,偶尔打个比赛,今天加进去,一天没任何动静。 简单看了看导

    2024年01月25日
    浏览(47)
  • 阿里面试记录---实习--【第二档】

    ​ 面试持续接近40分钟,面试官挺和蔼的,一直鼓励自己,面试过程也挺轻松,主要问了自己研究生的一些项目,论文,项目自己的主要职责,做了什么优化,自己主要负责什么模块,接下来就是一些常规的八股了,比如:HashMap底层(感觉这个问的最多,区分jdk1.7和jdk1.8之后

    2024年02月08日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包