面试题

488 阅读8分钟

收钱吧

面试题

1.你的工作经历以及你在工作中学到了什么

2.自己搭建过webpack吗,一般分为那几个环境,开发环境主要配置哪些。webpack的loader和plugin的区别

3.babel的作用

4.如何生成一个1-10的随机数 Math.floor(Math.random()*10+1)

5.你认为sso是怎样实现的

6.箭头函数和普通函数的区别

7.var let const的区别

8.js的基本类型,内置对象有哪些

9.工作中运用js还是ts,对ts有了解吗

10.有用过fetch api吗

11.有了解commonjs 和AMD 等之类的

  1. HTTP有哪些状态码

13.px,rem,em的区别

14.你为什么选择前端这个岗位

聊聊面试题

2.webpack的loader和plugins的区别

loader(文件加载器):能够加载资源文件,并对资源文件进行一系列的处理,比如压缩和编译等。最终一起打包到指定文件中。对模块源码的转换,对loader描述了webpack如何处理非JavaScript模块,并引入到bulid模块,loader可以将不同的语言(TypeScript)转成JavaScript,或者将内联图像转成data URL。比如(css-loader,style-loader)

plugins(插件):解决loader无法解决的问题。从打包优化到压缩,到重新定义环境变量。plugin是一个扩展器,它丰富了wepack本身,针对是loader结束后,webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,会监听webpack打包过程中的某些节点,执行广泛的任务

3.babel是一个JS编译器

语法转换

通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)

源码转换 (codemods)

6.箭头函数和普通函数的区别

普通函数的this总是指向调用它的那个对象。

箭头函数没有自己的this,指向定义时所在的对象,而不是使用时的对象。

不可以当做构造函数,也就是说,不可以使用new。

不可以使用arguments对象,该对象在函数体内不存在,如果要用,可以用rest参数代替。

不可以使用yield命令,因此箭头函数不能用作Generator函数。

8.js的基本数据和内置对象

基本数据:Boolean、null、undefined、String、Number、symbol

内置对象:Array对象、Date对象、string对象、正则表达式对象、Global对象

12.HTTP的状态码

1xx 信息提示

2xx 请求成功

3xx 请求重定向

4xx 客户端请求错误

5xx 服务器错误

13.px、rem、em的区别
px: (像素),相对长度单位。px是相对于显示器屏幕分辨率。

em: 相对长度单位。相对于对象内文本的字体大小,如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

em的特点:
1.em值并不是固定的
2.em会继承父级元素的字体大小
1em = 16px

rem: 相对单位
与em的区别在于rem相对的只是HTML根元素。

菜鸟

面试问题

1.先做一下自我介绍,以及工作中的技术栈

2.css垂直水平居中有哪些方式

3.css的弹性布局,那些是container的属性,哪些是item的属性

4.positon的定位有哪些,fixed和absolute的区别,默认是什么

5.简述一下盒模型

6.简述一下原型链

7.用过ES6的哪些方法

8.描述一下this

9.异步处理有哪些方式

10.webpack打包主要做了什么,用过哪些loader

11.描述一下vue的原理,react和vue有什么区别

12.sass、less、css的区别

13.echarts常用了哪些配置,eslint常用了哪些配置

14.说一下rem

15.聊项目上的问题

16.你觉得你最擅长什么

聊聊面试题

2.css垂直水平居中有哪些方式

1.display: flex

.parent {
    display: flex;
    justify-content: center;
    align-item: center
}

2.position

