面试题

收钱吧

面试题

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 等之类的

12. 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 更易维护和扩展。