一、基础数据类型处理
字符串处理
- 使用trim()去除首尾空格,replace(/\s+/g, '')删除所有空格
- 模板字符串实现动态拼接:
Hello ${name}
数值处理
- 强制转换:parseInt()/parseFloat()处理字符串转数字
- 精度控制:num.toFixed(2)保留两位小数
数组处理
高阶方法链式操作:
const filtered = arr.map(item => item.trim()) .filter(Boolean) // 过滤空值 .reduce((acc, val) => acc + val, 0);
空数组检测:Array.isArray(arr) && arr.length > 0
二、空数据深度处理
空值识别与过滤
严格判断:value !== null && value !== undefined
递归清理嵌套结构:
function cleanData(data) {
if (Array.isArray(data)) return data.filter(Boolean);
if (typeof data === 'object') {
return Object.keys(data).reduce((acc, key) => {
const val = cleanData(data[key]);
return val !== null ? {...acc, [key]: val} : acc; }, {}); } return data; }
特殊场景处理
空字符串转null:
const handleEmptyStr = str => str === '' ? null : str;
可选链操作符避免报错:obj?.prop?.subprop
三、实战应用案例
// 用户输入数据清洗
const rawInput = { name: " Alice ", age: "", scores: [null, 90, undefined] };
const processed = { name: rawInput.name.trim(), age: rawInput.age || null, // 空字符串转null
scores: cleanData(rawInput.scores) // 输出: [90] };
四、性能优化建议
- 避免频繁创建新数组,优先使用filter()原地修改
- 大数据集处理采用Web Workers分片计算
- 使用WeakMap缓存已处理对象减少递归开销