前端面试手撕代码——场景篇 - 文章详情

哈喽大家好，我是Fine。

今天继续为大家带来前端面试必须掌握的手写题-场景篇。

以下是正文：

还是书接上篇文章，分享一些手写的题目，对于特别常见的题目最好能“背”下来，在面试的时候不需要再进行推导分析直接一把梭，这里的题目有一些是自己遇到的，也有收集到的，后续会整理分享一些其他的信息，希望对你能有所帮助

0.1+0.2问题

转成整数处理

function accAdd(arg1,arg2){
  var r1,r2,m;
  try{
    r1=arg1.toString().split(".")[1].length
  }catch(e){
    r1=0
  }
  try{
    r2=arg2.toString().split(".")[1].length
  }catch(e){
    r2=0
  }
  m=Math.pow(10,Math.max(r1,r2));
  return (arg1*m+arg2*m)/m;
}
var result = accAdd(0.1,0.2)
console.log(result) // 0.3

大数相加解决【字符串相加】

传两个字符串进来，返回一个字符串

var addStrings = function (num1, num2) {
    let result = '';
    let i = num1.length - 1, j = num2.length - 1, carry = 0;
    while (i >= 0 || j >= 0) {
        let n1 = i >= 0 ? +num1[i] : 0;
        let n2 = j >= 0 ? +num2[j] : 0;
        const temp = n1 + n2 + carry;
        carry = temp / 10 | 0;
        result = `${temp % 10}${result}`;
        i--; j--;
    }
    if (carry === 1) result = `1${result}`;
    return result;
};

大数相乘【字符串相乘】

传两个字符串进来，返回一个字符串

转成数字相加的问题
注意处理全零字符串的情况

var multiply = function (num1, num2) {
    let result = '0';
    let i = num1.length - 1;
    while (i >= 0) {
        let subfixZero = new Array(num1.length - 1 - i).fill('0').join('');
        let sumCount = +num1[i];
        let tempSum = '0';
        while (sumCount > 0) {
            tempSum = bigSum(tempSum, num2);
            sumCount--;
        }
        tempSum = `${tempSum}${subfixZero}`;
        result = bigSum(result, tempSum);
        i--;
    }
    // 处理一下开头的零
    for (let i = 0; i < result.length; i++) {
        if (result[i] !== '0') {
            return result.slice(i);
        }
    }
    return '0';

    function bigSum(n1, n2) {
        let result = '';
        let i = n1.length - 1, j = n2.length - 1, curry = 0;
        while (i >= 0 || j >= 0) {
            let l1 = i >= 0 ? +n1[i] : 0;
            let l2 = j >= 0 ? + n2[j] : 0;
            let sum = l1 + l2 + curry;
            curry = sum / 10 | 0;
            result = `${sum % 10}${result}`;
            i--; j--;
        }
        if (curry === 1) result = `1${result}`;
        return result;
    }
};

数组乱序输出

Math.random输出的结果是0-1内的小数，可以直接通过length映射

const randomIndex = Math.round(Math.random()*(array.length - 1 -i) + 1);

数组去重复（7种方法）

关键点是NaN怎么判断，对NaN进行去重，这个题目的另一个考察点是对API的灵活运用，虽然很多方法不可能用在实际的场景中，但是who care，面试官只会觉得你懂得好多～

1.利用Set()+Array.from()

方式对NaN和undefined类型去重也是有效的，是因为NaN和undefined都可以被存储在Set中， NaN之间被视为相同的值

2.利用两层循环+数组的splice方法

此方法对NaN是无法进行去重的，因为进行比较时NaN !== NaN

3.利用数组的indexOf方法

新建一个空数组，遍历需要去重的数组，将数组元素存入新数组中，存放前判断数组中是否已经含有当前元素，没有则存入。此方法也无法对NaN去重
indexOf() 方法：返回调用它的String对象中第一次出现的指定值的索引

4.利用数组的includes方法

此方法逻辑与indexOf方法去重异曲同工，只是用includes方法来判断是否包含重复元素。

5.利用数组的filter()+indexOf()

输出结果中不包含NaN，是因为indexOf()无法对NaN进行判断

6.利用Map()

使用Map()也可对NaN去重，原因是Map进行判断时认为NaN是与NaN相等的

7.利用对象

和Map()是差不多的，主要是利用了对象的属性名不可重复这一特性。

数组扁平化flatten(6种方法)

递归
reduce
扩展运算符
toString,split
es6 flat
正则和json，json.stringify

