手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内存泄露等】

简介: 手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内存泄露等】

直角三角形

问题 1:

请补全JavaScript代码,要求在页面上渲染出一个直角三角形,三角形换行要求使用"br"实现。三角形如下:

*
**
***

解答:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div class='triangle'></div>
        <script>
            var triangle = document.querySelector('.triangle');
            // 补全代码
            let contents="";
            for(let i=1;i<4;i++){
                contents += "*".repeat(i)+ "<br/>";
            }
            triangle.innerHTML=contents;
        </script>
    </body>
</html>

微信图片_20220927132503.png🎂🎂innerHTML

innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容;

如:

这是内容

,我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容;

也可以对某对象插入内容,如 document.getElementById(‘abc’).innerHTML=‘这是被插入的内容’; 这样就能向id为abc的对象插入内容。


repeat

生成一个重复的字符串,有n个str组成,可修改为填充为数组等

例如:

let str="abc"
let str2=srt.repeat(2)
console.log(str2) 

结果:abcabc


总结:

1、核心步骤:

1)创建一个空字符串,用于存储HTML模板

2)外层循环为层数,内存循环为每层的"*"数

3)每当内层循环结束时,在字符串后方添加换行

4)innerHTML插入内容


除此之外,还有很多方法,例如 循环 -- 拼接字符串 -- 换行 :

<script>
            var triangle = document.querySelector('.triangle');
            // 补全代码
            var str = ""
            for(let i = 0; i < 3; i++) {
                // 外层循环控制行
                for(let j = 0; j <= i; j++) {
                    // 内层循环控制内容
                    str += "*"
                }
                str += "<br/>"
            }
            triangle.innerHTML= str
        </script>

文件扩展名

问题 2:

请补全JavaScript代码,要求以字符串的形式返回文件名扩展名,文件名参数为"filename"。

解答:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <script>
            const _getExFilename = (filename) => {
                // 补全代码
                let index = filename.lastIndexOf('.')
                return filename.slice(0, index) && index !== -1 ? filename.slice(index) : '';
            }
        </script>
    </body>
</html>

微信图片_20220927132619.png总结:

1、核心步骤。

1)首先通过lastIndexOf获取最后一个"."符号的位置

2)然后通过slice截取index(包括)之后的字符串

2、除此之外,还有很多方法,例如正则方法。

return /\.(\w)+/.exec(filename)[0];

其中:“exec() 方法用于检索字符串中的正则表达式的匹配

分隔符

问题 3:

请补全JavaScript代码,要求返回参数数字的千分位分隔符字符串。

输入:

_comma(12300)

输出:

‘12,300’

解答:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <script type="text/javascript">
            function _comma(number) {
                // 补全代码
                if (number < 1000) {
                    return number.toString();
                } else {
                    return _comma(Math.floor(number / 1000)) + "," + _comma(number % 1000);
                }
            }
        </script>
    </body>
</html>

微信图片_20220927132729.png总结:

1、核心步骤。

1)判断传入的number大小,根据大小走不同通道。

2)小于1000直接返回一个字符串,大于1000通过取模的方式判断是否要添加 ,【没记错的话,就跟大一学的水仙花数差不多】。

除此之外,还有很多方法,例如 正则 :

<script type="text/javascript">
            function _comma(number) {
               let str = number.toString();
                return  str.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
            }
        </script>

单向绑定

问题 4:

请补全JavaScript代码,要求每当id为"input"的输入框值发生改变时触发id为"span"的标签内容同步改变。

注意:

1、 必须使用DOM0级标准事件(onchange)

解答:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
      <input id="input" type="text" />
        <span id="span"></span>
        <script type="text/javascript">
            // 补全代码
            var span = document.querySelector('#span')
            input.onchange = function () {
                span.innerText = this.value
            }
        </script>
    </body>
</html>

微信图片_20220927133050.png总结:

核心步骤

1)通过new Array函数构造实例的时候带入参数,可以生成该参数长度的空数组

2)通过Array.fill函数可以将数组的每一项都改编为参数值

3)或Array.from函数接收两个参数即可,第一个参数为数组或对象,都表示返回数组的长度。当参数为数组时它确定了返回的新数组长度,当参数为对象时,需要添加“length”属性表明数组长度

4)第二个参数为一个函数,即第一个数组参数中的每一项都调用该函数

创建数组

问题 5:

请补全JavaScript代码,要求返回一个长度为参数值并且每一项值都为参数值的数组。

注意:

1、 请勿直接使用for/while

解答:

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

微信图片_20220927133438.png判断版本

问题 5:

请补全JavaScript代码,该函数接收两个参数分别为旧版本、新版本,当新版本高于旧版本时表明需要更新,返回true,否则返回false。

注意:

1、版本号格式均为"X.X.X"

2、X∈[0,9]

3、当两个版本号相同时,不需要更新


解答:

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

微信图片_20220927133129.png总结:

核心步骤

1)去除新旧版本号中的”.“

