web 前端面试题

1. 外边框实现方法

1. border
2. 外部div，内部div
3. 伪元素
4. box-shadow
5. outline

2. es6里字符串的方法

1. includes()：返回布尔值，表示是否找到了参数字符串。
2. startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
3. endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
4. repeat()返回一个新字符串，表示将原字符串重复n次。
5. padStart()用于头部补全
6. padEnd()用于尾部补全
7. trimStart() 消除头部空格
8. trimEnd() 消除尾部空格

3. foreach 和 map的区别

相同点：

1. 都是对数组进行循环遍历
2. 接受三个参数（当前循环项，当前索引，原数组）

不同：

1. map返回一个新的数组，foreach 返回undefined
2. map会分配内存空间存储新数组并返回，foreach不会返回数据

4. es6新增数组对象方法

foreach map reduce filter some every 这些方法都是es5 的

es6新增数组方法：
for…of
array.from
array.of
arr.find
arr.findindex
arr.fill

对象：

1. object.is 比较两个值是否相等，可以用于比较NaN ； Object.is(NaN, NaN) // true

   1. es5 == ===

2. object.assign 合并对象

   1. const target = { a: 1 };
      
      const source1 = { b: 2 };
      const source2 = { c: 3 };
      
      Object.assign(target, source1, source2);
      target // {a:1, b:2, c:3}
      

3. object.keys object.values

   1. let obj = {
          'a': 1,
          'b': 2
      };
      
      console.log(Object.keys(obj)) // [ 'a', 'b' ]
      

5. 说说你用过的es6方法

1）let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明
2）箭头函数ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义
3）模板字符串模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串
4）解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
5）for of循环for…of循环可以遍历数组
6）import、export导入导出ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用
7）set数据结构Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数
8）… 展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量
10）class 类的继承ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念

11）async、await使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成
12）Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大
13）Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的
14）Proxy代理使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

15） 数组 字符串 对象 es6 方法

6. 扩展运算符都有哪些作用

1. 合并数组
2. 复制数组
3. 伪数组转真数组 arguments

7. 深浅拷贝

说道深浅拷贝，就有必要说一下内存

内存分为两大区域：堆区和栈区

基本数据类型保存在栈区，引用数据类型保存在堆区

如：let a = 2, a = 2就保存在栈区

let a = [1,2,3] , [1,2,3] 保存在堆区，a保存在栈区，a指向[1,2,3]

浅拷贝就是直接在栈区进行操作，如 b = a, 此时a, b 都是指向堆区的同一个位置，修改数组值的时候，ab都会发生改变，这就是浅拷贝

深拷贝：在堆区重新开辟一块地址空间存放[1,2,3] 这就是深拷贝

浅拷贝

扩展运算符拷贝数组是浅拷贝

对象

Object.assign()用于对象的合并，如果第一个参数为{}，则可对后面的对象参数进行拷贝

数组

slice可以截取数组中部分的元素，若参数为空，则可对数组进行浅拷贝

​ concat可以对数组进行合并，若参数为空，亦可对数组进行浅拷贝

​ 使用Array.from()

深拷贝

let a = [1,2,3];
let b = JSON.stringify(a);
let c = JSON.parse(b);
c[0] = 111;
console.log(a, c);

lodash 里cloneDeep的方法实现深拷贝

8. 解构赋值怎么用

本质上就是一种模式匹配，只要等号左边和等号右边格式一致，左边的变量就会赋予右边对应的值

[a, b, c] = [1,2,3];

交换两个变量的值 [a,b] = [b, a];

对象解构赋值，对象属性名必须一致；

数组位置一致

9. 箭头函数的特点

1. 不需要function 声明
2. 箭头函数没有自己的this，指向父作用域的this

10. 动画

animation transition transform

animation 主动式动画

@keyframs name {

​ 定义每一帧的状态

}

属性：animation-name 动画名

animation-duration 动画持续时间

animation-timing-function 速度曲线

animation-delay 延迟时间

transition： 触发式动画

只需要规定起始帧和结束帧；

和animation参数一样，只是将animation-delay 改为transition-delay

transition 和animation的区别

1. transition 只有起始帧和结束帧，animation可以设置中间任意时刻帧
2. transition 只能触发一次，animation可以触发任意次

transform 变换

translate 位置

scale 缩放

skew 倾斜

rotate 旋转

11. 闭包 es6 this指向 加载优化

小图片转base64

图片懒加载， 路由懒加载

第三方依赖按需加载

减少http请求

路由缓存 keep-alive

moment date-fns

12. 小程序页面跳转