function flatten(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

function flatten(arr) {
  return arr.reduce((p, c) => {
    return p.concat(Array.isArray(c) ? flatten(c) : c);
  }, [])
}

🔥对象扁平化flatObj

多次遇到，建议背诵

/* 题目*/
var entryObj = {
    a: {
        b: {
            c: {
                    dd: 'abcdd'
            }
        },
        d: {
            xx: 'adxx'
        },
        e: 'ae'
    }
}

// 要求转换成如下对象
var outputObj = {
 'a.b.c.dd': 'abcdd',
 'a.d.xx': 'adxx',
 'a.e': 'ae'
}

function flat(obj, path = '', res = {}, isArray) {
  for (let [k, v] of Object.entries(obj)) {
    if (Array.isArray(v)) {
      let _k = isArray ? `${path}[${k}]` : `${path}${k}`;
      flat(v, _k, res, true);
    } else if (typeof v === 'object') {
      let _k = isArray ? `${path}[${k}].` : `${path}${k}.`;
      flat(v, _k, res, false);
    } else {
      let _k = isArray ? `${path}[${k}]` : `${path}${k}`;
      res[_k] = v;
    }
  }
  return res;
}

console.log(flat({ a: { aa: [{ aa1: 1 }] } }))

数字千分位分割

注意可能有小数

function format(number) {
  number = number.toString();
  let decimals = '';
  number.includes('.') ? decimals = number.split('.')[1] : decimals;

  let len = number.length;
  if (len < 3) {
    return number;
  } else {
    let temp = '';
    let remainder = len % 3;
    decimals ? temp = '.' + decimals : temp;
    if (remainder > 0) {
      return number.slice(0, remainder) + ',' + number.slice(remainder, len).match(/\d{3}/g).join(',') + temp;
    } else {
      return number.slice(0, len).match(/d{3}/g).join(',') + temp;
    }
  }
}

js下划线转驼峰处理「快手」

正则法

function camelCase(str) {
  return str.replace(/_([a-z])/g, function(match, group1) {
    return group1.toUpperCase();
  });
}

console.log(camelCase("some_string"));  // "someString"

补充

function camelCase(str) {
  return str.replace(/([-_])([a-z])/g, function(match, group1, group2) {
    return group2.toUpperCase();
  });
}

console.log(camelCase("some-string_with-underscores"));

Hex转RGB的方法

function hexToRgb(val) {
  //HEX十六进制颜色值转换为RGB(A)颜色值
  // 16进制颜色值的正则
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  // 把颜色值变成小写
  var color = val.toLowerCase();
  var result = '';
  if (reg.test(color)) {
    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
    if (color.length === 4) {
      var colorNew = '#';
      for (var i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
      }
      color = colorNew;
    }
    // 处理六位的颜色值，转为RGB
    var colorChange = [];
    for (var i = 1; i < 7; i += 2) {
      colorChange.push(parseInt('0x' + color.slice(i, i + 2)));
    }
    result = 'rgb(' + colorChange.join(',') + ')';
    return { rgb: result, r: colorChange[0], g: colorChange[1], b: colorChange[2] };
  } else {
    result = '无效';
    return { rgb: result };
  }
}

实现模版字符串解析

var template = `
<div>
    <% if(name){ %>
        <span>%= name =%</span>
    <% } %>
    %= age =%
<div>`
let str = rander(template, {name: '小明', age: 18})
// 解析完成 str <div> <span>小明</span>18<div>

function parseTemplateString (templateString, data) {
  // 使用正则表达式在模板字符串中查找所有 ${...} 的实例
  const regex = /${(.*?)}/g;
  // 使用 replace() 方法将每个 ${...} 的实例替换为数据对象中相应的值
  const parsedString = templateString.replace(regex, (match, key) => {
    // 使用 eval() 函数来评估 ${...} 中的表达式，并从数据对象中返回相应的值
    return eval(`data.${key}`);
  });
  return parsedString;
}

🔥数组转树形结构的三种方法

递归解法非常好理解，代码量也很少，题目出现概率很高

{
  "city": [
    { "id": 12, "parent_id": 1, "name": "朝阳区" },
    { "id": 241, "parent_id": 24, "name": "田林街道" },
    { "id": 31, "parent_id": 3, "name": "广州市" },
    { "id": 13, "parent_id": 1, "name": "昌平区" },
    { "id": 2421, "parent_id": 242, "name": "上海科技绿洲" },
    { "id": 21, "parent_id": 2, "name": "静安区" },
    { "id": 242, "parent_id": 24, "name": "漕河泾街道" },
    { "id": 22, "parent_id": 2, "name": "黄浦区" },
    { "id": 11, "parent_id": 1, "name": "顺义区" },
    { "id": 2, "parent_id": 0, "name": "上海市" },
    { "id": 24, "parent_id": 2, "name": "徐汇区" },
    { "id": 1, "parent_id": 0, "name": "北京市" },
    { "id": 2422, "parent_id": 242, "name": "漕河泾开发区" },
    { "id": 32, "parent_id": 3, "name": "深圳市" },
    { "id": 33, "parent_id": 3, "name": "东莞市" },
    { "id": 3, "parent_id": 0, "name": "广东省" }
  ]
}

function arrayToTreeV3(list, root) {
  return list
    .filter(item => item.parent_id === root)
    .map(item => ({...item, children: arrayToTreeV3(list, item.id)}))
}

获取URL中的参数

这里主要还是正则表达式的设计

/?&/igm，前面是？或者&，任意字符直到遇到=，使用非贪婪模式，等号后面是非&符号的任意字符，然后去匹配就好了
理论上可以用matchAll，然后用迭代器去处理

function name(url) {
    const _url = url || window.location.href;
    const _urlParams = _url.match(/[?&](.+?=[^&]+)/igm);
    return _urlParams ? _urlParams.reduce((a,b) => {
        const value = b.slice(1).split('=');
        a[value[0]] = value[1];
        return a;
    }, {}) : {} 
    
}

小结

场景题目其实很多，没办法去枚举，但是这里标记出来的是相对高频的题目，对上面题目有些好的解法的也可以在评论区分享

原文链接：https://juejin.cn/post/7293412552485928998

原文作者：秋染蒹葭

最后

还没有使用过我们刷题网站（https://fe.ecool.fun/）或者前端面试题宝典的同学，如果近期准备或者正在找工作，千万不要错过，我们的题库主打无广告和更新快哦~。

老规矩，也给我们团队的辅导服务打个广告。