面试题目
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、选择器的优先级
答
- !important 重要性
如果样式规则被声明为 !important,则该样式具有最高优先级,将覆盖所有其他样式规则。 - 内联样式
直接在HTML元素的style属性中指定的样式将优先级高于外部样式表中定义的样式。 - id选择器
- 类选择器、属性选择器、伪类选择器
类选择器(.class)、属性选择器([type=“text”])和伪类(:hover、:first-child等)具有比元素选择器更高的优先级。 - 元素选择器
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/>吗?可以发放 ;吗?
答
- < p> 元素在遇到块级元素(如 < div>)或者其他 < p> 元素时会
自动闭合
,所以不能够在< p>标签里面嵌套< div>。 - 可以放< br/>,换行效果
- 在 < p> 元素内,可以使用HTML实体来表示特殊字符,比如
 ;
表示非断空格。空格会被浏览器渲染,但多个连续的空格会被合并成一个。
其他嵌套规则
- 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素:
<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
就是存储储藏!
- 临时保存修改:
git stash
当你正在进行某项工作,但需要切换到其他分支进行紧急修复或者其他任务时,可以使用 git stash 将当前的修改存储起来。 - 查看存储的修改:
git stash list
使用 git stash list 可以查看当前存储的所有 stash 列表。 - 应用 stash:
如果需要恢复之前存储的修改,可以使用 git stash apply 或者 git stash pop。
git stash apply
:应用最新的 stash,但并不删除 stash 列表中的记录。git stash pop
:应用最新的 stash,并从 stash 列表中删除这个 stash。
- 清空 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
答案
- 作用域限制: Vue.js 的 filters 只能访问到 Vue 实例中的数据和方法,而不能直接访问组件实例的 data。这是因为 filters 是全局定义的,不属于组件实例的上下文环境,因此无法直接访问组件的 data 对象。
- 数据绑定的异步特性: Vue 中的数据绑定是响应式的,当数据变化时,相关的视图会自动更新。但是 filters 是一种静态方法,一旦定义就不会响应数据变化,它的参数是输入数据,而不是直接从 data 中取值。
- 设计原则: Vue.js 的设计鼓励将逻辑和数据分离,使用 computed 属性或 methods 方法来处理复杂的逻辑,而不是将所有逻辑都放在 filters 中。filters 主要用于简单的文本格式化和处理,而不是复杂的数据操作。
如果要访问的话可以怎么做
- 以需要访问的组件实例的data数据通过参数的形式传入filter
- 定义一个全局变量 that 指向 this
let that = this;
export defualt {
data () {
value1: 1,
}
beforeCreate () {
that = this;
},
filters: {
dataFilter (value) {
return value + that.value1;
}
}
}
- 换成 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树结合生成渲染树,最终根据渲染树进行布局和绘制,呈现给用户最终的页面。