常见前端面试题1

1.node导出模块有哪两种方式，说说它们的区别

1、module.exports

• 我们可以直接通过为 module.exports 赋值的方式来导出模块
• module.exports 可以导出单个成员
• exports 的功能 module.exports 都能实现

2、exports

• exports 变量是 node 提供的一个对 module.exports 的引用。
• exports 用添加属性的方式来导出，且只能导出一个对象。
• 如果直接将 exports 变量指向一个值，不会影响 module.exports ，但是这样等于切断了 exports 与 module.exports 的联系。

2.说一下前端渲染和后端渲染的优缺点

后端渲染（SSR）：
后端渲染的情况，由后端接受请求后处理数据并生成html返回给浏览器，浏览器只进行了HTML的解析和显示。
优点：

• 对 SEO 友好
• 首屏加载快
• 不占用客户端资源

缺点：

• 对服务器压力大
• 不利于前后端分离，开发效率低

前端渲染（SPA、单页面应用）：
前端渲染就是指浏览器会从后端得到信息，然后由浏览器来完成的将这些信息解析成HTML，再进行显示。
优点：

• 用户体验更好，可以无请求更新画面，更接近于原生 App
• 极大地降低服务器压力
• 前后端分离，前端专注于前端UI，后端专注于 api 开发

缺点：

• 对 SEO 不友好
• 首屏加载速度会比较慢

3.介绍一下es6中Set、Map的区别

• Map 对象是键值对集合，但是 key 不仅可以是字符串还可以是其他各种类型的值包括对象都可以成为 Map 的键
• Set 对象类似于数组，其成员的值都是唯一的，且无法通过下标取值。
• 任意两个 NaN 虽然不相等，但是在 set 和 map 中都会被视作是相等的

4.用过哪些css预处理器，有什么特性？（比如sass、less、stylus、StyledComponent）

• Sass 最早也是最成熟的一款CSS预处理器语言，可以更有效有弹性的写出CSS，支持不包含花括号和分号的方式。受Less影响，已经进化到了全面兼容 CSS 的 SCSS（SCSS 需要使用分号和花括号而不是换行和缩进）
• Less 受Sass的影响较大，但又使用CSS的语法，优点是简单和兼容CSS。
• Stylus 支持的语法要更多样性一点，可以省略花括号"{}", 冒号 “:”, 分号";"，或者直接使用纯 CSS，使用灵活度更高。
• 它们都可以使用变量、常量、嵌套、混入、函数等特性。
• styled-components是针对 react 写的一个 css-in-js 类库，它也可以通过 js 赋能解决了原生 css 所不具备的能力，比如变量、循环、函数等

5.说一下react Context的使用

Context是通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。
React.createContext(defaultValue)：创建一个上下文的容器(组件)， defaultValue 可以设置共享的默认数据，这个容器会提供 Provider 和 Consumer
Provider：在需要传递数据的地方用其包裹，属性 value 中提供什么，它就能向后代树传递什么。如果没有 Provider ，后代树只能获取到defaultValue
Consumer：在需要获取值的地方用 Consumer 包裹，就能通过this.context 取得值。
函数组件使用hook方法 useContext 获取context

• 优点：减少代码层层传递的复杂度
• 缺点：因为依赖祖先组件的传值，子组件的复用性降低了

6.说一下vue中路由跳转和传值的方式

跳转方式：

• router-link
• this.$router.push()
• this.$router.replace()：跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是它会替换掉当前的 history 记录
• this.$router.go(n)：根据 history 记录进行前进后退

传值方式：

• 动态路由
• query
• params

使用路由与路径的注意事项：

• 使用 params 时是不能通过 path 跳转的
• query 会在路径中变成 参数名 = 参数值 的形式
• 动态路由和 query 属性传值页面刷新参数不会丢失，params 会丢失。
• query、params 可以传递一个也可以传递多个参数。动态路由想要传递多个值需要用/隔开，
• 动态路由和 parmas 的值可由 this.$route.params 里获取，query 的值在this.$route.query 里获取
• 动态路由可以通过路由解耦的方式获取值。在配置路由的时候添加 props 属性为 true ,在需要接受参数的组件页面通过 props 进行接受