2023年8月面试记录

跨境电商

1.http常见请求有哪些

• get、post、put、patch、delete

2.post为什么请求两次

在正式发送请求之前，先进行一次预检请求（options请求）。看服务端返回的一些信息，浏览器再根据服务端返回的信息来决定是否发送真实的post请求。

• 为什么产生options请求
  • 发生了复杂请求
  • 发生了跨域（只要是带自定义header的跨域请求，在发送真实请求前都会先去发送options请求）
• options请求如何避免
  • 使用代理，避免跨域。
  • 将复杂跨域请求更改为简单跨域请求。
  • 不使用带自定义配置的header头部

3.伪数组，伪数组转换成数组

• 伪数组具有以下特征：
  • 具有length属性
  • 可以通过for循环去遍历
  • 不具有数组的push，pop等方法。
• 常见的伪数组：
  • arguments
  • DOM的children属性，获取回来的子节点集合
• 转成数组的方法：
  • 使用Array.prototype.slice.call()
  • Array.from()

let Arguments = { 0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 'length': 5 }
// console.log(Array.prototype.slice.call(Arguments))
console.log(Array.from(Arguments))

4.使用forEach时如何跳出循环

• 使用try catch捕获异常来跳出循环

let list = [1,2,3,4,5,6,7,8,9]
    
try {
    list.forEach((item) => {
        console.log(item)

        if(item > 5) {
            throw new Error('抛出异常跳出循环')
        }
    })
} catch(error) {
    console.log(error)
}

5.判断数据类型的方法

• typeof

判断null的时候也会显示为object,和数组，对象容易混淆

console.log(typeof 10); // number
console.log(typeof 'like'); // string
console.log(typeof true); // boolean
console.log(typeof [1,2]); // object
console.log(typeof {}); // object
console.log(typeof function () {}); // function
console.log(typeof undefined); // undefined
console.log(typeof null); // object

• instanceof

只能正确判断引用数据类型，不能正确判断基本数据类型

console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log(10 instanceof Number); // false

• constructor

console.log((10).constructor === Number); // true
console.log(([]).constructor === Array); // true
console.log(({}).constructor === Object); // true

• Object.prototype.toString.call()

console.log(Object.prototype.toString.call(2)); // [object Number]
console.log(Object.prototype.toString.call('string')); // [object String]
console.log(Object.prototype.toString.call(null)); // [object Null]

6.Object.prototype.toString.call()判断类型的原理

• 所有数据类型都是对象的一种类型，比如Date就是时间对象、Array就是数组对象，而Object.prototype.toString可以返回当前调用者的对象类型。
• 加call()是为了改变Object.prototype.toString这个函数的指向。让它指向我们传入的数据

7.强缓存和协商缓存

协商缓存和强缓存指的都是浏览器对静态资源文件的缓存机制，描述的就是什么时候去服务器请求，什么时候直接读取缓存中的文件。

• 强缓存是客户端直接查看本地的缓存文件是否过期，没过期就直接使用。
  • 查看过期的方法主要是依赖响应头上的expires（绝对时间）和cache-control（相对时间）上的时间来对比的。
• 协商缓存是客户端去询问服务器对应的文件是否有更新，如果有更新才会重新请求。
  • 以来的是响应头上的last-modified（最后更新时间）以及etag（内容变更的标识）来确认文件是否有更新。

一个文件是否重新请求要经过强缓存和协商缓存的完整过程后才能决定

• 步骤总结：
  • 强缓存和协商缓存都针对静态资源
  • 强缓存在前，协商缓存在后
  • 资源未过期触发强缓存，资源过期后再触发协商缓存
  • 判断是否过期的方法是expires（绝对时间）、cache-control（相对时间）
  • 判断资源是否有更新（last-modified和etag）

8.cookie，sessionStorage，localStorage

• cookie：
  • 可以在浏览器和服务器之间来回传递，每次请求都会携带在http请求头中。
  • 一般由服务器生成，可以设置过期时间。当超过过期时间后，就会自动消失。
  • 存储容量4k。
  • 用来保存用户登录状态，跟踪用户行为。
  • 所有同源窗口中都是共享的。
• localStorage
  • 浏览器提供的一种web存储形式。仅在客户端中保存，不参与服务器的通信。
  • 除非主动清除，否则永久保存。
  • 存储容量5MB。
  • 同源窗口中可以共享数据
• sessionStorage
  • 容量，存取方法与localStorage一样。
  • 浏览器选项卡或窗口关闭，数据就会被删除。
  • 多个窗口之间数据不共享，但是当新的页面如果是通过window.open或者链接的形式打开的，那么新页面就会复制上一个页面的sessionStorage到新页面中。

小自研

1.css3有哪些新增的特性

2.get请求和post请求的区别

3.跨域的原因，解决的方法

4.居中的几种方法

5.深拷贝和浅拷贝，实现深拷贝

6.微信小程序如何修改数据

7.封装过哪些组件，封装组件的思路

8.异常处理机制，前端都做过哪些异常情况的兜底

美团外包岗1面

1.强缓存和协商缓存

2.vue的通信方式（parent，children着重问了一下）

3.vuex的使用场景

4.vue的生命周期，created和mounted的区别，在created中如何操作dom，destoryed使用场景

5.promise相关，.all，.race，.any

6.写一下翻转数组的方法

let list = [1,2,3,4,5,6,7]

方法1
function fan(arr) {
    let newArr = []
    arr.forEach((item, index) => {
        newArr[arr.length-1-index] = item
    })
    return newArr
}

方法2: 利用.at(),通过负索引实现
function fanzhuan(arr) {
  return arr.map((item, index) => arr.at(-index - 1))
}
方法3: for循环
function fanzhuan2(arr) {
  let newArr = []
  for(let i = arr.length -1; i >=0; i--) {
    newArr.push(arr[i])
  }
  return newArr
}

7.写一下防抖函数

美团外包岗2面

1.公司研发团队的人员配比

2.工作上的开发流程，从需求评审到上线

3.开发阶段接口还没好的话，自己用什么去做假数据

4.涉及到数据的问题，一般前端处理还是后端处理

5.git多人协同开发，冲突处理

6.项目的发布流程，上线部署的过程

7.团队中公用的组件库有哪些

8.工作上做过的比较有成就感的地方

9.遇到过的难点，如何解决的

10.手写题

• 题目：写一个函数，如果函数的参数是对象，按层将对象的所有key输出到一个二维数组中。
• 示例：

//输入示例：
var object = {
    a: { 
        b: {
            c: {
                d: 'e'
            }
        }
    },
    f: { 
        a: {
            x: null
        }
    },
    i: ['a', 'v'],
    k: {
        l: 'm'
    }
};
//输出示例：[['a', 'f', 'i', 'k'], ['b', 'a', 'l'], ['c', 'x'], ['d']]

• 解题：

function fn (data, arr = []) {
    if(Object.prototype.toString.call(data) === '[object Object]') {
        let list = Object.keys(data)
        arr.push(list)
        let obj
        list.forEach((item) => {
            if(Object.prototype.toString.call(data[item]) === '[object Object]') {
                obj = {...obj, ...data[item]}
            }
        })
        fn(obj, arr)
    } 
    return arr
}

console.log(fn(object))

11.自己的优点和缺点