wx.switchTab ：跳转到tabbar页面，并关闭其他tabbar

wx.reLaunch ： 关闭所有页面，打开到应用内的某个页面

wx.redirectTo： 跳转到应用的某个页面，除了tabbar

wx.navigateTo：保留当前页面，跳转到非tabbar某个页面，不能跳转到tabbar；wx.navigateBack 返回原页面

13. props 默认值对象

seller: {
  type: Object,
  default: function () {
    return {}
 }
}

14. css 选择器优先级

ID > class > 标签名选择器

15. 如何将vue项目部署到服务器上

npm run build 生成dist文件

serve dist

16. 父组件里修改子组件的样式

穿透符 >>>

可以在父组件里直接修改子组件里的样式

/deep/

17. css 水平居中 垂直居中

18. flex-shrink flex-grow flex-basis

flex-basis : 该属性用来设置元素的宽度，其实，width也可以设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。

flex-grow: 索取父元素水平方向剩余空间

flex-shrink: 压缩剩余宽度

19. promise 和 async 的区别

async 以同步代码的形式编写异步代码逻辑；

async 代码简介，易于阅读

错误处理：Async/Await 让 try/catch 可以同时处理同步和异步错误。

await 等待的是一个promise，封装一个函数对promise做一个统一的处理

export default function handle(promise){
  return promise.then(data=>{
    return data
  }).catch(err=>{
    return err
  })
}

20. 如何将二维数组展开成一维数组

let arr = [1,2,3,4,[5,6, [7,8]]];

console.log(arr.flat());

lodash

var arr = _.flatten([1, [2, [3, [4]], 5]]);
console.log(arr);
//[1, 2, [3, [4]], 5]
var arr1 = _.flattenDeep([1, [2, [3, [4]], 5]]);
console.log(arr1);
//[1, 2, 3, 4, 5]

21. 防抖和节流

防抖：任务频繁触发的情况下，只要任务触发的时间超过指定时间间隔才会触发；

eg. 有个输入框，输入之后会调用接口，为了避免频繁调用，使用防抖功能

节流：指定时间间隔内只会执行一次

1. 用户点击提交按钮，假设我们知道接口大致的返回时间的情况下，我们使用节流，只允许一定时间内点击一次。

22. 浏览器渲染页面

1. 浏览器通过 HTMLParser 根据深度遍历的原则把 HTML 解析成 DOM Tree。

2. 浏览器通过 CSSParser 将 CSS 解析成 CSS Rule Tree（CSSOM Tree）。

3. 浏览器将 JavaScript 通过 DOM API 或者 CSSOM API 将 JS 代码解析并应用到布局中，按要求呈现响应的结果。

4. 根据 DOM 树和 CSSOM 树来构造 render Tree。

5. layout：重排（也可以叫回流），当 render tree 中任一节点的几何尺寸发生改变，render tree 就会重新布局，重新来计算所有节点在屏幕的位置。

6. repaint：重绘，当 render tree 中任一元素样式属性（几何尺寸没改变）发生改变时，render tree 都会重新画，比如字体颜色，背景等变化。

7. paint：遍历 render tree，并调动硬件图形 API 来绘制每个节点。

23. vue 里的性能优化

1. v-for ：key
2. keep-alive 缓存路由组件
3. 尽可能拆分组件，提高复用
4. 路由懒加载，图片懒加载
5. 防抖，节流
6. 第三方插件按需加载
7. 使用更小的库代替（moment date-fns）
8. hmr
9. source-map
10. code-spliting
11. 离线缓存
12. 小图片转base64

24. 浏览器解析url过程

1. 用户输入url
2. 对url进行dns域名解析
3. 建立tcp链接
4. 浏览器发起请求报文
5. 服务器返回响应报文
6. 关闭tcp链接
7. 浏览器解析文档资源并渲染页面

历 render tree，并调动硬件图形 API 来绘制每个节点。

23. vue 里的性能优化

1. v-for ：key
2. keep-alive 缓存路由组件
3. 尽可能拆分组件，提高复用
4. 路由懒加载，图片懒加载
5. 防抖，节流
6. 第三方插件按需加载
7. 使用更小的库代替（moment date-fns）
8. hmr
9. source-map
10. code-spliting
11. 离线缓存
12. 小图片转base64

24. 浏览器解析url过程

1. 用户输入url
2. 对url进行dns域名解析
3. 建立tcp链接
4. 浏览器发起请求报文
5. 服务器返回响应报文
6. 关闭tcp链接
7. 浏览器解析文档资源并渲染页面