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

一、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.mzph.cn/news/790831.shtml

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

相关文章

redis之主从复制、哨兵模式

一 redis群集有三种模式 主从复制&#xff1a; 主从复制是高可用Redis的基础&#xff0c;哨兵和集群都是在主从复制基础上实现高可用的。 主从复制主要实现了数据的多机备份&#xff0c;以及对于读操作的负载均衡和简单的故障恢复。 缺陷&#xff1a; 故障恢复无法自动化&…

VSCode安装及Python、Jupyter插件安装使用

VSCode 介绍 Visual Studio Code&#xff08;简称VSCode&#xff09;是一个由微软开发的免费、开源的代码编辑器。VSCode是一个轻量级但是非常强大的代码编辑器&#xff0c;它支持多种编程语言&#xff08;如C,C#&#xff0c;Java&#xff0c;Python&#xff0c;PHP&#xff0…

Redis的值有5种数据结构,不同数据结构的使用场景是什么?

文章目录 字符串缓存计数共享Session限速 哈希缓存 列表消息队列文章列表栈队列有限集合 集合标签抽奖社交需求 有序集合排行榜系统 字符串 缓存 &#xff08;1&#xff09;使用原生字符类型缓存 优点&#xff1a;简单直观&#xff0c;每个属性都支持更新操作 缺点&#xff1…

如何在本地搭建集成大语言模型Llama 2的聊天机器人并实现无公网IP远程访问

文章目录 1. 拉取相关的Docker镜像2. 运行Ollama 镜像3. 运行Chatbot Ollama镜像4. 本地访问5. 群晖安装Cpolar6. 配置公网地址7. 公网访问8. 固定公网地址 随着ChatGPT 和open Sora 的热度剧增,大语言模型时代,开启了AI新篇章,大语言模型的应用非常广泛&#xff0c;包括聊天机…

JAVAEE之Cookie/Session

1.Cookie HTTP 协议自身是属于 "无状态" 协议. "无状态" 的含义指的是: 默认情况下 HTTP 协议的客户端和服务器之间的这次通信, 和下次通信之间没有直接的联系. 但是实际开发中, 我们很多时候是需要知道请求之间的关联关系的. 例如登陆网站成功后, 第二…

自定义树形筛选选择组件

先上效果图 思路&#xff1a;刚开始最上面我用了el-input&#xff0c;选择框里面内容用了el-inputel-tree使用&#xff0c;但后面发现最上面那个可以输入&#xff0c;那岂不是可以不需要下拉就可以使用&#xff0c;岂不是违背了写这个组件的初衷&#xff0c;所以后面改成div自定…

基于springboot+vue实现的小区物业管理系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…

yolov9文献阅读记录

本文记录了yolov9文献的阅读过程&#xff0c;对主要内容进行摘选翻译&#xff0c;帮助理解原理和应用&#xff0c;包括摘要、主要贡献、网络结构、主要模块&#xff0c;问题描述和试验对比等内容。 文献摘要前言摘选主要贡献相关工作可逆性结构辅助监督 问题描述信息瓶颈原理可…

Linux 恶意软件“Migo”针对 Redis 进行加密劫持攻击

安全研究人员遇到了一种新的加密劫持活动&#xff0c;该活动使用一种名为 Migo 的新恶意软件&#xff0c;该恶意软件针对 Linux 主机上的 Redis 服务器。在 Cado Security 研究人员注意到在野外利用 Redis 系统的新命令后&#xff0c;该活动曝光了。 初始访问 根据 Cado secu…

传统模型用腻了?GCN图卷积神经网络一键实现西储大学轴承故障诊断!发文新思路!

​ 声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 目录 数据介绍与故障诊断讲解 1.数据…

实时获取 Pacific Time Zone (太平洋时区) 时间

实时获取 Pacific Time Zone [太平洋时区] 时间 1. Google -> Pacific Time2. Pacific Time - exact time nowReferences 1. Google -> Pacific Time 2. Pacific Time - exact time now https://time.is/zh/PT References [1] Yongqiang Cheng, https://yongqiang.blog…

原理图设计的通用规范

原理图各页内容依次为&#xff1a;封面、目录、电源、时钟、CPU、存储器、逻辑、背板&#xff08;母板&#xff09;接口等。 原理图上所有的文字方向应该统一&#xff0c;文字的上方应该朝向原理图的上方&#xff08;正放文字&#xff09;或左方&#xff08;侧放文字&#xff…

文件操作详解(二)

目录 一.文件的顺序读写1.顺序读写函数&#xff08;适合于所有的流&#xff09;1.1 fgetc(读字符)1.2 fputc(写字符)1.3 fgets(读字符串)1.4 fput(写字符串)1.5 fscanf(格式化地读)1.6 fprintf(格式化地写) 2.顺序读写函数&#xff08;只适用于文件流&#xff09;2.1 fread(二进…

蓝桥杯嵌入式学习笔记(9):RTC程序设计

目录 前言 1. RTC介绍 2. 使用CubeMx进行源工程配置 3. 代码编程 3.1 准备工作 3.2 进行bsp_rtc.h编写 3.3 进行bsp_rtc.c编写 3.4 main.c编写 3.4.1 头文件引用 3.4.2 变量声明 3.4.3 子函数声明 3.4.4 函数实现 3.4.5 main函数编写 4. 代码实验 5. 总结 前言 因本人备赛蓝…

分布式链路追踪与云原生可观测性

分布式链路追踪系统历史 Dapper, a Large-Scale Distributed Systems Tracing Infrastructure - Google Dapper&#xff0c;大规模分布式系统的跟踪系统大规模分布式系统的跟踪系统&#xff1a;Dapper设计给我们的启示 阿里巴巴鹰眼技术解密 - 周小帆京东云分布式链路追踪在金…

WPS二次开发专题:如何获取应用签名SHA256值

作者持续关注WPS二次开发专题系列&#xff0c;持续为大家带来更多有价值的WPS开发技术细节&#xff0c;如果能够帮助到您&#xff0c;请帮忙来个一键三连&#xff0c;更多问题请联系我&#xff08;QQ:250325397&#xff09; 在申请WPS SDK授权版时候需要开发者提供应用包名和签…

Jmeter各组件超详细介绍

1、JMeter和Loadrunner的区别&#xff1f; 2、JMeter如何开发脚本的&#xff1f;强化脚本的技术&#xff1f; 代理服务器录制脚本&#xff0c;Fiddler录制脚本&#xff0c;Badboy录制脚本&#xff0c;根据API&#xff0c;手写脚本&#xff0c;根据抓包&#xff0c;手写脚本。 …

docker版Elasticsearch安装,ik分词器安装,用户名密码配置,kibana安装

1、安装es和ik分词器 创建映射目录并赋予权限&#xff1a; mkdir -p /docker_data/elasticsearch/conf mkdir -p /docker_data/elasticsearch/data mkdir -p /docker_data/elasticsearch/plugins chmod -R 777 /docker_data/elasticsearch编写配置文件&#xff1a; vi /dock…

数据结构—红黑树

红黑树介绍 红黑树&#xff08;Red Black Tree&#xff09;是一种自平衡二叉查找树。由于其自平衡的特性&#xff0c;保证了最坏情形下在 O(logn) 时间复杂度内完成查找、增加、删除等操作&#xff0c;性能表现稳定。 在 JDK 中&#xff0c;TreeMap、TreeSet 以及 JDK1.8 的 …

【C++】C++中的list

一、介绍 官方给的 list的文档介绍 简单来说就是&#xff1a; list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中…