美团面经学习（二）

今天一定不拖延
100 阅读6分钟
  • 把rgb字符串转换成对应的#的形式
  • undefined和null的区别
  • 单页面应用和多页面应用
  • npm和pnpm的区别
  • import和require的时候干了什么
  • package.json的^0.0.1的^是什么意思，还有什么别的符号吗
  • js作用域理解，哪些方式会改变作用域
  • 防抖节流
  • loader和plugin的区别各自的作用

把rgb字符串转换成对应的#的形式

 function rgb2hex(sRGB) 
{
    // 其中\(表示匹配左括号  \s*表示匹配空白字符任意次
    const match = sRGB.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    if (match) 
    {
      console.log('match',match)
        const [, r, g, b] = match; // 解构匹配结果
        console.log('r',r,'g',g,'b',b)
        const hexColor = `#${twodigit(r)}${twodigit(g)}${twodigit(b)}`;
        return hexColor.toLowerCase();
    } else 
    {
        return sRGB;
    }
    function twodigit(n)
    {
        //rgb(0,0,0)
        let s=Number(n).toString(16)
        return s.length==2?s:'0'+s
    }
}

打印结果：

image.png

match 这里的match[0]包含了整个匹配的字符串，而match[1]、match[2]和match[3]则分别包含了捕获组 (\d+) 中匹配的数字部分。

解释这个正则表达式

  • /^rgb((\d+),\s*(\d+),\s*(\d+))$/
  • /：正则表达式的起始符号，表示正则表达式的开始。
  • ^：表示匹配输入的开始位置。
  • rgb：匹配字符串 "rgb"。
  • (：匹配 "(" 字符。
  • (\d+)：使用括号 () 表示一个捕获组，用来捕获数字，\d 匹配任意一个数字字符，+ 表示匹配前面的表达式1次或多次。
  • ,：匹配逗号和0个或多个空格。
  • \s*：匹配0个或多个空白字符。
  • (\d+)：再次捕获一个数字。
  • ,：再次匹配逗号和0个或多个空格。
  • \s*：再次匹配0个或多个空白字符。
  • (\d+)：再次捕获一个数字。
  • )：匹配 ")" 字符。
  • $：表示匹配输入的结束位置。
  • /：正则表达式的结束符号。

undefined和null的区别

  • null是一个关键字，undefined是一个全局变量。
  • null是一个空对象引用，undefined表示一个未定义的值。
  • 当你想表达一个明确的空值时，可以使用null；当一个变量还未被赋值或者尚未定义时，其值为undefined。
  • 在比较值时，null和undefined是相等的（==），但不严格相等（===）。

单页面应用和多页面应用

  • 单页面应用SPA：
  • 只有一个页面，每一次页面跳转路由是由前端来做，每一次跳转不需要请求html文件，
  • 首屏加载慢，但是页面切换快。
  • seo（搜索引擎优化）优化复杂一点
  • 多页面应用MPA；
  • 有多个页面，每一次跳转路由由后端来做，每一次跳转页面都需要请求一次html文件，
  • 首屏加载快，但是页面切换慢
  • seo（搜索引擎优化）优化简单一点

npm和pnpm的区别

  1. 安装方式：
  • npm：npm使用硬链接来将包安装到node_modules目录中，这意味着如果一个包在多个项目中使用，npm会在每个项目的node_modules中都复制一份该包。
  • pnpm：pnpm使用符号链接来将包安装到项目中，这意味着如果一个包在多个项目中使用，pnpm只会在全局存储一份该包，并在每个项目中创建符号链接指向这个全局包。

2.存储方式：

  • npm：npm默认情况下会将依赖包完整地下载到项目的node_modules文件夹中。
  • pnpm：pnpm使用一种类似于Git的方式存储包，它会将包的不同版本存储在单独的位置，以便在不同项目中共享。

