牛客网-JS篇-在线编程---前端面试手撕题

最新推荐文章于 2024-07-09 19:23:02 发布
最新推荐文章于 2024-07-09 19:23:02 发布
阅读量832 收藏 1
点赞数 3
分类专栏： js 文章标签： 前端 javascript 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50951790/article/details/128085596
版权

题源来自牛客网  在线编程---JS篇---前端面试手撕题

1.事件委托（获取标签然后创建点击事件的过程）

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <ul>
            <li>.</li>
            <li>.</li>
            <li>.</li>
        </ul>
 
        <script type="text/javascript">
            // 补全代码
           var point = document.querySelector('ul')
           point.onclick = function(e){
               e.target.innerText +='.'
           }
        </script>
    </body>
</html>

2.数组去重（方法有很多，这里用最简单的方法，es6中的Set()来去重 ）

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _deleteRepeat = array => {
                // 补全代码
              return Array.from(new Set(array))
            }
        </script>
    </body>
</html>

3.合法的URL（两种方法选其一即可，一种使用正则表达式，一种是用includes）

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _isUrl = url => {
                // 使用正则      test() 方法是正则表达式的一个方法，用于检测一个字符串是否匹配某个模式.
                //test 方法检查字符串是否与给出的正则表达式模式相匹配，如果是则返回 true，否则就返回 false。
                // return /^https/.test(url)
                
                //使用includes
                //includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。
                return url.includes("https")
            }
        </script>
    </body>
</html>

4.快速排序

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _quickSort = array => {
                // 补全代码
                if(array.length<=1)  return array
                // 寻找中位数
                let middleIndex = Math.floor(array.length/2)
                let middle = array.splice(middleIndex,1)[0]
                let left = []
                let right = []
                for(let i=0;i<array.length;i++){
                    array[i]<middle?left.push(array[i]):right.push(array[i])
                }
                return [... _quickSort(left),middle,... _quickSort(right)]
            }
        </script>
    </body>
</html>

5.全排序

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _permute = string =>{
                if(string.length === 1){
                    return [string]
                };
                let arr = string.split('');
                // 存放每次生成的字符串
                let result = []
                for(let i=0;i<string.length;i++){
                    // 通过过滤，拿到除去前一个字母剩下的
                    restArr = arr.filter(item => item!=arr[i])
                    // 组合成数组
                    let newArr = _permute(restArr.join(''))
                    // 得到的结果合并成一个数组
                    result = result.concat(newArr.map(item=>arr[i]+item));
                }
                return result
            }
        </script>
    </body>
</html>

6.instanceof

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _instanceof = (target, Fn) => {
                // 补全代码
               return target instanceof Fn
            }
        </script>
    </body>
</html>

7.Array.map

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>

        <script type="text/javascript">
            // 补全代码
            Array.prototype._map = function(fn){
                //首先判断是否为函数
                if(typeof fn !== 'function') return
                //创建一个空数组来承载内容
                const array = this
                const newArray = new Array(array.length)
                //遍历，将返回值添加进空数组
                for(let i=0;i<array.length;i++){
                    newArray[i] = fn.call(arguments[1],array[i],i,array)
                }
                return newArray
            }
        </script>
    </body>
</html>

8.Array.filter

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>

        <script type="text/javascript">
            // 补全代码
            Array.prototype._filter = function(fn){
                const res = []
                for(const i of this){
                    if(fn(i)){
                        res.push(i)
                    }
                }
                return res
            }
        </script>
    </body>
</html>

9.Array.reduce

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            // 补全代码
            Array.prototype._reduce = function(f,pre=0){
                this.forEach(item=>{
                    pre = f(pre,item)
                })
                return pre
            }
        </script>
    </body>
</html>

10.objectCreate

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _objectCreate = proto => {
                // 补全代码
                let obj = {}
                return obj._proto_ = proto
            }
        </script>
    </body>
</html>

11.Function.call

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            // 补全代码
            Function.prototype._call = function(obj,...args){
             obj.fn = this
                return obj['fn'](...args)
            }
        </script>
    </body>
</html>

12.Function.bind

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            // 补全代码
            Function.prototype._bind = function(obj){
                let that = this
                return function(...arr){
                   return that.apply(obj,arr)
                }
            }
        </script>
    </body>
</html>

13.new

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _new = function(fn, ...args) {
                // 补全代码
                // 1、创建一个新的对象
                const obj = {}
                // 2、将新对象的原型设置为构造函数的原型对象
                obj.__proto__ = fn.prototype
                // 3、将this绑定到新的对象上
                const res = fn.apply(obj, args)
                // 4、返回一个对象
                return res instanceof Object ? res : obj
            }
        </script>
    </body>
</html>

