【前端面试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;
    }

相关推荐
程序猿小D19 分钟前
第二百六十七节 JPA教程 - JPA查询AND条件示例
java·开发语言·前端·数据库·windows·python·jpa
wangyue422 分钟前
c# 线性回归和多项式拟合
算法
&梧桐树夏34 分钟前
【算法系列-链表】删除链表的倒数第N个结点
数据结构·算法·链表
QuantumStack38 分钟前
【C++ 真题】B2037 奇偶数判断
数据结构·c++·算法
今天好像不上班1 小时前
软件验证与确认实验二-单元测试
测试工具·算法
奔跑吧邓邓子1 小时前
npm包管理深度探索:从基础到进阶全面教程!
前端·npm·node.js
前端李易安1 小时前
ajax的原理,使用场景以及如何实现
前端·ajax·okhttp
wclass-zhengge1 小时前
数据结构篇(绪论)
java·数据结构·算法
何事驚慌1 小时前
2024/10/5 数据结构打卡
java·数据结构·算法
结衣结衣.1 小时前
C++ 类和对象的初步介绍
java·开发语言·数据结构·c++·笔记·学习·算法