2024年7月面试

面试题目

Vue

1、this.location、window.location

问 在 Vue.js 中，你可以直接通过 this.location 来访问当前页面的 URL吗？
答案 不能

Vue.js 组件实例并没有内置的 location 属性来获取 URL。相反，通常情况下，你可以通过JavaScript 的 window.location 对象来获取当前页面的 URL 信息。

拓展：在 js 函数中也不能使用 this.location 获取URL。全局函数和对象方法都不行。都是要使用 window.location , window.location 包含了当前页面的URL相关信息。

• 关于 this 关键字：
  在 JavaScript 函数中，this 关键字的指向取决于函数被调用的方式。通常情况下：
  • 在全局函数中，this 指向全局对象（在浏览器中通常是 window 对象）。
  • 在对象方法中，this 指向调用该方法的对象。

弄混的地方 我在在线js编译器以及f12中都能输出 this.location
原因 标准的 JavaScript 在浏览器环境中，全局函数的 this 默认指向全局对象 window，但全局函数本身并没有 location 属性。因此，正确的做法仍然是使用 window.location 来访问当前页面的 URL，这是广泛接受和标准化的做法，适用于所有主流浏览器和 JavaScript 运行时环境。

如果你在特定的环境中发现 this.location 可用，并且能够成功获取页面 URL，这可能是该环境对 JavaScript 上下文或全局对象进行了某种定制化或特殊处理。

2、vue性能优化

问 提出三种以上优化vue性能的方法
答

3、动态组件

问 vue如何实现动态组件，并举例说明使用场景。
答 使用 <component> 元素并配合动态绑定的 is
使用场景：Tab切换、表单步骤、权限控制（普通用户跟管理员看到的不一样）

4、组件通讯方式

• 父子组件
• 祖孙组件

5、vue2\vue3有什么区别

6、keep-alive

7、vue-router

8、vue2\vue3在响应式实现上有什么区别

9、Mixin

__生命周期和属性冲突解决__

• 选项合并: 对于大部分选项，Vue 会将它们合并成一个数组。例如，对于 created 生命周期钩子，如果多个 Mixin 定义了相同的钩子，Vue 会按照混入的顺序依次调用它们，最后再调用组件自身的生命周期钩子。

const mixinA = {
  created() {
    console.log('Mixin A created');
  }
};

const mixinB = {
  created() {
    console.log('Mixin B created');
  }
};

Vue.component('my-component', {
  mixins: [mixinA, mixinB],
  created() {
    console.log('Component created');
  }
});
输出顺序
Mixin A created
Mixin B created
Component created

• 数据对象冲突: 对于 data，methods 等选项，如果多个 Mixin 中定义了相同的键，Vue 会采用 “最后声明优先” 的原则，即后面声明的 Mixin 会覆盖之前的声明。组件自身的 data 属性和 method 方法如果与任何 mixin 中的定义冲突，最终会被最后混入的 mixin 所覆盖。

const mixinA = {
  data() {
    return {
      message: 'Mixin A message'
    };
  }
};

const mixinB = {
  data() {
    return {
      message: 'Mixin B message'
    };
  }
};