14.Object.freeze  (冻结，简单的就是理解为不可以在进行增删改查)

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _objectFreeze = object => {
                // 首先判断传入是否为对象
                if(object instanceof Object){
                   //seal()方法可以让对象不被扩张、删除等
                    Object.seal(object);
                    //遍历对象中的属性
                    for(let p in object){
                        //修改属性对象中的可写属性为false
                        Object.defineProperty(object,p,{
                            writable:false,
                        });
                        //实现深冻结
                        _objectFreeze(object[p]);
                    }
                }else{
                    Object.seal(object)
                }
            }
        </script>
    </body>
</html>

15.浅拷贝

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _shallowClone = target => {
                // 补全代码
                var obj = Object.assign({},target)
                return obj
            }
        </script>
    </body>
</html>

16.简易深拷贝

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _sampleDeepClone = target => {
                // 两种方式
                
                //1.转换形式
                //return JSON.parse(JSON.stringify(target))
                
               //2.递归
                var Obj = target instanceof Array ? [] : {}
                for(let i in target){
                    if(typeof target[i] === 'object'){
                        Obj[i] = _sampleDeepClone(target[i])
                    }else{
                        Obj[i] = target[i]
                    }
                }
                return Obj
            }
        </script>
    </body>
</html>

17.深拷贝

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _completeDeepClone = (target, map = new Map()) => {
            // 首先判断是否为空，为空则直接返回
            if(target === null || typeof target!=='object') return target
            //获取对象的构造函数名，判断是否为题目中四种情况之一
            const constructor = target.constructor
            if(/^(Function|RegExp|Date|Map|Set)$/i.test(constructor.name)){
                return new constructor(target)
            }
             //  在Map对象中获取当前参数对象，如果能获取到，则说明这里为循环引用并返回Map对象中该参数对象的值 
             if(map.get(target)) return map.get(target)
             map.set(target,true)
              //根据该参数的数据类型是否为数组创建新对象
              const cloneT = Array.isArray(target)?[]:{}
                //遍历该对象参数，将每一项递归调用该函数本身的返回值赋给新对象
                for(prop in target){
                    if(target.hasOwnProperty(prop)){
                        cloneT[prop] = _completeDeepClone(target[prop],map)
                    }
                }
                return cloneT
            }
        </script>
    </body>
</html>

18.寄生组合式继承

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            // 补全代码
            function Human(name) {
                this.name = name
                this.kingdom = 'animal'
                this.color = ['yellow', 'white', 'brown', 'black']
            }

            Human.prototype.getName = function(){
                return this.name
            }
            
            function Chinese(name,age) {
                Human.call(this,name)
                this.color = 'yellow'
                this.age = age
            }
            
            Chinese.prototype = Object.create(Human.prototype)
            Chinese.prototype.constructor = Chinese
            
            Chinese.prototype.getAge = function(){
                return this.age
            }  
        </script>
    </body>
</html>

19.发布订阅模式

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <script type="text/javascript">
            class EventEmitter {
               //首先需要把所有的订阅者存储起来
                constructor(){
                    this.events = {}
                }
                //通过on来实现添加订阅事件
                on(event,fn){
                    if(this.events[event]){
                        this.events[event].push(fn)
                    }else{
                        this.events[event] = [fn]
                    }
                }
                //通过emit来触发事件
                emit(event){
                    this.events[event].map(callback=>callback())
                }
            }
         
        </script>
    </body>
</html>

20.观察者模式

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            // 被观察者
            class Observerd {
                constructor(name){
                    this.name = name
                    this.state = "run..."
                    this.observer = []
                }
                //发送
                setObserver(person){
                    this.observer.push(person)
                }
                //被观察者状态
                setState(value){
                    this.state = value
                    this.observer.forEach(person =>{
                        person.update(this.name,this.state)
                    })
                }
            }
            //观察者
            class Observer {
                constructor(name){
                    this.name = name
                }
                update(name,state){
                    console.log(name+"正在"+state)
                }
            }
        </script>
    </body>
</html>

