16 个 JavaScript 简写神技,提效 60%!

开发
本文分享 16 个最常用的 JavaScript 的简写技巧,掌握它们可以让我们编写出更简洁、更优雅的代码,并显著提升开发效率(增加摸鱼时间)。

JavaScript 是一门强大且灵活的语言,拥有丰富的特性和语法糖。分享下 16 个最常用的 JavaScript 的简写技巧,掌握它们可以让我们编写出更简洁、更优雅的代码,并显著提升开发效率(增加摸鱼时间)。

1. 三元运算符简化条件判断

// 传统写法
let result;
if (someCondition) {
    result = 'yes';
} else {
    result = 'no';
}

// 简写方式
const result = someCondition ? 'yes' : 'no';

2. 空值合并运算符

// 传统写法
const name = user.name !== null && user.name !== undefined ? user.name : 'default';

// 简写方式
const name = user.name ?? 'default';

3. 可选链操作符

// 传统写法
const street = user && user.address && user.address.street;

// 简写方式
const street = user?.address?.street;

4. 数组去重

// 传统写法
function unique(arr) {
    return arr.filter((item, index) => arr.indexOf(item) === index);
}

// 简写方式
const unique = arr => [...new Set(arr)];

5. 快速取整

// 传统写法
const floor = Math.floor(4.9);

// 简写方式
const floor = ~~4.9;

6. 合并对象

// 传统写法
const merged = Object.assign({}, obj1, obj2);

// 简写方式
const merged = {...obj1, ...obj2};

7. 短路求值

// 传统写法
if (condition) {
    doSomething();
}

// 简写方式
condition && doSomething();

8. 默认参数值

// 传统写法
function greet(name) {
    name = name || 'Guest';
    console.log(`Hello ${name}`);
}

// 简写方式
const greet = (name = 'Guest') => console.log(`Hello ${name}`);

9. 解构赋值

10. 字符串转数字

11. 多重条件判断

12. 快速幂运算

13. 对象属性简写

14. 数组映射

15. 交换变量值

16. 动态对象属性

// 传统写法
const obj = {};
obj[dynamic + 'name'] = value;

// 简写方式
const obj = {
    [`${dynamic}name`]: value
};
责任编辑:赵宁宁 来源: JavaScript
相关推荐

2025-02-20 09:00:00

字符串JavaScript代码

2021-01-31 23:56:49

JavaScript开发代码

2018-01-04 16:32:30

前端JavaScript

2025-01-07 10:48:08

2025-02-07 12:58:33

python自动化脚本

2022-04-11 08:34:27

IDEA代码补全

2022-04-06 08:35:13

IDEADebug调试Run运行

2022-05-09 08:36:56

IDEA代码重构

2022-03-28 08:35:33

IDEA快捷键操作视窗

2022-10-20 08:34:09

图像算法商品

2023-12-27 18:15:42

组装式生态提效开发中心

2022-01-04 08:14:00

IDEA快捷键操作系统

2018-07-06 13:02:23

2022-04-28 12:17:26

浏览器连字符hyphens

2024-07-11 11:31:17

2020-07-22 13:50:39

shell命令前端

2020-09-17 14:55:43

大数据

2022-05-30 09:44:11

TypeScriptJavaScript技巧

2023-03-07 10:44:05

前端JS 调试
点赞
收藏

51CTO技术栈公众号