2)判断数字大小


如果需要严谨一点还需要转个类型。parseInt


什么是深拷贝,什么是浅拷贝,二者有什么区别,平时改怎么区分呢?

js中不同类型存放的位置不同

看完上面的例子你可能还是晕晕的,那么来详细的看看什么是深拷贝,什么是浅拷贝吧。

微信图片_20220927133640.png


js中的基础类型:string,number,boolean,null,undefined,symbol

js中的引用类型:Object


基础类型:是按照值 存放在栈中,占用的内存空间的大小是确定的,并由系统自动分配和自动释放。

引用类型: 是按照地址 存在堆中,将存放在栈内存中的地址赋值给接收的变量。当我们想要访问引用类型的值的时候,需要先从栈中获得对象的地址指针,然后,在通过地址指针找到堆中的所需要的数据。

需要注意的是,js和Java一样也有栈内存和堆内存,基础类型存放在栈内存中,引用类型存放在堆内存中。

深拷贝与浅拷贝的区别

深拷贝:主要是将另一个对象的属性值拷贝过来之后,另一个对象的属性值并不受到影响,因为此时它自己在堆中开辟了自己的内存区域,不受外界干扰。

浅拷贝:主要拷贝的是对象的引用值,当改变对象的值,另一个对象的值也会发生变化。


SO,需要注意的是。如果在对对象进行赋值时,如果不希望共享对象,那么就要进行深拷贝。微信图片_20220927133643.png


常用的深拷贝方法:

1、序列化和反序列

JSON.parse( JSON.stringify() ) 序列化和反序列

2、assign

es6新增的方法,可用于对象合并,将源对象的所有可枚举属性,复制到目标对象上。

Object.assign(target, source1, source2)

注意: 当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,

但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝

3、迭代递归方法

4、通过jQuery的extend方法实现深拷贝

5、lodash函数库实现深拷贝


let clone = cloneDeep(obj)

js中哪些操作会造成内存泄漏?

1.意外的全局变量


由于我们使用未声明的变量,而意外的创建了一个全局变量,而使这个变量一直留在内存中无法被回收。


2.被遗忘的计时器或回调函数。


当我们设置了setinterval定时器,而忘记取消它,如果循环函数有对外部变量的引用的话,那么这个变量会被一直留在内存中,而无法被回收。


3.脱离DOM的引用


我们获取一个DOM元素的引用,而后面这个元素被删除,由于我们一直保留了对这个元素的引用,所以它也无法被回收。


4.闭包


不合理的使用闭包,从而导致某些变量─直被留在内存当中。



目录
打赏
0
0
0
0
3
分享
相关文章
监控和分析 JavaScript 内存使用情况
【10月更文挑战第30天】通过使用上述的浏览器开发者工具、性能分析工具和内存泄漏检测工具,可以有效地监控和分析JavaScript内存使用情况,及时发现和解决内存泄漏、过度内存消耗等问题,从而提高JavaScript应用程序的性能和稳定性。在实际开发中,可以根据具体的需求和场景选择合适的工具和方法来进行内存监控和分析。
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
121 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
避免 JavaScript 中的内存泄漏
【10月更文挑战第30天】避免JavaScript中的内存泄漏问题需要开发者对变量引用、事件监听器管理、DOM元素操作以及异步操作等方面有深入的理解和注意。通过遵循良好的编程实践和及时清理不再使用的资源,可以有效地减少内存泄漏的风险,提高JavaScript应用程序的性能和稳定性。
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
138 2
JS 中的内存管理
【10月更文挑战第17天】了解和掌握 JavaScript 中的内存管理是非常重要的。通过合理的内存分配、及时的垃圾回收以及避免内存泄漏等措施,可以确保代码的高效运行和稳定性。同时,不断关注内存管理的最新发展动态,以便更好地应对各种挑战。在实际开发中要时刻关注内存使用情况,以提升应用的性能和质量。
54 1
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
224 77
选择适合自己的Node.js内存监控工具
选择合适的内存监控工具是优化 Node.js 应用内存使用的重要一步,它可以帮助你更好地了解内存状况,及时发现问题并采取措施,提高应用的性能和稳定性。
156 76
解读Node.js内存监控工具生成的报告
需要注意的是,不同的内存监控工具可能会有不同的报告格式和内容,具体的解读方法可能会有所差异。因此,在使用具体工具时,还需要参考其相关的文档和说明,以更好地理解和利用报告中的信息。通过深入解读内存监控报告,我们可以不断优化 Node.js 应用的内存使用,提高其性能和稳定性。
119 74
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
177 62
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
325 62

热门文章

最新文章

  • 1
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
    25
  • 2
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    33
  • 3
    VSCode AI提效工具,通义灵码前端开发体验
    76
  • 4
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    10
  • 5
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    41
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    71
  • 7
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    32
  • 8
    巧用通义灵码,提升前端研发效率
    101
  • 9
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    153
  • 10
    详解智能编码在前端研发的创新应用
    110
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等