万能守恒定律
关注
专栏目录
技术面 - 八股文整理
程序员阿甘的博客
11-13 1万+
八股文整理
2024华为OD机考机试E卷 +C卷 + D卷 + B卷 + A卷：真题目录 + 考点说明
热门推荐
算法大师！
03-18 38万+
OD，全称(Outsourcing Dispacth)模式，目前华为和德科联合招聘的简称。华为社招基本都是OD招聘，17级以下都是OD模式（13-17）。
前端在线编程题4
WittyLu的博客
07-20 886
目录： 10.颜色字符串转换 11.将字符串转换为驼峰格式 12.求二次方
牛客网 JS编程
马木木的个人博客
05-03 607
一共四十五道题，从简单到难，覆盖的范围比较多。题目：牛客网代码：点击打开链接
2024前端面试真题【JS篇】
最新发布
Leatitia的博客
07-09 1603
文本对象模型，是HTML和XML文档的编程接口。提供了对文档的结构化的表述，并定义可一种方式可以使从程序中对该结构进行访问，从而改变文档的结构、样式和内容。
前端在线编程题1
WittyLu的博客
07-20 649
目录： 1.查找数组元素位置 2.数组求和 3.移除数组中的元素 介绍了reduce和forEach方法。
网易2017秋招编程题集合
qq_26989999的博客
08-26 224
网易2017秋招编程题集合——牛客网
前端在线编程题5
WittyLu的博客
07-20 457
目录： 13.避免全局变量 14.正确的使用 parseInt 15.计时器
10.16 杭州银行笔试面经 - 编程题 &amp； 题解
2301_79125642的博客
10-17 746
翔腾微电子（西安）：嵌入式 翔腾微电子（西安）：嵌入式全程35分钟左右，有三个面试官轮流问问题1.自我介绍2.介绍项目（无人机跟踪项目）用到了哪些传感器？PID算法的设计过程？电机的死区如题解 | #删除有序链表中重复的元素-II# /** * struct ListNode { * int val; * struct ListNode *next; * }; *//** * 代码中的类名、offer选择(初创值得去吗) 如题，目前
前端在线编程题6
WittyLu的博客
07-20 865
目录： 16.函数的上下文 17.流程控制 18.返回函数
前端在线编程题3
WittyLu的博客
07-20 424
目录： 7.查找重复元素 8.时间格式化输出 9.斐波那契数列7.查找重复元素示例1
「牛客网」45道JS能力测评经典题总结
webqianduan1的博客
07-10 541
牛客网的45道JS能力评测题，个人觉得是非常好的45道 js 基础检测题，基本就是对自己的JavaScript基础做一个比较全面的评估，包括if语句、循环体、基础操作符、setInterval、setTimeout、流程控制、常用数组方法及es6相关（解构、Map、Set、...等）。之前我已经做过一遍了，我记得以前牛客网不支持es6的写法，这两天花了点时间把所有题目又做了一遍，发现支持es6了。这次每个题目我都尽力用了不同的方法实现，建议各位看官收藏，需要的时候方便查看。当然如果你有更好更新颖的实现方法，
【整理】牛客网编程题-前端篇（入门难度）
chentanghui的博客
06-03 610
（1）dom节点查找 题目描述： 查找两个节点的最近的一个共同父节点，可以包括节点自身 输入描述：oNode1 和 oNode2 在同一文档中，且不会为相同的节点 解题思路： 判断一个节点以及它的父节点是否包含另一个节点。 function commonParentNode(oNode1, oNode2) { while(true){ oNode1 = oNode1.parentNode; if(oNode1.contains(oNode2)){
在线js编程网站 精品版
weixin_34343000的博客
05-03 411
https://jsfiddle.net/ 引自:http://www.ykmimi.com/tools.html 转载于:https://www.cnblogs.com/ukzq/p/8984005.html
在线编程JavaScript
qq_45243905的博客
03-31 1225
目录 一、前言 二、常见方式 2.1JavaScript(Node 6.11.4)——稍微复杂点 2.2JavaScript(V8 6.0.0)——更简单一点 一、前言 　　如何使用JavaScript编程语言在牛客网这种平台写输入输出相关的代码 二、常见方式 2.1JavaScript(Node 6.11.4)——稍微复杂点 参考：nodejs笔试编程（单行多行输入）_赛懵疑的博客-CSDN博客_nodejs多行输入 1.单行输入 const readline = r.....
【面试题】2024前端面试真题之JS篇(1)
2401_84438160的博客
04-27 991
NodeList。
js牛客网编程练习汇总（二）
蜗牛~~
03-28 504
2、请补全JavaScript代码，要求在Number对象的原型对象上添加"_isPrime"函数，该函数判断调用的对象是否为一个质数，是则返回true，否则返回false。2. 设置Getter，当获取该对象的"area"属性时，返回该对象"height"与"width"属性的乘积。3. 当滑动滑块值为1时，矩形动画周期为10秒、当...，为...、当滑动滑块值为10时，矩形动画周期为1秒。7、请补全代码，要求当滑动id为"range"的滑块控件时可以改变id为"rect"的矩形旋转速度。
牛客网JS（nodeJS）单行、多行输入和输出
weixin_34356138的博客
04-18 3945
nodeJS实现牛客网的输入和输出 在牛客网上，用js做笔试的童鞋首先要做的事情就是学会如何输入和输出。否则就算看得懂题也无法通过笔试。话不多少，我们直接开始： 1、选择语言 2、单行输入 var readline = require('readline') const rl = readline.createInterface({ ...
牛客JS题库
weixin_47227886的博客
06-26 886
请补全JavaScript代码，要求在页面上渲染出一个直角三角形，三角形换行要求使用"br"实现。三角形如下： * ** *** 2.文件扩展名 请补全JavaScript代码，要求以字符串的形式返回文件名扩展名，文件名参数为"filename"。 3.千分位 4.单向监听 请补全JavaScript代码，要求每当id为"input"的输入框值发生改变时触发id为"span"的标签内容同步改变。 注意：必须使用DOM0级标准事件（onchange） 5.创建数组 请补全Jav
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值