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.防抖和节流