在日常的前端开发中，掌握一些 JavaScript 实用技巧可以让代码更加简洁和高效。今天分享几个我常用的技巧。

1. 数组去重

使用 Set 数据结构可以轻松实现数组去重：

1
2
3
const array = [1, 2, 2, 3, 4, 4, 5];
const unique = [...new Set(array)];
console.log(unique); // [1, 2, 3, 4, 5]

2. 可选链操作符

避免深层属性访问时的错误：

1
2
3
4
5
6
7
8
9
10
11
const user = {
  profile: {
    name: 'John'
  }
};

// 传统方式
const name = user && user.profile && user.profile.name;

// 使用可选链
const name2 = user?.profile?.name;

3. 空值合并操作符

提供默认值：

1
2
3
4
5
const value = null ?? 'default';
console.log(value); // 'default'

const value2 = 0 ?? 'default';
console.log(value2); // 0 (不是 null 或 undefined)

4. 数组快速转换为对象

1
2
3
4
const fruits = ['apple', 'banana', 'orange'];
const fruitObj = { ...fruits };
console.log(fruitObj);
// {0: 'apple', 1: 'banana', 2: 'orange'}

5. 动态属性名

使用计算属性名：

1
2
3
4
5
6
const key = 'name';
const user = {
  [key]: 'John',
  [`age_${key}`]: 30
};
console.log(user); // {name: 'John', age_name: 30}

6. 条件赋值

1
2
3
4
5
6
7
8
9
10
// 传统方式
let value;
if (condition) {
  value = 'yes';
} else {
  value = 'no';
}

// 简化方式
const value = condition ? 'yes' : 'no';

7. 解构赋值

交换变量值：

1
2
3
4
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

8. 数组求和

1
2
3
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

9. 检查数组中的条件

1
2
3
4
5
6
7
const numbers = [1, 2, 3, 4, 5];

// 检查是否所有元素都满足条件
const allPositive = numbers.every(n => n > 0); // true

// 检查是否有元素满足条件
const hasEven = numbers.some(n => n % 2 === 0); // true

10. 格式化 JSON

1
2
const data = { name: 'John', age: 30 };
console.log(JSON.stringify(data, null, 2));

总结

这些技巧在日常开发中非常实用，可以让代码更加简洁易读。JavaScript 还有很多其他强大的特性，建议深入学习官方文档来掌握更多技巧。

你有什么常用的 JavaScript 技巧吗？欢迎在评论区分享！