遇到的面试题02

symant
99 阅读1分钟 
<input v-model="sth" />
// 等同于
<input :value="sth" @input="sth = $event.target.value" />
  • 单行文本溢出的省略样式实现
    text-overflow：ellipsis
  • 定位：sticky\
position: sticky;
top: 0;
  • bind
    bind()  方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
    developer.mozilla.org/zh-CN/docs/…
  • html中link和@import引入区别了解
    1.@import是 CSS 提供的语法规则，只有导入css样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
    2.加载顺序区别\ 在页面加载css的时候加载, 在页面加载完了之后加载（放在<style>标签中）
    3.兼容性区别\ @import是 CSS2.1 语法，只可在 IE5+ 才能识别；link标签是 HTML 元素，无兼容性问题。
  • html标签语义化了解
    阅读时更好理解，无css时有最基本显示样式， 便于开发与维护
  • 了解选择器的优先级
    选择器：developer.mozilla.org/zh-CN/docs/…
    优先级：developer.mozilla.org/zh-CN/docs/…
    image.png
  • 水平垂直居中方式 能说出三种方法 link
  1. 父元素positon: relative;，子元素 absolute + top,right,bottom,left: 0 + margin auto。缺点：子元素必须设置宽高。
  2. 父元素positon: relative;，子元素 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  3. 父元素display: table-cell; vertical-align: middle; (垂直居中)
  4. 子元素display: inline-block;, 父元素text-align: center; (水平居中)
  5. Flex: 父元素display: flex; justify-content: center; align-items: center;
  6. Grid: 父元素display: grid;，子元素align-self: center; justify-self: center;
  • 撑满视口方法
    height: 100vh; height: 100%;
  • 判断变量是否是数组
    x instanceof Array, Array.isArray(), x.constructor === Array;
  • Promise输出。
    juejin.cn/post/684790…
  • 跨域方法
    developer.mozilla.org/zh-CN/docs/…
  • html缓存流程
    juejin.cn/post/684790…
  • 文件名hash的作用。
    缓存避免重复请求，只在更改了内容后（哈希值改变）请求，否则请求到缓存。
  • v-for使用key的原因
    渲染问题。此外 key 还不能使用 v-for 的 index。vue3js.cn/interview/v…
  • git多个场景下的操作\
  • WeakSet Set等区别 vue3js.cn/es6/dataStr… \
  • React常用Hooks\
  • Redux原理与class组件的区别\
  • Vue3新特性 v3-migration.vuejs.org
    composition API, <script setup>, <Teleport>, multi-root node 组建（需要fallthrough Attribtue）, ...
  • 项目中点击回到顶部功能
    监听 document.documentElement.scrollTop，滚动到一定位置显示返回按钮
  • 项目中懒加载功能 IntersectionObserver
    答通过 offsetTop scrollTop ClientHeight 判断是否需要加载
- `offsetTop`：直接通过`img.offsetTop`就可以获取；元素距离顶部高度；
- `scrollTop`：通过`document.documentElement.scrollTop`获取；
- `clientHeight`：通过`document.documentElement.clientHeight`获取；

www.430115.com/article/622
developer.mozilla.org/zh-CN/docs/…

  • 可滚动长网页当元素第一次完全位于视口时打印，答scrollTop判断是否在视口、给元素加个属性判断是否已打印\
  • 大数组中移除小数组里的元素经提示接近最优解\
  • 使变量每次被改变时打印改变之前及之后的值
    Object.defineProperty getter setter；Proxy对象。
  • css box-sizing
  • css常用布局，flex布局和grid布局，css常用单位
    zhuanlan.zhihu.com/p/29070363
    浮动布局，flex，grid。px，em，rem，vhvw，%，
  • 使用css如何写出三角形
    使用 border
  • Symbol类型\
  • Set和Map\
  • 响应式布局, 判断屏幕尺寸属性
    window.screen.availHeight ...
  • 对canvas不了解\
  • 判断数据类型方法
    typeof, instanceof: juejin.cn/post/684790…
  • 继承方法 
    有哪些数据类型, 如何区分. typeof instanceof 有哪些区别
class B extends A {
    constructor(props) {super(props)}
}
  • 事件循环
    juejin.cn/post/684790…
  • localstorage和sessionstorage、cookie区别回答正确\
  • 协商缓存和强缓存，状态码
    juejin.cn/post/684790…
  • 虚拟dom
    js对象，根据其渲染出真正的DOM树。
  • 合并有序数组：双指针\
  • css选择器实现列表项，奇数行一个样式，偶数行一个样式，答伪类选择器 :nth-child(2n)\
  • ES6新方法\
  1. const let；
  2. 模板字符串和一些字符串方法；startsWith,includes...
  3. 解构赋值；数组新增find, flat, includes, from, filter
  4. 对象：...扩展运算符，Object.assign({}, obj)浅拷贝。
  5. 方法：箭头函数，函数参数默认值。
  6. Symbol，Set，Map，Promise
  7. super，Class
  8. module、export、import

  • promise.all
    Promise.all() 方法接收一个 promise 的 iterable 类型. developer.mozilla.org/zh-CN/docs/…

  • 数组方法\

  • vue双向数据绑定
    把Model绑定到View，当更新Model时，View就会自动更新, 原理是响应式↓

  • vue响应式数据
    响应式对象其实是 JavaScript Proxy, 在以前vue2时使用getter setter。

  • $nextTick
    cn.vuejs.org/api/general…
    在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。

  • data为什么返回函数
    在组件化实现的时候，每个实例可以维护一份被返回对象的独立的拷贝，而不是共享同一个对象的引用。

  • ![] == []\ true

  • null == undefined\ true

  • NaN == NaN\ false

  • 0.1 + 0.2 == 0.3\ false 双精度64位浮点数 developer.mozilla.org/zh-CN/docs/… image.png

  • js event loop以及宏任务和微任务

setTimeout(() => console.log('a'));
Promise.resolve().then(
   () => console.log('b')
 ).then(
   () => Promise.resolve('c').then(
     (data) => {
       setTimeout(() => console.log('d'));
       console.log('f');
       return data;
     }
   )
 ).then(data => console.log(data));

output: bfcad， a在宏任务队列顶，注册微任务b，主代码执行完成执行b，注册c，d放宏任务队列，输出f，返回 resolve 传入的c, 打印c，微任务完毕，宏任务a取出，宏任务d取出。

  • JS垃圾回收 juejin.cn/post/703859…
  • 写出10个以上CSS选择符，选择符优先级算法如何计算?内联和!important哪个优先级高? 写出5个以上CSS中可以继承父元素的属性?
  • CSS重绘 重排
  • Generator
_array = [
typeof '', 
typeof {age:25}, 
typeof undefined , 
typeof 5, 
typeof false, 
typeof Symbol(55), 
typeof ['a']
];
["string", "object", "undefined", "number", "boolean", "symbol", "object"]
avatar
文章
阅读
粉丝