Vue.component('my-component', {
  mixins: [mixinA, mixinB],
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `
});
输出的 message 将会是 Mixin B message，因为 mixinB 在 mixinA 后面声明。

10、vue3中的各种ref用法
https://m.jb51.net/javascript/295393cb4.htm

• ref(): 接收一个值并返回一个响应式的对象，可以使用.value 属性来访问和修改这个值，模版中使用的时候可以省略.value 。
• toRef(obj, key): 根据一个响应式对象中的一个属性，创建一个响应式的 ref，并且该 ref 和原对象中的属性保持同步。
• toRefs(obj): 将一个响应式对象转换成一个普通对象，其中普通对象的每个属性都是响应式的 ref。
• isRef(value): 判断某个值是否是 ref 对象。
• unref(value): 用于解除响应式引用
• shallowRef(value): 创建一个浅层的 ref，只有 value 属性是响应式的，深层的属性不具备响应式。
• triggerRef(ref): 强制浅层的 ref 发生改变时触发响应式。
• customRef(factory): 自定义 ref 对象，可以显式地追踪某个值的响应式变化。

问 ref 和 reactive 的区别
答

Webpack、Vite

1、vite的打包编译速度为什么会比webpack快

2、热更新是如何实现的

3、两者的区别

CSS

1、background-color填充区域

题目 如果给一个元素设置background-color,它的颜色会填充哪些区域
答案 background填充区域默认为content、padding、border区域。
解析

• background填充区域默认为content、padding、border区域。
• 该行为默认由background-clip（背景剪裁）决定，默认值为border-box
• 该属性对应的background填充对应区域如下：
• 注意：为border-box时，除非border属性是非solid、透明（transparent）、半透明才能看到视觉效果，不然会被边框的样式效果覆盖。

关于为什么有些css属性要加-webkit前缀

要跟box-sizing区分

• box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等（盒模型切换）
• 默认值：content-box（标准盒模型）
  元素实际大小 = width（content） + padding + border + margin
• 其他值：
  border-box（IE怪异盒模型）:
  元素实际大小 = width（content + padding + border）+ margin
  inherit 从父元素继承
• 不管box-sizing的值是什么，都不会影响原有的背景剪裁方式，都是通过background-clip的值决定

2、position:relative

问 position:relative是如何进行定位的
答 是元素相对于自身在文档流中位置的微调。不会脱离文档流。
（其他的作用就是为了给子元素做absolute绝对定位的参照物）

3、position:absolute

问 position:absolute是相对于什么进行定位的
答 相对与最近的有 position 定位且非 static 的祖先元素（或者文档根元素）。（包括relative、fixed、absolute）

4、选择器的优先级

答

1. !important 重要性
   如果样式规则被声明为 !important，则该样式具有最高优先级，将覆盖所有其他样式规则。
2. 内联样式
   直接在HTML元素的style属性中指定的样式将优先级高于外部样式表中定义的样式。
3. id选择器
4. 类选择器、属性选择器、伪类选择器
   类选择器（.class）、属性选择器（[type=“text”]）和伪类（:hover、:first-child等）具有比元素选择器更高的优先级。
5. 元素选择器

5、CSS3有哪些新选择器

• 通用兄弟选择器 (~)：
  通用兄弟选择器用于选择某个元素之后的所有同级元素，不包括自身。
  例如，div ~ p 会选择所有在 div 元素后出现的 p 元素。
• 伪类选择器：
  :hover：选择鼠标悬停的元素。
  :active：选择活动状态的元素。
  :focus：选择获取焦点的元素。
  :first-child：选择父元素的第一个子元素。
  :last-child：选择父元素的最后一个子元素。
  :nth-child(n)：选择父元素的第 n 个子元素。
  :nth-of-type(n)：选择父元素中特定类型的第 n 个元素。
  :not(selector)：选择不符合指定选择器的元素。
• 伪元素选择器：
  伪元素选择器允许你创建并样式化文档中不存在的元素片段。
  ::before：在元素内容之前插入生成的内容。
  ::after：在元素内容之后插入生成的内容。
  ::first-line：选择元素的第一行文本。
  ::first-letter：选择元素的第一个字母。
• 否定选择器 (:not())：
  否定选择器用于排除特定类型或类的元素，以便更精确地选择目标元素。
  例如，div:not(.special) 选择所有不具有 special 类的 div 元素。
• 状态伪类选择器：
  状态伪类选择器是一种伪类选择器，用于根据元素的状态来应用样式，例如 :hover、:focus、:active 等。
  这些选择器允许根据用户交互的不同状态来改变元素的外观。

6、实现自适应正方形

问 如何实现一个九宫格的抽奖，要求整体为正方形，里面的小格也是正方形。

• padding-top / padding-bottom
  padding 的百分比值是相对于父元素宽度来计算的。

.square {
	width: 50%;
	padding-top: 50%;   // 用padding-top或者padding-bottom把盒子撑起来
}

拓展

• aspect-ratio
  定义或者测试视口的宽高比。可用于媒体查询。
  可以使用 min-aspect-ratio 和 max-aspect-ratio 分别查询最小和最大的值。

element {
  aspect-ratio: auto;   // 默认值，不设置比例 
  aspect-ratio: 1/1;    // 正方形
  aspect-ratio: 16/9;   // 宽屏视频比例 
  aspect-ratio: 9/16;   // 移动端竖屏视频比例
}

/* 最小宽高比 */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */
  }
}

/* 最大宽高比 */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /* cyan */
  }
}

/* 明确的宽高比，放在最下部防止同时满足条件时的覆盖*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }
}

7、css 动画特性

问 css 动画特性知道哪些
答 @keyframes创建动画animation绑定动画、 transform转换器结合transition过渡效果、:hover等鼠标事件结合transition过渡效果

• @keyframes创建动画animation绑定动画

// 百分比
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
// from to
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

// 绑定
.div{
	animation:myfirst 5s;
	-moz-animation:myfirst 5s; /* Firefox */
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
	-o-animation:myfirst 5s; /* Opera */
}

• transform转换器结合transition过渡效果

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

• :hover等鼠标事件结合transition过渡效果

8、> 子元素选择器 :nth-child()

.list img {
  background: blue;
  width: 10px;
  height: 10px;
}
.list>p:nth-child(even) img {
  background: red;
}
.list>p:last-child img {
  background: yellow;
}

<div class="list">
  <p><img/></p>
  <p><img/></p>
  <div class="sub-list">
    <p><img/></p>
    <p><img/></p>
  </div>
  <p><img/></p>
  <div class="sub-list">
    <p><img/></p>
  </div>
</div>
- img元素的颜色是什么？
- blue red blue blue red blue

子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

• :nth-child(n) 选择器
  直接使用时，该选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
• element:nth-child(n)
  该选择器匹配（与element）同类型中的第 n 个同级兄弟元素
  n 是一个参数，可以是关键字（如 odd 或 even），或者一个表达式（如 2n+1）
  odd 选择奇数位置的子元素。
  even 选择偶数位置的子元素。

div :nth-child(2)   // 匹配每一个div中第二个子元素的背景色
{
	background:blue;
}
p:nth-child(2) // 匹配每一个p的父元素的子元素中处于第二个子元素的p
{
	background:blue;
}
上面的代码中
// 表示匹配list的直接子元素中处于偶数位置的p标签
.list>p:nth-child(even) img { 
  background: red;
}

// 表示匹配list直接子元素中的最后一个元素，且该元素为p标签，但是在这里list直接子元素的最后一个元素是class为 sub-list 的div标签，并不是p标签。
.list>p:last-child img {  
  background: yellow;
}


改一下 
// 表示匹配list的后代中，每一个在其父级中位于偶数位置的p标签
.list p:nth-child(even) img { 
  background: red;
}

HTML

1、< q > < /q >

2、< span > 和 < p > 的区别

3、标签嵌套

问 < p>标签里面可以放< div> 吗？可以放< br/>吗？可以发放&nbsp；吗？
答

• < p> 元素在遇到块级元素（如 < div>）或者其他 < p> 元素时会自动闭合，所以不能够在< p>标签里面嵌套< div>。
• 可以放< br/>，换行效果
• 在 < p> 元素内，可以使用HTML实体来表示特殊字符，比如 &nbsp；表示非断空格。空格会被浏览器渲染，但多个连续的空格会被合并成一个。
  

其他嵌套规则

• 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：

<div><h1></h1><p></p></div> —— 对
<a href=”#”><span></span></a> —— 对
<span><div></div></span> —— 错

• 块级元素不能放在< p >里面：

<p><ol><li></li></ol></p> —— 错

<p><div></div></p> —— 错

• 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

h1、h2、h3、h4、h5、h6、p、dt

• li 内可以包含 div 标签 ，li 标签可以包含父级 ul 或者是 ol
• 块级元素与块级元素并列、内嵌元素与内嵌元素并列：

<div><h2></h2><p></p></div> —— 对
<div><a href=”#”></a><span></span></div> —— 对
<div><h2></h2><span></span></div> —— 错

其他空格实体

JS\TS ES6

1、js中 0 , null , undefined , [] , ‘’ , false 之间的关系

• 0 、‘’、 []、 false两两之间是相等的关系，当然非0的其他数字和true相等
• null 和0 、‘’、 []、 false之间并不相等
• undefined 和0 、‘’、 []、 false之间并不相等
• null 和undefined 是相等的
  以上均为 == 或 !=
• 用 = = = 比较时，=== 是严格运算符，由于严格运算符要考虑数据类型，所以0,null,undefined,[],‘’,false之间都不是相等。
• 要注意‘0’与0的区别，‘0’是真值
• 在进行逻辑判断时，0、‘’ 、null 、undefined 均被转换为 false，但是 [] 会转换为 true

console.log(0 == '')  // true
console.log(0 == [])  // true
console.log(0 == false)  // true
console.log('' == [])  // true
console.log('' == false)  // true
console.log([] == false)  // true

console.log(null == undefined) // true
console.log(null === undefined) // false

console.log(null == '') // false
console.log(null == 0) // false
console.log(null == []) // false
console.log(null == false) // false

console.log(undefined == '') // false
console.log(undefined == 0) // false
console.log(undefined == [])  // false
console.log(undefined == false) // false

console.log(!!'0')  // true

if ([]){
    console.log('是true')
}else {
    console.log('是false')
}
// 是true

2、相等判断题

• switch 里面判断用的是 ===

console.log([] == [])  // false
console.log([] === [])  // false
console.log([1,2,3] === [1,2,3])  // false、

console.log(typeof null == typeof window) // true  都是 object

console.log(new String('A') == 'A')  // true
console.log(new String('A') === 'A')  // false
console.log(typeof new String('A'))  // object

3、primise.all()/race()/allSettled()/any()

都是接受一个可迭代对象作为参数，返回一个新的 Promise 对象。

• Promise.all()：用于并行执行多个Promise，等待所有完成。当所有Promise 都成功（resolve(）fulfilled），返回的Promise 对象才会resolve，只要有一个Promise 失败（rejected），返回的Promise对象就会rejected。
• Promise.race()：竞速，取决于第一个完成的Promise对象，不管是成功还是失败，返回的Promise对象会变为相同的状态。
• Promise.allSettled()：用于等待所有Promise完成，不管是成功还是失败。所有的完成之后返回的Promise变为fulfilled，返回结果是一个数组，数组的元素是对象，包含每一个Promise的状态（status）和结果（value）或原因（result）。
• Promise.any()：用于返回第一个成功的Promise，返回的Promise对象状态也变为fulfilled，如果全部Promise都失败了，则返回的Promise对象状态变为rejected，并返回所有失败的原因。
  
  
  

4、微任务、宏任务

console.log(1)

setTimeout(() =>{
   Promise.resolve().then(() => {
       console.log(2)
   })
    console.log(3)
},0)

new Promise((resolve, reject) => {
    let i = 0;
    for (i;i<=1000;i++) {
        if (i === 1000) {
            resolve()
        }
    }
    console.log(4)
}).then(() =>{
    console.log(5)
})

console.log(6)

// 输出  1、4、6、5、3、2

console.log(1)

setTimeout(() => {
    console.log(2)
},0)

new Promise((resolve, reject) => {
    for (let i = 0;i<10000;i++) {
        console.log('循环执行中')
        if (i === 9999) {
            console.log(5);
            resolve();
        }
    }
    console.log(3)
}).then(() => {
    console.log(4)
})
// 1
// (10000输出) 循环执行中
// 5
// 3
// 4
// 2

console.log(1)

setTimeout(() => {
    console.log(2)
},0)

new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(5)
        resolve();
    },0);
    console.log(3)
}).then(() => {
    console.log(4)
})

// 1 3 2 5 4

console.log(1)

setTimeout(() => {
    console.log(2)
},5000)

new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(5)
        resolve();
    },0);
    console.log(3)
}).then(() => {
    console.log(4)
})
// 1 3 5 4 2

5、js的异步模式比如setTimeout是不是准时的

6、ts中 any 跟 unknow 的区别

7、new Array() | Array.of()

网络浏览器

1、常见的http请求有哪些？post跟get有什么区别

答 get、post、put、delete

2、取消请求的方法

问 比如有一个频繁切换的tab页，调用同一个接口，在切换的时候上一个tab页的数据请求还未完成，导致渲染错误，如何解决？
答

• AbortController
• CancelToken
  
  
  

3、浏览器的缓存机制

4、跨域

问一 什么情况会发生跨域？如何解决？
答

跨域指的是浏览器的同源策略（Same-Origin Policy）所限制的一种情况，即在一个源（Origin）的文档或脚本试图去获取另一个源服务器上的数据时所面临的限制。
如果两个 URL 的协议、域名和端口三者完全相同，则称它们属于同一个源，否则就是跨域。

解决

• CORS（跨域资源共享）：推荐且最常用的解决方案。服务器通过设置 HTTP 头部信息来声明允许哪些源（域、协议、端口）的请求可以访问资源。具体可以通过设置响应头部 Access-Control-Allow-Origin 来允许指定的源访问。
  
• 在前端开发中，如果需要通过代理来处理跨域请求，可以使用 webpack-dev-server 提供的代理配置功能。在 webpack.config.js 或者 vue.config.js（如果是 Vue 项目）中配置 devServer 的 proxy 选项（一般是开发环境）
  

其他方法

问二 CORS配置是哪个头部？什么时候用通配*？什么时候必须指定具体的域名？

答 Access-Control-Allow-Origin，

5、301、302、303状态码

6、websocket协议跟http协议有什么差别

7、websocket是如何建立连接的

其他

1、重绘、重排、回流

问 以下哪种情况会导致重排/重绘的发生？

重排 （Reflow）浏览器根据当前的布局信息重新计算元素的位置和大小，并重新绘制页面的过程。重排是DOM元素的几何属性变化，DOM树的结构变化，渲染树需要重新计算。
重绘（Repaint）当元素的样式发生变化，比如颜色、背景色等，浏览器会重新绘制这个元素，但不会改变它的位置和大小。
重绘消耗的资源较少，因为它只是更新像素的颜色和样式，而不涉及布局计算。
关系：重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。

触发重排的情况：

• 页面渲染初始化时；（这个无法避免，可以不说）
• 浏览器窗口改变尺寸；
• 修改了元素的样式，比如修改了元素的尺寸、位置、字体等；（修改元素的尺寸（width、height）、位置（top、left）、字体、padding、margin、display、 position、float、overflow）
• 元素内容改变时；
• DOM 结构变化，添加或删除可见的DOM 元素时；
• 获取尺寸信息：当 JavaScript 代码尝试获取某个元素的尺寸（比如宽度、高度、位置等），浏览器可能需要进行重排以确保返回的是最新的信息。

触发重绘的情况：

• 修改元素的颜色（color、background-color等）
• 就是更新元素的可见样式，不会影响布局

重排优化方法

• 合并多次修改：避免多次对 DOM 和样式的频繁操作，可以将多个操作合并为一次操作，或者在操作前先使元素脱离文档流（比如使用 display: none 隐藏元素），完成操作后再放回文档流。

• 将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素（只会重绘）。例如有动画效果的元素就最好设置为绝对定位。

• 使用 CSS 动画：使用 CSS 动画而非 JavaScript 控制动画，因为 CSS 动画可以由浏览器优化，减少重排和重绘的次数。

• 缓存布局信息：如果需要多次读取某个元素的尺寸或位置信息，可以将这些信息缓存起来，避免多次触发浏览器的重排操作。

• 优化样式和布局：尽可能使用简单的布局方式，避免复杂的嵌套结构和过多的浮动元素，这样可以减少浏览器计算布局的复杂度。

• 在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性添加到文档中去，而不是循环添加每一行。
  

2、跨域

问 什么是跨域？举例说明具体的跨域场景。可以如何解决跨域？
答

3、数据埋点

4、响应式布局和自适应布局的区别

5、实现响应式布局有哪些方法

6、对于模块化的理解

7、实时监控视频如何截屏

8、对于UI的还原度要达到多少

9、线上系统出现bug如何调试

看看能不能直接确认问题所在，可以检查日志、网络请求，不行的话就可以去开发或者测试环境中尝试复现，缩小问题范围，定位问题。也可以检查版本更新，看看有没有新的代码提交，有可能是变更引入的新问题。

10、对面向对象的理解

11、小程序分包

12、常用git命令

• git stash
  就是存储储藏！

1. 临时保存修改：git stash
   当你正在进行某项工作，但需要切换到其他分支进行紧急修复或者其他任务时，可以使用 git stash 将当前的修改存储起来。
2. 查看存储的修改：git stash list
   使用 git stash list 可以查看当前存储的所有 stash 列表。
3. 应用 stash：
   如果需要恢复之前存储的修改，可以使用 git stash apply 或者 git stash pop。

• git stash apply：应用最新的 stash，但并不删除 stash 列表中的记录。
• git stash pop：应用最新的 stash，并从 stash 列表中删除这个 stash。

4. 清空 stash 列表：git stash clear
   如果需要清除所有 stash 记录，可以使用 git stash clear。

• 撤销提交（git revert）
  用于撤销已经提交到远程仓库的更改，并且它的影响会体现在你的本地和远程仓库中。
  是创建一个新的提交来撤销旧的提交，本地仓库会多一个新的撤销提交，不会影响历史记录。
  如果需要同步到远程仓库再git push。
  
• 版本回退（git reset）
  
  
  

13、从地址栏输入URL到呈现页面发生了什么

https://blog.csdn.net/jiao_0509/article/details/82491299
https://cloud.tencent.com/developer/article/1793846
答 解析URL、DNS域名解析获取IP地址、TCP三次握手建立连接、发送HTTP请求报文（分割成带有序号的http报文段）、（中间还经历了ip协议相关的中转）、服务器接收到请求返回响应、浏览器渲染页面

14、302临时重定向地址

问 302临时重定向的地址是如何通知客户端的？
答 通过响应中的Location字段

15、http1、http1.1、http2的区别

https://www.explainthis.io/zh-hans/swe/http1.0-http1.1-http2.0-difference

16、TCP与UDP的区别

https://www.explainthis.io/zh-hans/swe/tcp-udp

代码题

1、使用while、promise、await，实现从0开始，每隔一秒输出一个数，最大为5.

async function inputNum (Max) {
    let i = 0;
    while(i < Max) {
        console.log(i);
        i++;
        await delay(1000);
    }
}
function delay(time) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        },time)
    })
}
inputNum(5);

2、Map相关

const map = new Map()
map.set(true, 0)
map[true] = 10
console.log(map.get(true))
console.log(map.get('true'))
console.log(map['true'])
// 输出  0 undefined 10

const map = new Map()
map['bla'] = 'balala'
console.log(map.has('bla'))   // false
console.log(map.delete('bla'))  // false

设置对象属性同样适用于 Map 对象，但这种设置属性的方式不会改变 Map 的数据结构。它使用的是通用对象的特性。‘bla’ 的值未被存储在 Map 中，无法被查询到。其他的对这一数据的操作也会失败。

3、箭头函数和普通函数差异

var num = 10
function cls () {
    this.num = 0;
    return {
        num: 100,
        getNum:() =>{
            console.log(this.num);
        },
        getNum2() {
            console.log(this.num);
        }
    }
}
const o = new cls();
o.getNum();
o.getNum2();

// 输出   0  100

4、函数、变量提升

https://www.nowcoder.com/questionTerminal/fbe7f11544cc4c0fac4c39d9166c5a46

关于个人、项目和公司

1、原公司是做什么的？

答 最开始是做ATM设备的研发、生产和销售业务，以及ATM上的软件，19年的时候转型数字化，专注于智能安防领域。我们部门主要就是为各大银行提供综合解决方案，以满足银行在内控合规、信息展示和安全监控等方面的需求。

2、描述一下印象最深的项目？

3、描述一下最难的项目？

4、为什么做前端开发？喜欢敲代码吗？

5、朋友跟同事一般如何评价自己？

6、你自己如何评价自己？

缺点就是比较犟，有时候会钻牛角尖，

7、为什么离职？

8、未来五年的职业发展目标是什么？

答
AI答案：+ 之前那个层级划分的（向高级前端和前端专家进发）
深入技术领域：专注于某些前端技术栈或框架的深入学习和应用，如React、Vue、Angular等，成为在该领域中的专家。

全栈发展：扩展技能，学习后端开发或者与后端开发更密切相关的技术，例如Node.js、Express等，实现全栈开发能力。

技术领导角色：朝着技术领导、团队负责人等角色发展，带领团队完成复杂项目，并负责技术架构和决策。

9、上一份工资的薪资结构是什么？

答 基本工资、岗位工资、绩效工资、年终奖、项目奖金、补贴（津贴）

10、你觉得你自学能力怎么样？

答 好学 + 学习途径+项目遇到问题解决办法

11、描述一下最近的项目？

12、拿到一个项目需求你会如何着手你的开发工作？谈一下整体思路。

理解需求 分模块 明确设计 讨论数据表 选择合适的框架

13、你认为如何才能写出高质量的代码？

答

• 使用模块化的方式组织代码；
• 尽可能使用组件化的思想，把界面拆成单独的组件，便于复用和维护；
• 遵循统一的命名规范，使用有意义的变量和函数命名，便于理解，并且有清晰的注释；
• 避免过于复杂的逻辑，保持代码简洁和易于理解；（一个函数干一个事情）
• 遵循统一的代码风格，可以选择使用Lint工具（如ESLint）进行代码风格检查；
• 避免大量的重绘和回流，合理使用动画效果，优化JavaScript执行性能等（性能方面）；
• 防止常见的安全漏洞，例如XSS攻击、CSRF攻击等，遵循安全编码的最佳实践（安全性）。

14、描述一下对充分条件和必要条件的理解，举例说明。

面试准备

Vue

1、在filters过滤器中，为什么无法访问组件实例的data

答案

1. 作用域限制： Vue.js 的 filters 只能访问到 Vue 实例中的数据和方法，而不能直接访问组件实例的 data。这是因为 filters 是全局定义的，不属于组件实例的上下文环境，因此无法直接访问组件的 data 对象。
2. 数据绑定的异步特性： Vue 中的数据绑定是响应式的，当数据变化时，相关的视图会自动更新。但是 filters 是一种静态方法，一旦定义就不会响应数据变化，它的参数是输入数据，而不是直接从 data 中取值。
3. 设计原则： Vue.js 的设计鼓励将逻辑和数据分离，使用 computed 属性或 methods 方法来处理复杂的逻辑，而不是将所有逻辑都放在 filters 中。filters 主要用于简单的文本格式化和处理，而不是复杂的数据操作。

如果要访问的话可以怎么做

1. 以需要访问的组件实例的data数据通过参数的形式传入filter
2. 定义一个全局变量 that 指向 this

let that = this;
export defualt {
	data () {
		value1: 1,
	}
	beforeCreate () {
		that = this;
	},
	filters: {
		dataFilter (value) {
			return value + that.value1;
		}
	}
}

3. 换成 computed 或者 methods 方法处理数据

2、v-if 和 v-show 的区别

3、webpack

4、webpack跟vite的区别

5、组件懒加载

实现懒加载的方式有两种

• vue异步组件
  
• Webpack代码分割功能实现懒加载
  
  
  

CSS

1、精灵图

2、浏览器兼容

• WebKit (Chrome, Safari, 新版Edge): -webkit-
  例如: -webkit-border-radius: 5px;
• Mozilla (Firefox): -moz-
  例如：-moz-border-radius: 5px;
• Microsoft (旧版Edge): -ms-
  例如：-ms-overflow-style: none;
• Opera: -o-
  例如：-o-border-radius: 5px;

作用：确保在不同浏览器中都能正确地显示和运行，特别是对于旧版本的浏览器，做一个向后兼容。
在 CSS 中，有些新特性在其最初引入时可能不是所有浏览器都支持，或者支持的方式有所不同。为了确保在各种浏览器上都能正常显示和相同的运行效果，开发者会使用厂商前缀（vendor prefixes），比如 -moz-、-webkit-、-o- 等。

这些前缀的目的是在新特性尚未成为 CSS 标准的一部分之前，提供一种方式让开发者尝试和使用这些新功能，同时确保向后兼容性。同时书写没有前缀的标准属性，就是为了之后加入标准之后的显示的一致性，做向前兼容。

JS、TS、ES6

1、数据类型

答案 8大数据类型：Number、String、Boolean、Null、Undefined（基本数据类型）、Object（引用数据类型，包括：function、Array、Date等）、Symbol、BigInt（ES6新增）。

BigInt 安全存储和操作大整数
Symbol类型的对象永远不相等，即使创建时传入相同的值
比如：Symbol(‘A’) == Symbol(‘A’) false
作用：创建唯一的属性名，防止属性名冲突，模拟私有属性和方法。

console.log(typeof {})   // object 
console.log(typeof [])   // object 
console.log(typeof null)   // object 

console.log(typeof undefined)   // undefined 

console.log(function(){}) // function  ( ƒ (){} )

console.log(typeof NAN) // number

NaN（“Not-a-Number”）非数值。数据类型是number，可以使用isNaN判断是不是NaN
NaN == NaN // false
Number(value)在转换非数值时可能返回NaN，比如Number(undefined)、Number(‘1ae’)

2、Null 和 Undefined 的区别

答案 null 是一个空指针对象，undefined表示一个声明了但是没有赋值的变量的默认值。

• 逻辑判断时，均被转换为 false
• Number(undefined) 输出 NaN
• Number(null) 输出 0
• typeof(undefined) 输出 undefined
• typeof(null) 输出 object
• undefined === null 输出 false
• undefined == null 输出 true

3、= = 跟 = = = 的区别

答案 = = 是相等比较运算符，而= = =是严格相等比较运算符。= = =是比较值的类型和值是否完全相同。而 = = 在比较前会进行隐式类型转换，如果比较的两个值是不同的类型，会转换成相同的类型再进行比较。

4、js垃圾回收策略

5、Map 与 Object 的区别

其他

1、DOM树跟渲染树是什么？

• DOM（Document Object Model）树是文档的逻辑结构表示，描述了文档的内容和层次结构。
• 渲染树是DOM树与CSSOM（CSS Object Model）树结合后的结果，描述了页面的视觉结构（布局）和样式信息。
• 渲染树只包含需要显示的节点及其样式信息，不包含不需要显示的节点（如 、display: none的元素等）
  在页面加载和渲染过程中，浏览器首先解析HTML文档生成DOM树，然后解析CSS生成CSSOM树，接着将DOM树和CSSOM树结合生成渲染树，最终根据渲染树进行布局和绘制，呈现给用户最终的页面。
  

2、为什么要避免在mounted中执行耗时操作