.parent {
    position: relative;
}
.son {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    /*
    margin-left: -50px;
    margin-top: -50px
    */
    // 或者
    transform: translateX(-50%) translateY(-50%);
}
3.弹性布局flex
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
<!--container的属性-->
.flex-container {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse   // 排列方式
    justify-content: flex-start | flex-end | center | space-between | space-around  // 横轴的对齐方式
    align-items: : flex-start | flex-end | center | baseline | stretch // 纵轴的对齐方式
    flex-wrap:  //设置弹性盒子的子元素超出父容器时是否换行。
    align-content:  //修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
    flex-flow: flex-direction 和 flex-wrap 的简写
}
<!--item的属性-->
.flex-item: {
    flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]// 子元素如何分配
    /**
    auto: 计算值为 1 1 auto
    initial: 计算值为 0 1 auto
    none:计算值为 0 0 auto
    inherit:从父元素继承
    [ flex-grow ]:定义弹性盒子元素的扩展比率。
    [ flex-shrink ]:定义弹性盒子元素的收缩比率。
    [ flex-basis ]:定义弹性盒子元素的默认基准值。
    */
}
4.position的定位
static: 静态定位,是定位的默认值。没有定位,就正常显示
relative: 相对定位,相对于正常元素进行定位。
absolute: 绝对定位,相对于除了static定位以外的第一个父元素定位
fixed: 生成绝对定位,相对于浏览器窗口的定位。
5.css的盒模型

CSS盒模型包含padding+border+content+margin

IE 盒模型与W3C盒模型的区别:

IE盒模型的内容包含 padding+border

6.原型链

原型和实例

每一个构造函数(contructor)都有一个原型对象(prototype),原型对象都有一个指向构造函数的指针,而实例(instance)都有一个指向原型对象内部的指针。假如当我们让一个原型对象等于另一个类型的实例。此时原型对象包含一个指向另一个原型的指针,另一个原型中也包含一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,这样层层递进,就构成了实例与原型的链条。这就是所谓的原型链。

在JavaScript中,万物都是对象。对象与对象之间存在着继承关系,在JavaScript中通过prototype指向父级对象,直到指向Object对象为止,这样就形成了一个指向原型的链条。

7.ES6 es6.ruanyifeng.com/

1.解构赋值

2.let const 命令

3.数组的扩展

扩展运算符(...)

Array.from()

Array.of() // 将一组值转成数组

find()、findIndex()

includes() 

flat()

4.对象新增的方法

Object.is()

Object.assign()

Object.keys()

Object.values()

Object.entries()

5.Promise

6.async await

7.Set 和 Map

8.this

普通函数的this谁调用它就指向谁,箭头函数没有绑定自己的this。

1.默认绑定(全局)

2.隐式绑定

3.显式绑定(call、apply、bind)

bind是创建一个新的函数,并且函数内部的this为传入的第一个参数,我们必须手动调用它。

call、apply调用一个函数,两者的区别在于两个传入的参数不同,apply是数组或类似数组。

4.new 绑定

9.js处理异步的几种方式

1.callback()

2.事件的监听(on,bind,listen,addEventListener,observe)

3.发布订阅者

4.Promise

5.async/await

10.webpack

webpack做的就就是分析代码、转换代码、编译代码、输出代码

常见的loader(模块转换器)

css-loader、url-loader、file-loader、script-loader、babel-loader、style-loader、eslint-loader、image-loader

常见的plugin

define-plugin:定义环境变量

terser-webpack-plugin:通过TerserPlugin压缩ES6代码

html-webpack-plugin 为html文件中引入的外部资源,可以生成创建html入口文件

mini-css-extract-plugin:分离css文件

clean-webpack-plugin:删除打包文件

happypack:实现多线程加速编译

11.谈一谈 Vue 和React 的认识

相同点:

1.使用虚拟DOM

2.提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件

3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库

不同点:

1.在 React 应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。如要避免不必要的子组件的重渲染,你需要手动实现;在Vue应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实需要被重渲染,开发者不需要考虑组件是否需要重新渲染之类的优化。

2.在React中,一切都是JavaScript,所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。你可以使用完整的编程语言JavaScript功能来构建你的视图页面;在Vue中有自带的渲染函数,Vue也支持JSX,Vue官方推荐使用模板渲染视图。组件分为逻辑类组件和表现类组件。

3.组件作用域内的CSS。CSS作用域在React中是通过CSS-in-JS的方案实现的;在Vue中是通过给style标签加scoped标记实现的。

4.Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。

12.Sass、Less、CSS

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量($) (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量(@)、Mixin、函数等特性,使 CSS 更易维护和扩展。