【前端面试3+1】10 npm run dev 发生了什么、vue的自定义指令如何实现、js的数据类型有哪些及其不同、【最长公共前缀】

news/2024/5/10 21:48:24/文章来源:https://blog.csdn.net/qq_61798306/article/details/137359465

一、npm run dev发生了什么

        运行`npm run dev`时,通常是在一个基于Node.js的项目中,用来启动开发服务器或者执行一些开发环境相关的任务。下面是一般情况下`npm run dev`会执行的步骤:

1. 查找package.json中的scripts字段:

        npm会在项目根目录下的package.json文件中查找scripts字段,找到对应的"dev"命令。

2. 执行对应的脚本:

        找到"dev"对应的脚本后,npm会执行该脚本。脚本可以是一个简单的命令,也可以是复杂的脚本。

3. 执行脚本中定义的命令:

        一般来说,"dev"脚本会包含一系列命令,比如启动开发服务器、编译代码、打包资源等。npm会按照脚本中定义的命令顺序执行这些命令。

4. 启动开发服务器:

        如果"dev"脚本中包含了启动开发服务器的命令,npm会启动一个本地开发服务器,用于在开发环境中预览项目。

5. 监听文件变化:

        通常开发环境下会监听文件的变化,一旦文件发生改动,开发服务器会重新编译代码并刷新页面,以便开发者实时查看修改效果。

        总的来说,运行`npm run dev`会根据package.json中定义的"dev"脚本来执行开发环境相关的任务,比如启动开发服务器、编译代码、监听文件变化等。这样可以方便开发者在开发过程中实时查看项目的变化,并进行调试和优化。

二、vue的自定义指令如何实现?

        在Vue中,可以通过Vue.directive()方法来定义自定义指令。下面是一个简单的示例,展示如何编写一个自定义指令:

// 全局注册一个自定义指令 'my-directive'
Vue.directive('my-directive', {// 当绑定元素插入到 DOM 中inserted: function (el) {// 设置元素的背景颜色为红色el.style.backgroundColor = 'red';}
});

        在上面的示例中,我们定义了一个名为my-directive的自定义指令,它会在绑定元素插入到DOM中时,将元素的背景颜色设置为红色。

接下来,我们可以在Vue组件的模板中使用这个自定义指令:

<template><div v-my-directive>This is a custom directive example</div>
</template>

        在上面的模板中,我们使用v-my-directive指令来调用我们定义的自定义指令。当这个组件被渲染时,指令会生效,将对应的元素的背景颜色设置为红色。

        这只是一个简单的示例,实际上自定义指令还可以包含更多的钩子函数和参数,以实现更复杂的功能。在编写自定义指令时,可以根据需求选择合适的钩子函数和参数,并根据业务逻辑实现相应的功能。

三、js的数据类型有哪些,它们有什么不同?

        在JavaScript中,数据类型可以分为两大类:原始数据类型引用数据类型

1.分类:

  1. 原始数据类型

    • String:表示文本数据,用单引号或双引号包裹。
    • Number:表示数字,包括整数和浮点数。
    • Boolean:表示逻辑值,只有两个取值:truefalse
    • Null:表示空值。
    • Undefined:表示未定义的值。
    • Symbol(ES6新增):表示唯一的、不可变的值。
  2. 引用数据类型

    • Object:表示复杂数据类型,可以存储多个键值对。
    • Array:表示数组,可以存储多个值。
    • Function:表示函数。
    • Date:表示日期和时间。
    • RegExp:表示正则表达式。

2.不同:

  • 原始数据类型是存储在栈内存中的简单数据段,可以直接访问和操作,具有固定大小。
  • 引用数据类型是存储在堆内存中的对象,存储的是对象的引用地址,通过引用来访问和操作,大小不固定。
  • 原始数据类型是按值访问的,每个变量都会存储自己的值,互相独立。
  • 引用数据类型是按引用访问的,多个变量可能会指向同一个对象,操作一个变量会影响其他指向同一对象的变量。
  • 原始数据类型是不可变的,一旦创建就不能被修改
  • 引用数据类型是可变的,可以动态地添加、修改和删除属性

四、【算法】最长公共前缀

1.题目:

编写一个函数来查找字符串数组中的最长公共前缀。

如果不存在公共前缀,返回空字符串 ""

2.解题:

方一:
  1. 先处理特殊情况,如果输入的字符串数组为空,则直接返回空字符串。
  2. 遍历一遍字符串数组,找出最短的字符串的长度,作为最长公共前缀的最大可能长度。
  3. 创建一个新的字符数组 result 来存储最长公共前缀。
  4. 从第一个字符开始,逐个比较每个字符串的对应位置的字符,如果有不同的字符出现,则说明最长公共前缀到此为止。
  5. 如果所有字符串的对应位置的字符都相同,则将该字符添加到 result 中。
  6. 最后返回 result,即为最长公共前缀。
