前端手写题

前端面试必须掌握的手写题 阅读详情

目录

数组对比

获取当前元素(含)下所有元素出现次数 

 数组去重

数组降维

获取数组最大数

获取数组第二大数

获取数组中每项出现的次数


        


数组对比

[1,2,3] ===[1,2,3] //false
JSON.stringify([1,2,3]) === JSON.stringify([1,2,3]) //true

获取当前元素(含)下所有元素出现次数 


<body>
  <div id="rich">
    <ul>
      <li><a>A</a></li>
      <li><a>B</a></li>
      <li><a>C</a></li>
    </ul>
    <h3>Hello</h3>
    <div>
      <input/>
      <button></button>
    </div>
  </div>
</body>
</html>
<script>
  let allElement = [document.querySelector('#rich'),...document.querySelector('#rich').getElementsByTagName("*")]
  console.log('元素展示:',allElement)
  let allNum = [...allElement].reduce((old,news)=>{
    let tagName = news.tagName
    if(old[tagName]){
      old[tagName]++
    }else{
      old[tagName] = 1
    }
    return old
  },{})
  console.log('最终展示:',allNum)
</script>

 结果展示 


 数组去重

//1.使用reduce()方法去重
//注:使用reduce()至少得保证数组有2项才能执行;如果给了初始值,你至少得保证数组有一项才能执行。
    let arr = [1, 2, 2, 1, 4, null, null].reduce((accumulator, current) => {
      return accumulator.includes(current) ? accumulator : accumulator.concat(current)
    }, [])

2,使用new Set()去重
    let arr = [...new Set([1, 2, 2, 1, 4, null, null])]

3,多维去重 例如: [1,1,3,4,5,[2,1,12,[22,1,100]],32,[20,12,200]]
function deWeight(list,arrs){
    let newList = list.reduce((old,news)=>{
        if(!Array.isArray(news)){
            if(old.indexOf(news)===-1){
                old.push(news)
            }
        }else{
            return deWeight(news,old)
        }
    return old
    },arrs)
    return newList
}
deWeight(list,[])

数组降维

//1,多维数组降维flat会更简单,当然flat存在兼容问题:
//(Infinity参数代表无限深度,无参数默认降维一层)
let arr = [0,[1],[2, 3],[4, [5, 6, 7]]].flat(Infinity);// [0, 1, 2, 3, 4, 5, 6, 7]

//2,通过reduce,可以结合concat方法:
let arr = [[1,2],[3,4],[5,6]].reduce((accumulator, current)=>accumulator.concat(current),[]);//[1, 2, 3, 4, 5, 6]

//3,多维数组嵌套,reduce:
let arr = [0,[1],[2, 3],[4, [5, 6, 7]]];

let dimensionReduction = function (arr) {
    return arr.reduce((accumulator, current) => {
        return accumulator.concat(
            Array.isArray(current) ? 
            dimensionReduction(current) : 
            current
            );
    }, []);
}
dimensionReduction(arr); //[0, 1, 2, 3, 4, 5, 6, 7]

获取数组最大数

let arr = [1,2,5,34,34,43,21,8,6]
arr.reduce((old,news)=>{
    if(old['max']&&old['max']<news){
         old['max'] = news
    }else if(!old['max']){
        old['max'] = news
    }
    return old
},{}) //{max:43}

获取数组第二大数

let arr = [1,2,5,34,8,6,34,34,22,22,77,7,66,7,77,66]
arr.reduce((old,news,index,list)=>{
    if(index>=2){
        if(news>old['max2']){
            if(news>=old['max']){
                //为了区分存在相同数值,影响第二值的判断
                if(news!==old['max'])old['max2'] = old['max']
                old['max'] = news
            }else{
                old['max2']= news
            }
        }
        
    }else{
        if(list[0]>list[1]){
            old['max'] = list[0]
             old['max2'] = list[0]
        }else{
             old['max'] = list[1]
             old['max2'] = list[0]
        }
    }
    return old
},{}) //{max: 77, max2: 66}

获取数组中每项出现的次数

let arrs = [1,2,3,6,6,5,4,5,6,5,3,2]
arrs.reduce((old,news)=>{
    if(old[news]){
       old[news]++
    }else{
        old[news] = 1
    }
    return old
},{})

