还是书接上篇文章，分享一些手写的题目，对于特别常见的题目最好能“背”下来，在面试的时候不需要再进行推导分析直接一把梭，这里的题目有一些是自己遇到的，也有收集到的，后续会整理分享一些其他的信息，希望对你能有所帮助
0.1+0.2问题
转成整数处理
1function accAdd(arg1,arg2){
2 var r1,r2,m;
3 try{
4 r1=arg1.toString().split(".")[1].length
5 }catch(e){
6 r1=0
7 }
8 try{
9 r2=arg2.toString().split(".")[1].length
10 }catch(e){
11 r2=0
12 }
13 m=Math.pow(10,Math.max(r1,r2));
14 return (arg1*m+arg2*m)/m;
15}
16var result = accAdd(0.1,0.2)
17console.log(result)
大数相加解决[415.字符串相加]
传两个字符串进来，返回一个字符串
1var addStrings = function (num1, num2) {
2 let result = '';
3 let i = num1.length - 1, j = num2.length - 1, carry = 0;
4 while (i >= 0 || j >= 0) {
5 let n1 = i >= 0 ? +num1[i] : 0;
6 let n2 = j >= 0 ? +num2[j] : 0;
7 const temp = n1 + n2 + carry;
8 carry = temp / 10 | 0;
9 result = `${temp % 10}${result}`;
10 i--; j--;
11 }
12 if (carry === 1) result = `1${result}`;
13 return result;
14};
大数相乘[43.字符串相乘]
传两个字符串进来，返回一个字符串
- 转成数字相加的问题
- 注意处理全零字符串的情况
1var multiply = function (num1, num2) {
2 let result = '0';
3 let i = num1.length - 1;
4 while (i >= 0) {
5 let subfixZero = new Array(num1.length - 1 - i).fill('0').join('');
6 let sumCount = +num1[i];
7 let tempSum = '0';
8 while (sumCount > 0) {
9 tempSum = bigSum(tempSum, num2);
10 sumCount--;
11 }
12 tempSum = `${tempSum}${subfixZero}`;
13 result = bigSum(result, tempSum);
14 i--;
15 }
16
17 for (let i = 0; i < result.length; i++) {
18 if (result[i] !== '0') {
19 return result.slice(i);
20 }
21 }
22 return '0';
23
24 function bigSum(n1, n2) {
25 let result = '';
26 let i = n1.length - 1, j = n2.length - 1, curry = 0;
27 while (i >= 0 || j >= 0) {
28 let l1 = i >= 0 ? +n1[i] : 0;
29 let l2 = j >= 0 ? + n2[j] : 0;
30 let sum = l1 + l2 + curry;
31 curry = sum / 10 | 0;
32 result = `${sum % 10}${result}`;
33 i--; j--;
34 }
35 if (curry === 1) result = `1${result}`;
36 return result;
37 }
38};
数组乱序输出
Math.random输出的结果是0-1内的小数，可以直接通过length映射
1const 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
1function flatten(arr) {
2 let result = [];
3 for (let i = 0; i < arr.length; i++) {
4 if (Array.isArray(arr[i])) {
5 result = result.concat(flatten(arr[i]));
6 } else {
7 result.push(arr[i]);
8 }
9 }
10 return result;
11}
12
13function flatten(arr) {
14 return arr.reduce((p, c) => {
15 return p.concat(Array.isArray(c) ? flatten(c) : c);
16 }, [])
17}
🔥对象扁平化flatObj
多次遇到，建议背诵
1
2var entryObj = {
3 a: {
4 b: {
5 c: {
6 dd: 'abcdd'
7 }
8 },
9 d: {
10 xx: 'adxx'
11 },
12 e: 'ae'
13 }
14}
15
16
17var outputObj = {
18 'a.b.c.dd': 'abcdd',
19 'a.d.xx': 'adxx',
20 'a.e': 'ae'
21}
22
23function flat(obj, path = '', res = {}, isArray) {
24 for (let [k, v] of Object.entries(obj)) {
25 if (Array.isArray(v)) {
26 let _k = isArray ? `${path}[${k}]` : `${path}${k}`;
27 flat(v, _k, res, true);
28 } else if (typeof v === 'object') {
29 let _k = isArray ? `${path}[${k}].` : `${path}${k}.`;
30 flat(v, _k, res, false);
31 } else {
32 let _k = isArray ? `${path}[${k}]` : `${path}${k}`;
33 res[_k] = v;
34 }
35 }
36 return res;
37}
38
39console.log(flat({ a: { aa: [{ aa1: 1 }] } }))
数字千分位分割
注意可能有小数
1function format(number) {
2 number = number.toString();
3 let decimals = '';
4 number.includes('.') ? decimals = number.split('.')[1] : decimals;
5
6 let len = number.length;
7 if (len < 3) {
8 return number;
9 } else {
10 let temp = '';
11 let remainder = len % 3;
12 decimals ? temp = '.' + decimals : temp;
13 if (remainder > 0) {
14 return number.slice(0, remainder) + ',' + number.slice(remainder, len).match(/\d{3}/g).join(',') + temp;
15 } else {
16 return number.slice(0, len).match(/d{3}/g).join(',') + temp;
17 }
18 }
19}
js下划线转驼峰处理「快手」
正则法
1function camelCase(str) {
2 return str.replace(/_([a-z])/g, function(match, group1) {
3 return group1.toUpperCase();
4 });
5}
6
7console.log(camelCase("some_string"));
补充
1function camelCase(str) {
2 return str.replace(/([-_])([a-z])/g, function(match, group1, group2) {
3 return group2.toUpperCase();
4 });
5}
6
7console.log(camelCase("some-string_with-underscores"));
Hex转RGB的方法
1function hexToRgb(val) {
2
3
4 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
5
6 var color = val.toLowerCase();
7 var result = '';
8 if (reg.test(color)) {
9
10 if (color.length === 4) {
11 var colorNew = '#';
12 for (var i = 1; i < 4; i += 1) {
13 colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
14 }
15 color = colorNew;
16 }
17
18 var colorChange = [];
19 for (var i = 1; i < 7; i += 2) {
20 colorChange.push(parseInt('0x' + color.slice(i, i + 2)));
21 }
22 result = 'rgb(' + colorChange.join(',') + ')';
23 return { rgb: result, r: colorChange[0], g: colorChange[1], b: colorChange[2] };
24 } else {
25 result = '无效';
26 return { rgb: result };
27 }
28}
实现模版字符串解析
1var template = `
2<div>
3 <% if(name){ %>
4 <span>%= name =%</span>
5 <% } %>
6 %= age =%
7<div>`
8let str = rander(template, {name: '小明', age: 18})
9
1function parseTemplateString (templateString, data) {
2
3 const regex = /${(.*?)}/g;
4
5 const parsedString = templateString.replace(regex, (match, key) => {
6
7 return eval(`data.${key}`);
8 });
9 return parsedString;
10}
🔥数组转树形结构的三种方法
递归解法非常好理解，代码量也很少，题目出现概率很高
1{
2 "city": [
3 { "id": 12, "parent_id": 1, "name": "朝阳区" },
4 { "id": 241, "parent_id": 24, "name": "田林街道" },
5 { "id": 31, "parent_id": 3, "name": "广州市" },
6 { "id": 13, "parent_id": 1, "name": "昌平区" },
7 { "id": 2421, "parent_id": 242, "name": "上海科技绿洲" },
8 { "id": 21, "parent_id": 2, "name": "静安区" },
9 { "id": 242, "parent_id": 24, "name": "漕河泾街道" },
10 { "id": 22, "parent_id": 2, "name": "黄浦区" },
11 { "id": 11, "parent_id": 1, "name": "顺义区" },
12 { "id": 2, "parent_id": 0, "name": "上海市" },
13 { "id": 24, "parent_id": 2, "name": "徐汇区" },
14 { "id": 1, "parent_id": 0, "name": "北京市" },
15 { "id": 2422, "parent_id": 242, "name": "漕河泾开发区" },
16 { "id": 32, "parent_id": 3, "name": "深圳市" },
17 { "id": 33, "parent_id": 3, "name": "东莞市" },
18 { "id": 3, "parent_id": 0, "name": "广东省" }
19 ]
20}
1function arrayToTreeV3(list, root) {
2 return list
3 .filter(item => item.parent_id === root)
4 .map(item => ({...item, children: arrayToTreeV3(list, item.id)}))
5}
获取URL中的参数
这里主要还是正则表达式的设计
- /?&/igm，前面是？或者&，任意字符直到遇到=，使用非贪婪模式，等号后面是非&符号的任意字符，然后去匹配就好了
- 理论上可以用matchAll，然后用迭代器去处理
1function name(url) {
2 const _url = url || window.location.href;
3 const _urlParams = _url.match(/[?&](.+?=[^&]+)/igm);
4 return _urlParams ? _urlParams.reduce((a,b) => {
5 const value = b.slice(1).split('=');
6 a[value[0]] = value[1];
7 return a;
8 }, {}) : {}
9
10}
小结
场景题目其实很多，没办法去枚举，但是这里标记出来的是相对高频的题目，对上面题目有些好的解法的也可以在评论区分享
个人笔记记录 2021 ~ 2025