面试题记录

1.// 将数字转变为千分位的金额类型 // 例如： // 输入：123456789 // 输出：‘123,456,789’ // 输入：1234567890.123 // 输出： ‘1,234,567,890.123’

方法一:

const num = 123412313.1112;
const numArr = String(num).split('.');
const left = numArr[0];
const right = numArr[1];
const listToMatrix  =(list=[], per)=> {
  const matrix = [];
  for (let index = 0, k=-1; index < list.length; index++) {
    if(index%per === 0){
      k++;
      matrix[k] = []
    };
    matrix[k].push(list[index]);
  }
  return matrix;
}
const leftArr = left?.split('').reverse();
const rightArr = right?.split('');

const res = listToMatrix(leftArr,3).reverse().map(item => item.reverse().join('')).join(',');
const res0 = listToMatrix(rightArr,3).map(item => item.join('')).join(',');
const ret = `${res}.${res0}`
console.log('ret',ret);

**方法二：**

const dealThousands = (num = 0) => {
  const str = String(num);
  const reg = str.includes('.')
    ? /(\d)(?=(\d{3})+\.)/g
    : /(\d)(?=(?:\d{3})+$)/g;
  return str.replace(reg, '$1,');
};

**方法三：**
function thousands(num){
	var splits=[],res=[];
	var splits = num.toString().split(".");
	splits[0].split("").reverse().map(function(item,i){
		if(i%3 == 0 && i!=0){ res.push(","); }
		res.push(item);
	});
	return res.reverse().join("")+(splits.length>1 ? "."+splits[1] : "");
}

2.前端在项目开发中的职责

1、参与需求文档开发，视觉交互的评审

2、页面和组件的拆分

3、还原视觉高

4、支持测试人员完成功能测试，并修复前端板块的bug

5、发布上线，优化代码和用户体验

3.项目开发中自己做的好的地方

1、问题分析能力

2、业务接受能力

3、代码规范

4.项目开发中遇到的问题

1.node-sass安装失败
解决： node版本和node-sass版本对不上
2.址栏url参数获取，有的时候Id是后端返回的，需要拼接到url传递到下一个页面。开发过程中遇到过一次后端返回的id是"jjfffytu888=843hfjsa"。这样的id处理起来就很麻烦了，上面获取url参数的方法将会完成失效
解决：先encodeURIComponent再拼接
   const id = 'jjfffytu888=843';
   console.log(encodeURIComponent(id)); //  jjfffytu888%3D843
   const idC = encodeURIComponent(id);
   const str = `http://www.baidu.com?name=zhangsan&id=${idC}&age=18`;
3.都知道的一个坑0.1 + 0.2 = 0.30000000000000004， 不等于0.3
解决： 1先扩大100倍计算，酸楚结果后再缩小100倍
4. 比如通过后端返回字段获取的，如果书写不当在返回的url中有多余的“%”字符，什么是多余的呢？
控制台就会报错了，这个报错将会阻碍后面js代码的执行，可能会造成整个页面白屏。
所以在使用解码函数的时候，尽量使用tyr catch，防止意外发生
 try {
      const url1 = 'http%3A%2F%2Fwww.baidu.com%3Fa%3Djjj%';
      console.log(decodeURIComponent(url1));
    } catch (error) {
 
    }

5.解析url中的params

let url = ‘http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled’;
parseParam(url)
/* 结果
{ user: ‘anonymous’,
id: [ 123, 456 ], // 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型
city: ‘北京’, // 中文需解码
enabled: true, // 未指定值得 key 约定为 true
}
*/

let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
const parseParams = (url) => {
  if (!url) return;
  const paramStr = url?.split("?")?.[1];
  const paramArr = paramStr?.split("&") || [];
  let paramObj = {};
  paramArr?.forEach((param) => {
    if (/=/.test(param)) {
      let [key, value] = param?.split("=");
      value = decodeURIComponent(value); // 解码
      value = /^\d+$/.test(value) ? parseFloat(value) : value; // 判断是否转为数字
      if (paramObj.hasOwnProperty(key)) {
        if (Array.isArray(paramObj[key])) {
          paramObj[key] = [...paramObj[key], value];
        } else {
          paramObj[key] = [paramObj[key], value];
        }
      } else {
        paramObj[key] = value;
      }
    } else {
      paramObj[param] = true;
    }
  });
  return paramObj;
};

https://juejin.cn/post/6919373017218809864

6.移动端首屏优化
7.js设计模式
8.继承的类型
9.组件划分的原则
10.this指向问题
11.防抖和节流