2024面试题记录1

就是那种，先让你做的题，做完才约面试。

你们遇到这种是直接下一个，还是会做呢？

以下两个对各位大佬来说应该都没难度。

1 数据转换

题目描述

// {"a": {"n1": 1, "n2": 3 }, "b": {"n1": 2, "n2": 4}, "c": { "n1": 3,"n2": 5}}

// 转换成{"n1": {"a": 1, "b": 2, "c": 3 }, "n2": { "a": 3, "b": 4, "c": 5}}

可能考察对象数据转换的一些操作吧， 感觉一般干过活得都能写出来。

感觉这题就是用来筛选培训班刚出的似得

代码实现

// {"a": {"n1": 1, "n2": 3 },  "b": {"n1": 2, "n2": 4},  "c": { "n1": 3,"n2": 5}}
// 转换成{"n1": {"a": 1, "b": 2, "c": 3 }, "n2": { "a": 3, "b": 4, "c": 5}}
const test = {"a": {"n1": 1, "n2": 3 },  "b": {"n1": 2, "n2": 4},  "c": { "n1": 3,"n2": 5}}
function fn(data) {
  const obj = {}
  Object.keys(data).forEach(k => {
    const item = data[k];
    Object.keys(item).forEach(subK => {
      if (!obj[subK]) {
        obj[subK] = {}
      }
      obj[subK][k] = item[subK]
    })
  })
  return obj
}
console.log(fn(test), '---')

运行结果

2、实现一个FormItem

就考察你对antd form form-item 组件的原理的了解吧。

题目描述

实现一个FormItem 接收name FormItem可以放一个Input组件，放在FomItem下的Input组件可以不用显示传value/onchange, 同时Input的值会录入到FormItem里面

exp:

调用：

<FormItem name="ceshi">
    <Input />
</FormItem>

FormItem组件实现：

代码

import React from "react";

let data = {}
const Store = function () {
    return {
        getFieldValue: function (name) {
            return data[name]
        },
        setFieldsValue: function (newData) {
            data = {
                ...data,
                ...newData,
            }
        }
    }
}

const FormItem = (props) => {
    const { children, name } = props;

    const {
        getFieldValue,
        setFieldsValue
    } = Store()

    const mixinPops = () => {
        return {
            value: getFieldValue && getFieldValue(name),
            onChange: (e) => {
                const newValue = e?.target?.value;
                setFieldsValue({ [name]: newValue });
            },
        };
    };
    return React.cloneElement(children, mixinPops());
};

export default FormItem
//
// <FormItem name='测试'>
//     <Input></Input>
// </FormItem>

最后

2024前端面试不易， 仅此分享给准备面试的小伙伴参考。