javascript 数据处理
JavaScript 提供了丰富的数据处理能力,涵盖数组、字符串、对象等核心数据结构的操作,以及高效的数据转换、存储和传输方法。以下是关键处理技巧和场景总结:
一、数组处理
遍历与转换
map()
:对每个元素操作并返回新数组,如[1,2,3].map(num => num * 2)
→[2,4,6]
filter()
:筛选满足条件的元素,如[1,2,3].filter(num => num > 2)
→:ml-citation{ref="3" data="citationList"}
增删元素
push()
/pop()
:末尾添加或删除元素 splice()
:从指定位置删除或插入元素,如arr.splice(1, 2, 6)
删除索引1开始的2个元素并插入6 slice()
:截取子数组,不影响原数组 排序与去重
sort()
:默认按字符串排序,可自定义逻辑,如arr.sort((a, b) => a - b)
去重:使用
Set
、filter()
或遍历比对
二、字符串处理
常用操作
截取:
substring()
、slice()
分割与合并:
split()
按分隔符拆分为数组,join()
合并数组为字符串 替换:
replace()
支持正则表达式替换,如str.replace(/a/g, 'b')
格式处理
trim()
:清除两端空白 charAt()
/charCodeAt()
:获取字符或Unicode编码
三、数据转换
类型转换
数字转字符串:
String(num)
或num.toString()
字符串转数字:
parseInt()
、parseFloat()
布尔转换:
Boolean(value)
,注意空字符串、0、null
会转false
结构化转换
查询字符串转对象:
Object.fromEntries(new URLSearchParams(query))
平级列表转树形结构:递归遍历,通过父子ID关联
四、高级数据处理
单行高效操作
求平均值:
array.reduce((t, num) => t + num, 0) / array.length
秒数转时间格式:
new Date(seconds * 1000).toISOString().substr(11, 8)
→HH:MM:SS
复杂场景
数据合并:使用扩展运算符
[...arr1, ...arr2]
或Object.assign()
深拷贝:
JSON.parse(JSON.stringify(obj))
或递归函数实现
五、数据存储与传输
本地存储
localStorage
/sessionStorage
:以键值对存储数据,支持跨页面共享 网络传输
使用
fetch
或XMLHttpRequest
发送请求,结合JSON.stringify()
序列化数据
总结
JavaScript 的数据处理核心在于灵活运用内置方法(如数组的 map
、filter
,字符串的 split
、replace
)和高效算法(如深拷贝、树形结构转换)。合理结合扩展运算符、正则表达式及第三方库(如 Lodash)可进一步提升开发效率