char* longestCommonPrefix(char** strs, int strsSize) {if (strsSize == 0) {return "";}int minLen = strlen(strs[0]);for (int i = 1; i < strsSize; i++) {minLen = fmin(minLen, strlen(strs[i]));}char* result = (char*)malloc((minLen + 1) * sizeof(char));memset(result, 0, (minLen + 1) * sizeof(char));for (int i = 0; i < minLen; i++) {char c = strs[0][i];for (int j = 1; j < strsSize; j++) {if (strs[j][i] != c) {result[i] = '\0';return result;}}result[i] = c;}return result;
}
方二:
  1. 首先检查输入的字符串数组长度是否为0,如果是,则直接返回空字符串""。

  2. 为存储最长公共前缀的字符数组same分配内存空间,大小为第一个字符串的长度加1,加1是为了存储字符串结束符'\0'。

  3. 初始化变量len为0,表示当前比较的字符索引位置,f为第一个字符串的第一个字符。

  4. 进入循环,判断当前位置len上的字符是否为字符串结束符'\0',如果不是则继续比较。

  5. 在内部循环中,遍历除第一个字符串外的所有字符串,逐个比较它们在当前位置len上的字符是否与第一个字符串相同,如果不同,则将same在位置len处设为结束符'\0',表示当前位置为最长公共前缀,然后返回same

  6. 如果所有字符串在当前位置len上的字符都相同,则将该字符存储到same的当前位置len处,然后继续比较下一个位置的字符。

  7. 循环直到某个字符串遍历完或者出现字符不相同的情况,此时将same在位置len处设为结束符'\0',表示最长公共前缀结束,然后返回same

  8. 最后将same在当前位置len处设为结束符'\0',确保返回的字符串正确结束。

  9. 返回存储最长公共前缀的字符数组same