硬件手册——PT100精密测温电路 PT100精密测温电路 一、需求分析 根据题目要求为:测温范围为0-100℃、测温精度要求为±1℃。由于铂电阻具有精度高、性能可靠、稳定性好的特点,且铂电阻的电阻相对变化率与温度的关系曲线线性度最好,故选择铂电阻作为敏感元件。而在国标中,铂电阻有几种不同的标准,如PT100、PT1000。分别对应着0摄氏度下铂电阻的阻值为100R和1000R,由于需要考虑铂电阻的自发热问题,所以尽量选择阻值小的铂电阻,故选择PT100为最终型号。 二、电路设计 2.1 热电阻接法 热电阻测温电路有多种接法,其中三线制会导致 阅读详情

相关推荐

智能车数字图像处理算法入门及C语言实现

智能车图像的最最基本入门算法介绍及C语言实现,二值化 - 特征识别 - 补线 - 中心巡线 - 偏差曲率计算。

不想随波逐流的大学生一枚,我们每个人都在努力奔跑 5110

前端面试常见手写题整理

前端面试手写题 整理前端面试常见的手写题,面试出现概率极高,建议每个都过自己过一遍,加深印象。 你可以 watch 一下这个 GitHub 仓库,会持续收集、整理和维护。 实现 bind() Function.prototype.MyBind = function (context, ...args) { let self = this; return function() { return self.apply(context, args); } } // test let a =

MayanDev 2687

NPP/VIIRS夜间灯光数据:从下载到应用的完整指南

本文提供了NPP/VIIRS夜间灯光数据从下载、处理到应用的完整实战指南。详细介绍了如何从官方源获取数据、解读文件结构、进行坐标校正与数据清洗,并深入探讨了其在城市扩张监测、社会经济指标估算、重大事件影响评估等领域的核心应用。文章旨在帮助研究者与从业者快速掌握这一强大的空间数据,将其转化为研究中的实用工具。

gpu4optimizer的博客 867

前端面试必备 常见手写题

