同花顺前端面试

1,302 阅读3分钟

这是朋友前两天参加的面试。说下朋友的情况吧,朋友21届研究生,一年工作经验。
同花顺是一家上市公司,主要业务有AI开放平台、智能客服、智能外呼、智能质检等。

往期面试记录:
字节飞书面试
网易灵犀面试
更多面试记录,可查看我的专栏--面试记录

一面

面试时间:20220422
状态:通过

1. 自我介绍

自我介绍完就开始扯一些东西,聊了些有的没得,质量不高

Watch和Computed的区别,computed设置的对象如果新增属性,会触发改变吗?

watch监听属性,当监听到某一个值变化时,进行一些操作
computed计算属性,通过多个值来计算获得另外一个值,有缓存

不会,这个与开始的初始化data有关,开始遍历data中的数据,给他们建立拦截,如果是对象会遍历对象的属性,建立拦截,如果不存在的属性,是没有建立拦截的。如果需要出发,我们可以使用set方法

同一段代码在移动端和pc都需要运行,如何做兼容

一般两大思路:

  1. 一套资源,根据判断是否是移动设备而选择加载不同的css
  2. 两套资源,pc和mobile各一套,分开维护,在入口处进入不同的路有

详细解答:基于Vue的跨移动端和PC端适应

浏览器缓存

协商缓存,强缓存。
浏览器缓存机制

React用过吗

Node学过吗

手写题 - 获取组合最大数字

给一个长度为4的数组,数组每项都是个位数,请从4个数中去掉一个数,使得剩下的三个个位数按照他在数组中的下标顺序组成的三位数是最大的。(例如:[4,2,3,1]应该返回431)

方法一:删除小元素
思路: 因为入参是长度为4的数组,我们最后结果是3位数

  • 那从左到右遍历,如果当前数字比下一位小的时候,删除当前元素,那么得到就会是目前最大的数字,
  • 如果数组遍历完成仍没有删除元素,则我们取前三位就会是最大的数字。来上代码。
function makeMax(arr) {
    // 默认取前3位,对应思路的第二步
    let res = arr.slice(0, 3);
    let tempArr = [...arr];
    for(let i = 0, l = tempArr.length; i < l; i++) {
        if(arr[i + 1] && arr[i] < arr[i + 1]) {
            tempArr.splice(i, 1);
            return Number(tempArr.join(''));
        }
    }
    return Number(arr.slice(0, 3).join(''));
}

方法二:获取到所有组合,然后选取最大

function makeMax(arr) {
    let res = [];
    for(let i = 0, l = arr.length; i < l; i++) {
        const num = Number(arr.slice(0, i).join('') + arr.slice(i + 1).join(''));
        res.push(num);
    }
    return Math.max(...res);
}

手写题 - 获取页面所有用到的标签

[...new Set([...document.querySelectorAll('*')].map(dom => dom.tagName.toLowerCase()))];

二面

1. 一行代码获取网页中所有标签的类型

[...new Set([...document.querySelectorAll('*')].map(dom => dom.tagName.toLowerCase()))]

2. 实现ts中的ReturnType<T>

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any; 

3. 手写bind

Function.prototype.myBind = function(thisArg, ...arg) {
    const _this = thisArg === null || thisArg === undfined ? window || Object(thisArg);
    const fn = this;
    return function a(...params) {
        const args = [...arg, ...params]
        if(this instanceof a) {
            return new fn(...args);
        }
        else {
            return fn.apply(_this, args);
        }
    }
}

4. 实现EventEmitter类,包括on,emit,off,once方法

class EventEmitter {
    constructor(opt){
        this.events = {};
    }
    on(event, fn) {
        if(!this.events[event]) {
            this.events[event] = [];
        }
        this.events[event].push(fn);
    }
    emit(event) {
        const fns = this.events[event] || [];
        fns.forEach(fn => {
            fn();
        })
    }
    off(event, fn) {
        const fns = this.events[event];
        if(fn) {
            const index = fns.indexOf(fn);
            fns.splice(index, 1);
        }
        else {
            this.events[event] = [];
        }
    }
    once(event, fn) {
        const callback = () => {
            fn();
            this.off(event, fn);
        }
        this.events.push(event, callback);
    }
}