1. ES6 字符串处理的隐藏利器
1.1 智能补全:padStart 与 padEnd
这两个方法让字符串格式化变得异常简单。padStart 在字符串开头填充指定字符直到达到目标长度,padEnd 则在末尾填充。实际开发中我常用它们来处理:
- 数字补零:
'7'.padStart(2, '0')→ '07' - 表格对齐:
'价格'.padEnd(10, '-') + '¥15'→ "价格--------¥15" - 掩码处理:
'18888888888'.slice(-4).padStart(11, '*')→ "*******8888"
踩坑提醒:当填充字符串长度超过需要时,只会截取前面部分。比如
'a'.padStart(3, '123')结果是 '12a'
1.2 精准检测:startsWith/endsWith
比正则更直观的字符串检测方法:
javascript复制// 文件类型检查
const isImage = fileName.endsWith('.png')
// API路由判断
const isAdmin = path.startsWith('/admin')
1.3 重复生成:repeat
创建重复模式的利器:
javascript复制// 生成分隔线
const divider = '-'.repeat(50)
// 星级评分显示
const stars = '★'.repeat(rating) + '☆'.repeat(5-rating)
2. 数组操作的进阶技巧
2.1 扁平化处理:flat 与 flatMap
处理嵌套数组时特别高效:
javascript复制// 快速拍平数组
const nested = [1, [2, [3]]]
nested.flat(Infinity) // [1, 2, 3]
// 先map后flat的便捷操作
const data = ['hello', 'world']
data.flatMap(str => str.split(''))
// ['h','e','l','l','o','w','o','r','l','d']
2.2 精准定位:at 方法
比传统索引更优雅的取值方式:
javascript复制const arr = [10, 20, 30]
arr.at(-1) // 30 等效于 arr[arr.length-1]
arr.at(-2) // 20
2.3 数组填充:fill 的妙用
初始化数组时特别方便:
javascript复制// 快速创建5个空位的数组
new Array(5).fill(null)
// 创建渐变序列
Array(5).fill().map((_,i) => i*10) // [0,10,20,30,40]
3. 对象操作的隐藏功能
3.1 安全合并:Object.assign 的替代方案
传统合并对象会丢失属性描述符:
javascript复制// 更安全的对象合并
const merged = Object.defineProperties({},
Object.getOwnPropertyDescriptors(obj1),
Object.getOwnPropertyDescriptors(obj2)
)
3.2 属性遍历:entries 的现代用法
配合解构让对象遍历更优雅:
javascript复制// 现代对象遍历
for(const [key, value] of Object.entries(obj)){
console.log(`${key}: ${value}`)
}
// 快速转Map
const map = new Map(Object.entries(obj))
3.3 深度冻结:不可变对象的实现
实现真正的不可变数据:
javascript复制function deepFreeze(obj) {
Object.getOwnPropertyNames(obj).forEach(name => {
const prop = obj[name]
if(typeof prop === 'object' && prop !== null)
deepFreeze(prop)
})
return Object.freeze(obj)
}
4. Set/Map 的高阶应用
4.1 数组去重:Set 的极致用法
比传统方式更简洁高效:
javascript复制// 基本去重
const unique = [...new Set(array)]
// 对象数组去重(需相同引用)
const objSet = new Set(objects.map(JSON.stringify))
const uniqueObjs = [...objSet].map(JSON.parse)
4.2 数据关联:Map 的强大之处
比普通对象更适合做键值映射:
javascript复制// 建立DOM元素映射
const domMap = new Map()
domMap.set(buttonElement, { clicks: 0 })
button.addEventListener('click', () => {
const data = domMap.get(buttonElement)
data.clicks++
})
4.3 性能优化:WeakMap 的内存管理
解决内存泄漏的利器:
javascript复制// 私有属性模拟
const privateData = new WeakMap()
class Person {
constructor(name) {
privateData.set(this, { name })
}
getName() {
return privateData.get(this).name
}
}