char* longestCommonPrefix(char** strs, int strsSize) {if (strsSize == 0) return ""; char* same = (char*)malloc((strlen(strs[0])+1) * sizeof(char));int len=0;char f=strs[0][len];while(f != '\0'){for(int i=1;i<strsSize;i++){if(strs[i][len]!=f){same[len] = '\0';return same;}}same[len]=f;len++;f=strs[0][len];}same[len] = '\0';return same;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1045800.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

双指针,滑动窗口

今天也是闲来无事&#xff0c;想去做一下&#xff0c;之前学过的某个题型&#xff0c;但是在中间突然发现了这个题&#xff0c;那时候年少无知&#xff0c;做不出来&#xff0c;今天也是很轻松的用双指针轻松拿捏&#xff0c;因此发帖。 传送门&#xff1a;逛画展 题解&#x…

VRRP虚拟路由实验(华为)

思科设备参考&#xff1a;VRRP虚拟路由实验&#xff08;思科&#xff09; 一&#xff0c;技术简介 VRRP&#xff08;Virtual Router Redundancy Protocol&#xff09;是一种网络协议&#xff0c;用于实现路由器冗余&#xff0c;提高网络可靠性和容错能力。VRRP允许多台路由器…

官网下载IDE插件并导入IDE

官网下载IDEA插件并导入IDEA 1. 下载插件2. 导入插件 1. 下载插件 地址&#xff1a;https://plugins.jetbrains.com/plugin/21068-codearts-snap/versions 说明&#xff1a;本次演示以IDEA软件为例 操作&#xff1a; 等待下载完成 2. 导入插件 点击File->setting->Pl…

数据仓库与数据挖掘(第三版)陈文伟思维导图1-5章作业

第一章 概述 8.基于数据仓库的决策支持系统与传统决策支持系统有哪些区别&#xff1f; 决策支持系统经历了4个阶段。 1.基本决策支持系统 是在运筹学单模型辅助决策的基础上发展起来的&#xff0c;以模型库系统为核心&#xff0c;以多模型和数据库的组合形成方案辅助决策。 它…

2024年第八届人工智能与虚拟现实国际会议(AIVR 2024)即将召开!

2024年第八届人工智能与虚拟现实国际会议&#xff08;AIVR 2024&#xff09;将2024年7月19-21日在日本福冈举行。人工智能与虚拟现实的发展对推动科技进步、促进经济发展、提升人类生活质量等具有重要意义。AIVR 2024将携手各专家学者&#xff0c;共同挖掘智能与虚拟的无限可能…

利用Sentinel解决雪崩问题(二)隔离和降级

前言&#xff1a; 虽然限流可以尽量避免因高并发而引起的服务故障&#xff0c;但服务还会因为其它原因而故障。而要将这些故障控制在一定范围避免雪崩&#xff0c;就要靠线程隔离(舱壁模式)和熔断降级手段了&#xff0c;不管是线程隔离还是熔断降级&#xff0c;都是对客户端(调…

图片管理系统:原理、设计与实践

title: 图片管理系统&#xff1a;原理、设计与实践 date: 2024/4/9 20:04:25 updated: 2024/4/9 20:04:25 tags: 图片管理存储组织上传采集处理编辑搜索检索展示分享AI应用 第一章&#xff1a;图片管理系统概述 1.1 图片管理系统简介 图片管理系统是一种用于存储、组织、处理…

rocketmq和rabbitmq总是分不清?

1. 官方解答 摘自百度搜索&#xff1a; 2. 通俗易懂的回答

【unity】【C#】UGUI组件

文章目录 UI是什么对UI初步认识 UI是什么 UI是用户界面&#xff08;User Interface&#xff09;的缩写&#xff0c;它是用户与软件或系统进行交互的界面。UI设计旨在提供用户友好的界面&#xff0c;使用户能够轻松地使用软件或系统。UI设计包括界面的布局、颜色、字体、图标等…

爬虫逆向实战(40)-某江酒店登陆(AES、MD5)

一、数据接口分析 主页地址&#xff1a;某江酒店 1、抓包 通过抓包可以发现数据接口是/api/member/login 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现&#xff0c;有TDFingerprint、blackBoxMd5、password和sw四个加密参数&#x…

Java快速入门系列-6(数据库编程与JDBC)

第六章:数据库编程与JDBC 6.1 SQL基础6.1.1 SQL基本结构与命令6.1.2 SQL高级查询6.1.3 SQL子查询与联接6.2 JDBC原理与使用6.2.1 JDBC驱动程序与URL6.2.2 Statement、PreparedStatement与CallableStatement6.2.3 数据库事务处理6.3 数据库连接池6.4 事务管理6.1 SQL基础 SQL(…

数据结构——线性表(链式存储结构)

语言&#xff1a;C语言软件&#xff1a;Visual Studio 2022笔记书籍&#xff1a;数据结构——用C语言描述如有错误&#xff0c;感谢指正。若有侵权请联系博主 一、线性表的逻辑结构 线性表是n个类型相同的数据元素的有限序列&#xff0c;对n>0&#xff0c;除第一元素无直接…

电商技术揭秘十八:电商平台的云计算与大数据应用小结

电商技术揭秘相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xf…

Day:006(1) | Python爬虫:高效数据抓取的编程技术(爬虫工具)

selenium介绍与安装 Selenium是一个Web的自动化测试工具&#xff0c;最初是为网站自动化测试而开发的&#xff0c;类型像我们玩游戏用的按键精灵&#xff0c;可以按指定的命令自动操作&#xff0c;不同是Selenium 可以直接运行在浏览器上&#xff0c;它支持所有主流的浏览器&am…

社交网络的分布式治理:分析Facebook在区块链社区中的角色

随着区块链技术的快速发展&#xff0c;社交网络的治理模式也逐渐受到关注。传统的社交网络往往由中心化的平台掌控&#xff0c;用户的权力和参与度受到限制&#xff0c;而区块链技术为社交网络的分布式治理提供了新的解决方案。本文将深入探讨社交网络的分布式治理&#xff0c;…

使用R语言计算矩形分布(均匀分布)并绘制图形

理论部分 矩形分布&#xff08;均匀分布&#xff09;&#xff0c;是指在某一区间内&#xff0c;随机变量取任何值的概率都是相同的。这种分布的概率密度函数在一个特定的区间内是一个常数&#xff0c;因此其图形呈现出一个矩形的形状&#xff0c;故得名为“矩形分布”。在概率…

ETLCloud结合kafka的数据集成

一、ETLCloud中实时数据集成的使用 在ETLCloud中数据集成有两种方式&#xff0c;一种是离线数据集成&#xff0c;另一种便是我们今天所要介绍的实时数据集成了&#xff0c;两者的区别从名字便可以得知&#xff0c;前者处理的数据是离线的没有时效性的&#xff0c;后者的数据是…

Python学习之-pyechart详解

前言&#xff1a; 什么是pyechart&#xff1f; Pyecharts 是一个用于生成 Echarts 图表的 Python 库。Echarts 是一个由百度开源的数据可视化工具&#xff0c;它提供的图表种类丰富&#xff0c;交互性强&#xff0c;兼容性好&#xff0c;非常适合用于数据分析结果的展示。Pyec…

高标清4K音视频编码处理平台JR600系列

详细介绍&#xff1a; JR600编码处理平台具备6个模组高集成化数字前端综合型设备&#xff0c;每个模块可单独配置&#xff0c;包括4x3G-SDI&#xff08;4KHEVC/H.265)超高清编码板卡、HD-SDI编码板卡、数字/模拟音频编码板卡、模拟视频编码板卡这些功能的组合。因该设备的高度…

酷开科技在大数据及人工智能推动下,成功将酷开系统与AI融合

随着科技的不断发展&#xff0c;以及大数据这个概念的出现&#xff0c;让看似冷冰冰的数字开始具备了温度&#xff0c;开始让数字产生了温暖的价值&#xff0c;也让各个行业看到了大数据的作用。酷开科技生态的核心场景是家庭、是客厅&#xff0c;无论是以酷开科技为代表的OTT&…