合肥前端面试-手写编程题-3题总结

一、写校验值为空的方法

二、写JSON Key 驼峰转换

三、写防抖

（TMD、面试个3000的实习生、给我搞那么难、莫不是我没有天赋...)

一、写校验值为空的方法

请书写一个校验值为空的方法（空格的字符串和连续的空格的字符串也视为空，空数组也视为空，空对象也视为空）

---

解答：

function isEmpty(value) {  
    // 首先检查是否为null或undefined  
    if (value === null || value === undefined) {  
        return true;  
    }  
    // 接着检查是否为字符串，并判断是否为空字符串  
    if (typeof value === 'string' && value.trim() === '') {  
        return true;  
    }  
    // 最后检查是否为数组，并判断是否为空数组  
    if (Array.isArray(value) && value.length === 0) {  
        return true;  
    }  
    // 如果以上条件都不满足，则不为空  
    return false;  
}  
​
// 测试和结果  
console.log(isEmpty("")); // true  
console.log(isEmpty(null)); // true  
console.log(isEmpty(undefined)); // true  
console.log(isEmpty("   ")); // true  
console.log(isEmpty([])); // true  
console.log(isEmpty([1, 2, 3])); // false  
console.log(isEmpty("Hello")); // false
​
​

二、写JSON Key 驼峰转换

实现一个转换函数convert,将JSON对象的key从下划线形式(under_score_case)转换到小驼峰形式（camelCase）

例如：
covert({'a_bc_def':1});
//返回 {'aBcDef':1}
convert({'a_bc_def':{'foo_bar':'a_bc_def'}});
//返回 { 'aBcDef': { 'fooBar' : 'a_bc_def' } }
convert({ 'a_bc_def': [ { 'foobar' : 2 } , { 'goo_xyz' : 3 } ] } );
//返回{ 'aBcDef' : [{ 'fooBar' : 2 }, { 'gooXyz' : 3 }] }

---

解答：

function convert(obj) {  
  if (typeof obj !== 'object' || obj === null) {  
    // 如果不是对象或为空，则直接返回  
    return obj;  
  }  
  if (Array.isArray(obj)) {  
    // 如果是数组，则递归处理每个元素  
    return obj.map(item => convert(item));  
  }  
  // 创建一个新对象来存储转换后的键值对  
  const transformed = {};  
  
  // 遍历原始对象的所有键  
  for (const key in obj) {  
    if (obj.hasOwnProperty(key)) {  
      // 使用正则表达式将下划线命名转换为驼峰命名  
      const camelCaseKey = key.replace(/_([a-z])/g, (g) => g[1].toUpperCase());  
      // 递归处理值（如果值是对象或数组）  
      transformed[camelCaseKey] = convert(obj[key]);  
    }  
  }  
  return transformed;  
}  
  
// 测试  
const obj = {  
  user_name: "John Doe",  
  user_details: {  
    first_name: "John",  
    last_name: "Doe",  
    contact_info: {  
      email: "john.doe@example.com",  
      phone_number: "123-456-7890"  
    }  
  },  
  user_ids: [1, 2, 3]  
}  
  
const camelCaseObj = convert(obj);  
console.log(camelCaseObj);
​
//测试结果
/** 
    {
    "userName": "John Doe",
    "userDetails": {
        "firstName": "John",
        "lastName": "Doe",
        "contactInfo": {
            "email": "john.doe@example.com",
            "phoneNumber": "123-456-7890"
        }
    },
    "userIds": [
        1,
        2,
        3
    ]
}
​
*/

三、写防抖

表单场景中,为防止连续点击提交按钮重复提交表单，现要求多次点击时（一秒间隔内）提交按钮只触发一次表单提交。

举例：在点击提交按钮后，会立刻触发一次提交请求，若每隔0.5s(小于1s)点击一次，则后续的提交都无效,若相隔1.5s点击一次则会触发提交。

请实现一个函数handleSubmit用于实现以上需求。

需求架子:

//用于表单提交
function submitForm(index){
    console.log('submit' + index);
}
//请实现
function handelSubmit(func, timeout){
}
//实现执行函数
const submit  = hanleSubmit(submitForm,1000);
//测试用例
submit(1);
submit(2);
setTimeout(()=>{
    submit(3);
    setTimeout(() = > {
        submit(4);
        setTimeout(()=>{
            submit(5);
            setTimeout(()=>{
                submit(6);
                setTimeout(()=> {
                    submit(7);
                    setTimeout(()=>submit(8),800);
                            },200);
                },1000);
            },500);
    },200);
},100);

---

解答：

function handleSubmit(func, minInterval) {  
  let lastValidSubmitTime = 0; // 上一次有效提交的时间戳  
  return function(...args) {  
    const now = Date.now(); // 当前时间戳  
    const interval = now - lastValidSubmitTime; // 计算时间间隔  
  
    // 如果时间间隔大于或等于最小间隔(1000)，则执行提交，并更新上一次有效提交时间  
    if (interval >= minInterval) {  
      func.apply(this, args); //调用func函数  
      lastValidSubmitTime = now;  
    }  
    // 如果时间间隔小于最小间隔，则不执行任何操作（即忽略提交）  
  };  
}  
  
// 模拟表单提交  
function submitForm(index){  
  console.log('submit' + index);  
}  
// 实际执行函数  
const submit = handleSubmit(submitForm, 1000); // 设置最小间隔为1000毫秒（1秒）  
  
// 测试用例  
submit(1); // 立即提交  
submit(2); // 忽略，因为距离上一次提交时间间隔小于1秒    
setTimeout(() => {  
  submit(3); // 忽略，因为距离上一次提交时间间隔小于1秒  
  setTimeout(() => {  
    submit(4); // 忽略，同上  
    setTimeout(() => {  
      submit(5); // 忽略，同上  
      setTimeout(() => {  
        submit(6); // 提交，因为此时距离上一次有效提交（submit(1)）的时间间隔已经超过1秒  
        setTimeout(() => {  
          submit(7); // 忽略  
          setTimeout(() => {  
            submit(8); // 提交，时间间隔已经超过1秒
          }, 800);
        }, 200);  
      }, 1000);  
    }, 500);  
  }, 200);  
}, 100);  
  
// 输出  
// "submit1"  
// "submit6"   
// "submit8"

2024-8-28