常见手写题 1.Filter export function filter(arr, callback) { // 定义空数组接收 回调返回为true的 元素 let result = []; for (let i = 0; i < arr.length; i++) { let res = callback(arr[i], i); // 如果回调结果为真 就压入结果数组中 if (res) { result.push(arr[i])...

m0_59113449的博客 2264

AI工程化之生成式UI & A2UI(二)

本文介绍了生成式UI框架A2UI的架构设计与核心实现。项目采用AI协作开发模式,通过ATDD(AI驱动的测试驱动开发)确保代码质量。前端SDK基于zustand实现框架无关的状态管理,包含协议解析器、存储管理、渲染器等核心模块。重点展示了基础store构建、A2UI协议解析器的实现过程,包括mock数据准备、测试用例生成和可视化调试。项目采用monorepo管理,利用vite实现高效开发构建。整个系统设计遵循模块化原则,通过清晰的接口定义实现各组件解耦,为后续功能扩展打下基础。

qq_34306228的博客 407

长期换衣行人重识别(Long-Term Clothes-Changing Person Reid)数据集汇总

长期换衣行人重识别任务中目前常用的数据集总览目前换衣数据集的主要问题数据集换衣/总体情况集统计DeepChange(2021)LaST(2021)COCAS(2020)VC-Clothes(2020)LTCC(2020)PRCC(2019)Celebrities-reID(2019) 总览 在长期换衣行人重识别的任务当中,数据集的获取(尤其是对于学术环境下)是一个难点,主要的困难有以下几点: 采集大规模的数据集比较困难。 采集不同的衣服的数据集比较困难。 采集不同衣服不同角度的数据集比较困难。 目前也有

KingsMan666的博客 8384

前端大厂手写题面试真题,面试通过率90%

不存在(map.has(k) 为false ),则将nums[i] 加到map 中(key为nums[i] ,value为i ,便查找map中是否存在某值,并可以通过get 法直接拿到下标)给定个整数数组nums 和个标值target ,请你在该数组中找出和为标值的那两个整数,并返回他们的数组下标。我们的算法思路逐渐清晰起来:遍历所有进制,判断选中个数是否为N ,然后再求对应的元素之和,看其是否为M。请算法实现,从给定的需、不重复的数组A中,取出N个数,使其相加和为M。你可以假设每种输只会对应个答案。

m0_74824661的博客 882

面板数据门槛归回分析,xthreg的安装,xthreg2安装包

我用的是Stata17,数据是不平衡的面板数据,需要用到xthreg2,虽然我找到了xthreg2.ado,但是还需要安装xthreg,因为运行xthreg2需要xthreg包顺带安装的lxthreg.mlib文件。但是!我后来发现还是不行,最后是去买了一个真正能用到xthreg2的lxthreg.mlib文件,才可以运行。

weixin_55252589的博客 1万+

前端面试手写题

前端面试手写题 整理前端面试常见的手写题,面试出现概率极高,建议每个都过自己过一遍。 你也可以提交 PR,提供你面试遇到的题目。 高频:★★★ 中频:★★ 低频:★ JavaScript 原理 实现 bind() ★★ 实现 apply() ★★ 实现 call() ★★ 实现 instanceof ★ 实现 new ★ 实现 jsonp ★★★ 实现 Promise ★★★ 实现 Promise.all() ★★★ 实现 Promise.race() ★ 实现 EventEmitter 订阅监听模

MayanDev 1480

2006NOIP普及组真题 4. 数列

从上述推理中,我们发现要输出的幂次和中的第 N 项(也就是幂次和中的序号N),对应的二进制位数和幂次和对应的二进制位数相同。当 k=3 时,k的幂次为1, 3, 9, 27, 81…,即第0位,第2位均为1,转成 k 进制(k=3)时。,即第2位,第3位均为1,转成 k 进制(k=3)时。转成 k 进制(k=3)时的幂次和为。,即第0位,第1位,第2位均为1,(即第0位,第1位,第2位均为1)N=12时,12的二进制是。(即第0位,第2位均为1)(即第2位,第3位均为1)结论:这道题就变成了。

weixin_40252159的博客 1514

24. SAP UI5 应用如何使用 OData 数据模型

本教程之前的二十三个步骤,使用的数据模型都是 JSON 模型。从本步骤开始,我们要学习另一种非常重要的数据模型:OData 数据模型。 OData 数据模型也是 SAP 产品里广泛使用的数据模型,比如 SAP S/4HANA,SAP CRM Fiori 应用等等,都使用的是 OData 数据模型而不是 JSON 数据模型。 使用 OData 数据模型的典型场景就是,通过 OData 模型提供的 Read API,将远端服务器上存储的数据通过 OData 协议读取到客户端,并显示在 SAP UI5 应用里。.

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 5798

前端经典面试手写题

前端面试中常会遇到的手写题主要考察应聘者对前端基础知识的掌握程度以及编程能力。

zhangwenok的博客 1015

计算机网络实验报告实验七可靠传输TCP协议分析

计算机网络实验报告实验七可靠传输TCP协议分析

m0_56638814的博客 966

前端面试必须掌握的手写题:进阶篇

当你看到这里的时候,几乎前端面试中常见的手写题目基本都覆盖到了,对于社招的场景下,其实手写题的题目是越来越务实的,尤其是真的有hc的情况下,一般出一些常见的场景题的可能性更大,所以最好理解➕记忆,最后欢迎评论区分享一些你遇到的题目至此,手写题系列分享结束,希望对你有所帮助。

Web面试那些事儿的博客 774

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

记录面试前端遇到的手写题

eg. 像百度搜索,就应该用防抖,当我连续不断输入时,不会发送请求;观察者模式:定义了对象间一种一对多的依赖关系,当目标对象Subject发生改变时,所有依赖它的对象Observer都会得到通知。请使用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中,并返回第一次出现的位置(找不到返回 -1)。在指定时间内只执行一次回调函数,如果在指定的时间内又触发了该事件,则回调函数的执行时间会基于此刻重新开始计算。输入字符串s,以及其重复的次数,输出重复的结果,例如输入abc,2,输出abcabc。

helloworld1024fd的博客 172

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

前端必会手写题总结

像dom的拖拽,如果用消抖的话,就会出现卡顿的感觉,因为只在停止的时候执行了一次,这个时候就应该用节流,在一定时间内多次执行,会流畅很多。节流函数原理:指频繁触发事件时,只会在指定的时间段内执行事件回调,即触发事件间隔大于等于指定的时间才会执行回调函数。使用定时器的节流函数在第一次触发时不会执行,而是在 delay 秒之后才执行,当最后一次停止触发后,还会再执行一次函数。指的是将一个接受多个参数的函数 变为 接受一个参数返回一个函数的固定形式,这样便于再次调用,例如f(1)(2)该如何让它交替重复进行呢?

helloworld1024fd的博客 209

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

2022前端面试遇到的手写题总结

百度前端一面常考手写面试题及答案

helloworld1024fd的博客 196

前端手写题(一)

本文介绍了几个JavaScript重要的概念和实现方法:1. 深拷贝:通过递归处理对象属性,支持循环引用检测和特殊对象类型处理;2. 防抖:采用延迟执行模式,确保连续触发时仅执行最后一次操作;3. 节流:提供时间戳和定时器两种实现方式,控制高频触发的事件执行频率;4. 函数柯里化:通过分步接收参数实现参数复用;5. instanceof:通过原型链检测实现对象类型判断;6. typeof:通过Object.prototype.toString实现更精确的类型判断。每个概念都配有具体实现代码和测试用例。

2301_82023822的博客 1392

常见的前端面试手写题

最近把常见的面试手写题还有我自己面试碰到的总结了一下,话不多说,直接看代码: bind Function.prototype.bind = function (_this, ...arg) { var self = this; return function () { return self.apply(ins, ...arg) } }; 复制代码EventEmitter cl...

weixin_34343308的博客 959

刷刷前端手写题

刷刷经典前端手写题

weixin_44921693的博客 487

前端简单手写基础函数题

前端简单手写基础函数题

weixin_45288172的博客 270

前端常见手写题分享

本文介绍了JavaScript中四种常用技术:1.防抖(Debounce)通过延迟执行避免函数高频调用,适用于搜索输入等场景;2.节流(Throttle)通过固定间隔执行限制调用频率,适用于滚动事件等;3.手写instanceof实现原理,通过原型链检查判断对象类型;4.三种数组去重方法:indexOf、includes和Map版本。这些技术能有效优化前端性能,处理高频事件和数据操作。

2403_89086078的博客 276

前端面试手写题系列 IV

如果真的能记住或者自己能够写出来的话,正则真的是一把利剑,很多自己无法实现或者实现不全的判断函数,都只需要一个正则表达式就可以解决。意思其实很明显,传入一个参数 William,然后等五秒,然后执行 do,然后执行 execute。像这种正则表达式,一般我们感觉都是不会考察的,但是实际上就是考了。// 我们原来的写法就是 fn3(fn2(fn1(1)))// 但是这里我们可以用 compose 函数来实现。// compose 函数的实现。

https://github.com/QAQDFAFD 895

前端实习面试手写题分享

本文总结了前端面试中常见的手写题实现方法,包括new运算符、call/apply/bind函数和once函数。手写new模拟了构造函数实例化流程;call/apply/bind通过临时属性绑定this指向,其中bind还支持参数预置和延迟调用;once函数利用闭包控制函数只执行一次。这些实现都体现了JavaScript的核心特性,如原型链、this绑定和闭包等,是前端开发必备的基础知识。掌握这些手写题有助于深入理解JavaScript底层原理,提升面试竞争力。

2403_89086078的博客 466

每日前端手写题--day12

如果你最近想要换工作或者巩固一下自己的前端知识基础,不妨和我一起参与到每日刷题的过程中来,如何?第12天要刷的手写题如下:反转字符串并输出实现一个eventEmitter叙述jsonp原理并实现此功能。

Web面试那些事儿的博客 401

前端面试手写题系列 I

希尔排序也是一种插入排序,它是简单插入排序经过改进之后的一个更高效的版本,也称为缩小增量排序,同时该算法是冲破O(n2)的第一批算法之一。思路就是排序的时候比较一个随机数和 0.5 的大小,很明显每次比较随机生成的随机数都是既可能大于 0.5,也可能小于 0.5,所以每次比较的两个数字前后的顺序是不一定的,这就起到了洗牌的效果。希尔排序的思路是:先将整个待排序的序列分割成为若干子序列,而后将它们分别进行直接插入排序。使用希尔排序的比较次数和交换次数在数据量足够大的时候会明显减少,效率提高。

https://github.com/QAQDFAFD 931
上一篇: element-ui中 table组件的 header具名插槽中数据不响应的问题
下一篇: vue在浏览器监听切出当前页面(或切屏),触发警告
coder_wangs
博客等级 码龄5年 22粉丝 31原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值