3.缓存机制：

  • npm：npm在本地有一个全局缓存目录，用于存储已经下载的包，每个项目都会从该缓存中获取需要的包。
  • pnpm：pnpm也有类似的全局缓存机制，但它的缓存机制更加智能和高效(比如使用可以并行下载、使用内容地址寻址来存储包，每个文件和目录都可以根据其内容的哈希值进行命名)。

import和require的时候干了什么

import

  • import 是 ECMAScript 6 (ES6) 中引入的模块导入语法。
  • import 是静态导入，即在编译时就会解析模块依赖关系。
  • 只能写在文件开头
  • 示例：import module from './module';
  • 支持命名导出和默认导出
// 命名导出
export function func1() {}
// 默认导出
export default {}

require

  • require 是 CommonJS 规范中用于导入模块的关键字。
  •  require 动态导入，这意味着它在运行时执行，（因此，使用require导入的变量是可以被提升的。)
  • 可以在任何位置被使用（像平时遇到过我在data里面直接require图片路径，然后动态绑定到元素上）
  • require 只能默认导出module.exports = {};
  • 示例：const module = require('./module');

package.json的^0.0.1的^是什么意思，还有什么别的符号吗

  • ^ 符号用于指定一个包的最低兼容版本. 但允许在第一个非零版本号发生变化的情况下进行更新。例如，"^0.0.1" 表示可以安装 0.0.1 版本及以上的最新版本，但不包括 0.1.0 版本。
  • ~: 指定兼容更新的最低版本， 即允许最后一个非零版本号发生变化，例如 "~1.2.3" 表示可以安装 1.2.3 版本及以上但不包括 1.3.0 版本。
  • *: 匹配所有版本
  • ><: 指定大于或小于某个版本的范围，例如 ">1.2.3" 表示可以安装高于 1.2.3 版本的最新版本。

js作用域理解，哪些方式会改变作用域

常见的有全局作用域，函数作用域，块级作用域 改变方法

call、apply、bind

箭头函数，因为箭头函数没有自己的this，他的this会被设成外部

防抖节流

防抖（在一连串连续的触发事件中，只执行最后一次触发的函数）

<script>
    function send(){
        console.log('我们好棒鸭！');
    }
    const btn = document.getElementById("btn");
    btn.addEventListener("click",debounce(send,1000))
    
    function debounce(send,time){
        let name;
        return function(){
            if(name) clearTimeout(name) //name有值，说明上次定时器还没执行完，这时清除上次定时器
            name = setTimeout(function(){
            send()
        }, time);
    }
}
</script>

## 节流（在一连串连续的触发事件中，每隔一定的时间间隔执行一次函数） 就是规定两次事件中间必须至少间隔多少时间

<script>
    function send(){
        console.log('我们好棒鸭！',this);
    }
    const btn = document.getElementById("btn");
    btn.addEventListener("click",throttle(send,1000))

    function throttle(send,delay){
        let pretime = Date.now()
        return function(){
        let arr = arguments //包含传递给函数的每个参数
        if(Date.now() - pretime > delay){//
        send.call(this,...arr)//此时this就是指向btn
        pretime = Date.now()
        }
    }
}
</script>

webpack，loader和plugin的区别各自的作用

loader

  • Loader 用于处理在 webpack 构建过程中引入的各种资源文件（如 JavaScript、CSS、图片等），将它们转换为 webpack 可以处理的模块。
  • Loader 可以对文件进行编译、转换、压缩等操作，从而使这些文件能够被添加到依赖图中，并最终打包到输出的文件中。

Plugin

  • Plugin 用于执行更广泛范围的任务，它可以监听 webpack 构建生命周期的各个阶段，并在特定的时机执行自定义的逻辑。
  • Plugin 可以用于执行打包优化、资源管理、环境变量注入等各种复杂的任务，以满足特定的构建需求。

文章阅读：

一文了解js中导入模块import、import()和require()的区别 - 掘金 (juejin.cn)

带你轻松搞懂防抖和节流，一起手写实现原理 - 掘金 (juejin.cn)

avatar
文章
阅读
粉丝