今天整理了 16个高频实用的JS极简技巧，覆盖数组、对象、字符串、异步等日常开发场景，没有复杂语法，全部即查即用，学会就能提升开发效率，还能让代码更简洁优雅，新手也能轻松上手。
重点：所有技巧都基于原生JS，不用依赖任何第三方库，复制到项目里直接能跑！
一、数组操作：告别冗余循环，一行搞定
数组是JS开发中最常用的数据类型，很多循环逻辑都能被原生方法简化，既简洁又不易出错。
1. 数组去重：一行代码搞定所有场景
不用写复杂的双重循环，利用Set的自动去重特性，普通数组和简单对象数组都能轻松处理，比传统循环效率高太多。
// 普通数组去重（最简洁）
const arr = [1, 2, 2, 3, 3, 3]
const uniqueArr = [...new Set(arr)] // [1, 2, 3]
// 对象数组去重（根据指定字段，如id）
const objArr = [{id: 1}, {id: 2}, {id: 1}]
const uniqueObjArr = [...new Map(objArr.map(item => [item.id, item])).values()]
// 结果：[{id: 1}, {id: 2}]
2. 数组扁平化：多维数组一键降维
遇到嵌套数组（如后台返回的树形结构），不用递归遍历，ES2019自带的flat方法直接搞定，支持指定降维深度。
// 多维数组扁平化（无限深度）
const nestedArr = [1, [2, [3, [4]]]]
const flatArr = nestedArr.flat(Infinity) // [1, 2, 3, 4]
// 指定深度（如降维1层）
const flatArr1 = nestedArr.flat(1) // [1, 2, [3, [4]]]
3. 过滤数组假值：一键清理脏数据
后台返回的数组常包含null、undefined、空字符串、0等假值，用filter(Boolean)一键过滤，简洁又高效。
const arr = [0, 1, false, 2, '', 3, null, undefined, NaN, 4]
// 过滤所有假值，保留有效数据
const cleanArr = arr.filter(Boolean) // [1, 2, 3, 4]
4. 数组求和/求最大值：不用循环遍历
利用reduce方法，一行代码实现数组求和、求最大值，比for循环更简洁，可读性更高。
// 数组求和
const numArr = [10, 20, 30, 40]
const sum = numArr.reduce((prev, curr) => prev + curr, 0) // 100
// 数组求最大值
const max = numArr.reduce((prev, curr) => Math.max(prev, curr), 0) // 40
5. 快速清空数组：比重新赋值更高效
不用写arr = []（可能导致引用丢失），直接修改数组length属性，一键清空，不改变原数组引用。
const arr = [1, 2, 3, 4]
arr.length = 0 // 清空数组
console.log(arr) // []，原引用不变
二、对象操作：简化赋值与遍历，少写冗余代码
对象操作是日常开发的高频场景，解构赋值、Object相关方法能极大简化代码，避免重复写obj.key。
6. 对象解构：快速提取属性，告别重复赋值
不用逐个提取对象属性，解构赋值一键获取，还能设置默认值，避免获取不存在的属性时报错。
const user = { name: '张三', age: 25, gender: '男' }
// 基础解构：提取指定属性
const { name, age } = user
console.log(name, age) // 张三 25
// 带默认值：属性不存在时使用默认值
const { address = '未知' } = user
console.log(address) // 未知
// 重命名：避免变量名冲突
const { name: userName } = user
console.log(userName) // 张三
7. 对象遍历：一键获取键值对，不用单独拿key
以前遍历对象要先拿key，再通过key获取value，用Object.entries()一键获取键值对，配合for...of循环更优雅。
const obj = { name: '张三', age: 25, skill: '前端' }
// 遍历对象的键值对
for (const [key, value] of Object.entries(obj)) {
console.log(`${key}: ${value}`)
// 输出：name: 张三, age: 25, skill: 前端
}
// 还能快速转为Map
const map = new Map(Object.entries(obj))
console.log(map.get('name')) // 张三
8. 对象合并：无需手动赋值，一键合并
合并两个对象，不用逐个复制属性，用Object.assign()或扩展运算符，简洁高效，还能覆盖重复属性。
const obj1 = { name: '张三', age: 25 }
const obj2 = { gender: '男', age: 26 }
// 方式1：Object.assign（浅合并）
const mergeObj1 = Object.assign({}, obj1, obj2)
// 结果：{ name: '张三', age: 26, gender: '男' }
// 方式2：扩展运算符（更简洁，推荐）
const mergeObj2 = { ...obj1, ...obj2 }
// 结果：{ name: '张三', age: 26, gender: '男' }
9. 快速判断对象是否有某属性
不用通过obj.key !== undefined判断，用Object.prototype.hasOwnProperty()，精准判断自身属性，避免继承属性干扰。
const obj = { name: '张三' }
// 正确判断：只判断自身属性
console.log(obj.hasOwnProperty('name')) // true
console.log(obj.hasOwnProperty('toString')) // false（toString是继承属性）
// 简化写法（常用）
console.log('name' in obj) // true
三、字符串操作：极简处理，避免复杂逻辑
字符串处理（格式化、截取、替换）是高频需求，很多复杂逻辑都能通过原生方法简化，不用写正则循环。
10. 字符串去空格：一键去除前后空格
不用写正则匹配，原生trim()方法去除前后空格，trimStart()/trimEnd()可单独去除前/后空格。
const str = ' 前端开发 '
console.log(str.trim()) // '前端开发'（去除前后空格）
console.log(str.trimStart()) // '前端开发 '（去除前空格）
console.log(str.trimEnd()) // ' 前端开发'（去除后空格）
11. 数字千分位格式化：金额展示必备
展示金额、大数时，千分位格式化是刚需，不用写复杂正则，toLocaleString()一键搞定，还支持小数位控制。
const num = 1234567.89
// 基础千分位格式化
console.log(num.toLocaleString()) // '1,234,567.89'
// 控制小数位（保留2位）
console.log(num.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }))
// '1,234,567.89'
// 整数千分位
console.log(1234567.toLocaleString()) // '1,234,567'
12. 字符串首字母大写：简洁优雅
无需拆分拼接，一行代码实现字符串首字母大写，适用于姓名、标题等场景。
const str = 'frontend'
// 首字母大写，其余小写
const upperStr = str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
console.log(upperStr) // 'Frontend'
四、其他高频技巧：解决日常开发痛点
这些技巧看似简单，却能解决开发中频繁遇到的痛点，避免重复踩坑，提升代码可读性。
13. 可选链操作符：避免“Cannot read property of undefined”
读取深层对象属性时，不用写一堆判断（如obj && obj.data && obj.data.user），可选链?.一键规避报错，简洁又安全。
const response = { data: { user: { name: '张三' } } }
// 以前的写法（繁琐，易报错）
const userName = response && response.data && response.data.user && response.data.user.name
// 现在的写法（推荐）
const userName = response?.data?.user?.name
console.log(userName) // '张三'
// 配合空值合并运算符??，设置默认值
const userAge = response?.data?.user?.age ?? 18
console.log(userAge) // 18（age不存在时取默认值）
14. 快速交换两个变量：不用临时变量
交换两个变量的值，不用声明临时变量，用ES6解构赋值，一行代码搞定，甚至能同时交换多个变量。
// 交换两个变量
let a = 10, b = 20
[a, b] = [b, a]
console.log(a, b) // 20 10
// 同时交换多个变量
let x = 1, y = 2, z = 3
[x, y, z] = [z, x, y]
console.log(x, y, z) // 3 1 2
15. 深拷贝：简单场景无需第三方库
简单对象（无函数、无Symbol、无循环引用）的深拷贝，不用引入lodash，用JSON.parse(JSON.stringify())一键搞定。
const obj = { name: '张三', age: 25, hobbies: ['打球', ' coding'] }
// 深拷贝
const deepCloneObj = JSON.parse(JSON.stringify(obj))
// 修改拷贝后的对象，不影响原对象
deepCloneObj.hobbies.push('看书')
console.log(obj.hobbies) // ['打球', ' coding']
console.log(deepCloneObj.hobbies) // ['打球', ' coding', '看书']
补充：复杂对象（含函数、Symbol）建议用structuredClone()，现代浏览器原生支持，比JSON方法更靠谱。
16. 函数参数默认值：避免繁琐判断
不用在函数内部判断参数是否存在，直接在参数列表设置默认值，简洁又清晰，还能配合解构使用。
// 基础默认值
function add(a = 0, b = 0) {
return a + b
}
console.log(add()) // 0（无参数时用默认值）
console.log(add(10)) // 10（只传一个参数）
// 结合解构赋值（常用）
function getUserInfo({ name = '匿名', age = 18 } = {}) {
console.log(name, age)
}
getUserInfo() // 匿名 18（无参数时用默认值）
getUserInfo({ name: '张三' }) // 张三 18
写在最后
其实JS开发的核心，就是“用最简单的代码实现需求”。这些技巧没有复杂的语法，全是原生JS自带的能力，却能帮我们省去大量冗余代码，减少报错概率，提升开发效率。
很多前端新手觉得JS难，不是因为语法复杂，而是没掌握这些“省时技巧”——同样的需求，别人用一行代码搞定，你却写几十行循环，效率自然差距很大。
建议把这篇文章收藏起来，写代码时随时对照查找，用多了自然就能记住。久而久之，你会发现自己的代码越来越简洁，开发速度也越来越快。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
