JavaScript数据处理攻略

52 阅读1分钟

一、基础数据类型处理

字符串处理

  • 使用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缓存已处理对象减少递归开销