【每日前端面经】2023-02-25

最新推荐文章于 2024-07-29 15:37:55 发布

ByeByeWorld02

最新推荐文章于 2024-07-29 15:37:55 发布

阅读量346

点赞数 7

分类专栏：每日前端面经文章标签：前端面试

本文链接：https://blog.csdn.net/m0_66681776/article/details/136288720

版权

每日前端面经专栏收录该内容

26 篇文章 2 订阅

订阅专栏

本文介绍了Taro框架在开发跨端应用中的角色，涉及多端适配策略、响应式设计，以及TypeScript中的高级类型如Partial、Readonly、Record和Pick的使用。还讲解了JavaScript深拷贝和如何判断链表是否有环的方法。

摘要由CSDN通过智能技术生成

题目来源: 牛客+牛客

每日面经20240225

了解Taro么

Taro是一个开放式跨端跨框架解决方案，支持使用React/Vue/Nerv等框架来开发微信/京东/百度/支付宝/字节跳动/QQ/飞书小程序/H5/RN等应用

多端适配怎么做

固定布局（PC）
window.screen分类加载CSS
@media媒体查询
vh+vw+rem
百分比布局
响应式布局

移动端适配怎么做

同上

偏工程化如何做字体大小的适配

通过媒体查询用vw设置字体大小

TS高级类型

Pequired: 将全部属性置为必填
Partial: 将全部属性置为可选
Readonly: 将全部属性改为只读

Record: 以typeof格式快速创建全部属性为必填项的类型

type Coord = Record<'x' | 'y', number>;

// 等效于
type Coord = {
    x: number;
    y: number;
}

Pick: 从类型定义的属性中选取一组属性，返回一个新的类型定义

type Coord = Record<'x' | 'y'. number>;
type CoordX = Pick<Coord, 'x'>;

// 等效于
type _CoordX = {
    x: number
}

实现深拷贝

基本数据类型是否能拷贝
键值都是基本数据类型的普通对象是否能拷贝
Symbol作为对象的键的对象是否能拷贝
Date和RegExp对象是否能拷贝
Map和Set对象是否能拷贝
Function对象是否能拷贝
对象的原型是否能拷贝
不可枚举属性是否能拷贝
循环引用是否能拷贝

function deepClone(target) {
    const map = new WeakMap();

    const isObject = (target) => (typeof target === 'object' && target) || typeof target === 'function';

    function clone(data) {
        if (!isObject(data)) return data;
        if ([Date, RegExp].includes(data.constructor)) return new data.constructor(data);
        if (typeof data === 'function') return new Function('return ' + data.toString())()
        if map.get(data) return map.get(data);
        if (data instanceof Map) {
            const result = new Map();
            map.set(data, result);
            data.forEach((value, key) => {
                if (isObject(value)) {
                    result.set(key, clone(val));
                } else {
                    result.set(key, value);
                }
            });
            return result;
        }
        if (data instanceof Set) {
            const result = new Set();
            map.set(data, result);
            data.forEach((value) => {
                if (isObject(value)) {
                    result.add(clone(value));
                } else {
                    result.add(value);
                }
            });
            return result;
        }
        const keys = Reflect.ownKeys(data);
        const allDesc = Object.getOwnPropertyDescriptors(data);
        const result = Object.create(Object.getPrototypeof(data), allDesc);
        map.set(data, result);
        kets.forEach((key) => {
            const value = data[key];
            if (isObject(value)) {
                result[key] = clone(value);
            } else {
                result[key] = value;
            }
        });
        return result;
    }
}

创建单链表并判断是否成环

function ListNode(value) {
    this.value = value;
    this.next = null;
}

/**
 * @param {ListNode} head
 * @return {boolean}
 */
function hasCycle(head) {
    if (head === null || head.next === null) return false;
    const slow = head;
    const fast = head.next;
    while (slow && fast) {
        if (slow === fast) return true;
        slow = slow.next;
        fast = fast.next? fast.next.next : null;
    }
    return false;
}