记录几个js简写技巧

1. 判断是否有某个值

旧的写法：
if (isReady) {
    startApp();
}

新写法：
isReady && startApp();

2. 空值合并运算符（??）

旧的写法：
let name = username || 'admin';

新的写法：
let name = username ?? 'admin';

3. 可选链操作符（？.）

旧的写法：
const streetName = user && user.address && user.address.street && user.address.street.name;

新的写法：
const streetName = user?.address?.street?.name;

支持方法调用：obj.method?.() 和数组索引：arr?.[index]

4. 模板字符串拼接

旧的写法：
let message = 'Hello, ' + name + '! 你的余额是 ' + balance + ' 元。';

新的写法：
let message = `Hello, ${name}! 你的余额是 ${balance} 元。`;

5. 解构赋值（快速提取数据）

旧的写法：
let name = user.name;
let age = user.age;

新的写法：
let { name, age } = user;

name重新命名：
let { name: userName, age = 18 } = user;

6. 箭头函数

旧的写法：
function multiply(a, b) {
    return a * b;
}

新的写法：
const multiply = (a, b) => a * b;

7. 扩展运算符（...）

旧的写法：
let combined = array1.concat(array2);

新的写法：
let combined = [...array1, ...array2];

插入元素：
let newArr = [...array1, newItem, ...array2];

合并对象：
let config = { ...defaultConfig, ...userConfig };

8. 数组高阶函数：替代 for 循环

旧的写法：
let found;
for (let i = 0; i < users.length; i++) {
    if (users[i].id === targetId) {
        found = users[i];
        break;
    }
}

新的写法：
let found = users.find(user => user.id === targetId);

.find()	查找第一个匹配项
.filter()	过滤出所有符合条件的项
.map()	映射新数组
.some() / .every()	判断是否存在 / 是否全部满足条件
.includes()	判断是否包含某值

9. 指数运算符（**）

旧的写法：
let result = Math.pow(2, 8); // 256

新的写法：
let result = 2 ** 8; // 256

let half = 2 ** -1; // 0.5

10 逻辑赋值运算符

旧的写法：
if (user.role === null || user.role === undefined) {
    user.role = 'guest';
}

新的写法：
user.role ??= 'guest';  //等价于 user.role = user.role ?? 'guest';

只有当前值为真才更新：
user.isAdmin &&= false; // 若 isAdmin 为真，则设为 false

拼接字符串或累加：
message += welcomeText;
或者：
message ||= 'default'; // 如果 message 是假值，则赋默认值

运算符	含义
??=	空值合并赋值
&&=	逻辑与赋值
||=	逻辑或赋值

11. Nullish Coalescing 结合 Optional Chaining

将 ?. 和 ?? 结合使用，可以构建极其健壮的数据访问逻辑
const displayName = user?.profile?.name ?? '匿名用户';

先通过可选链安全访问 name
如果结果是 null 或 undefined，则返回默认值
应用于表单默认值、UI 渲染 fallback 等非常合适。

技巧	关键字/符号
1. 短路运算	&&, ||
2. 空值合并	??
3. 可选链	?.
4. 模板字符串	`${}`
5. 解构赋值	{}, []
6. 箭头函数	=>
7. 扩展运算符	...
8. 数组方法	.find(), .map() 等
9. 属性简写	{ name }
10. 指数运算符	**
11. 逻辑赋值	??=, &&=, ||=
12. 组合技巧	?. + ??

 

以上代码只记录自己学习react遇到过的，详情请看：稀土掘金-刘大华