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

2025-06-28 17:12:57 +0800 CST views 87

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

在日常开发中,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. 解构赋值

简写方式:

const user = { name: 'Tom', age: 25 };
const { name, age } = user;

适用于对象、数组、函数参数等结构的快速提取。


10. 字符串转数字

简写方式:

const num = +'42'; // 42
const num2 = parseFloat('3.14'); // 推荐方式

也可使用 Number('42'),但 +str 是最简洁的。


11. 多重条件判断(多选一)

传统写法:

if (val === 1 || val === 2 || val === 3) {
  // do something
}

简写方式:

if ([1, 2, 3].includes(val)) {
  // do something
}

12. 快速幂运算

传统写法:

const square = Math.pow(4, 2);

简写方式:

const square = 4 ** 2;

ES2016+ 引入的指数运算符 **


13. 对象属性简写

传统写法:

const name = 'Tom';
const age = 30;
const person = { name: name, age: age };

简写方式:

const name = 'Tom';
const age = 30;
const person = { name, age };

14. 数组映射简写

传统写法:

const numbers = [1, 2, 3];
const doubled = numbers.map(function(n) {
  return n * 2;
});

简写方式:

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);

15. 交换变量值

传统写法:

let a = 1, b = 2;
let temp = a;
a = b;
b = temp;

简写方式:

let a = 1, b = 2;
[a, b] = [b, a];

16. 动态对象属性名

传统写法:

const obj = {};
obj[dynamic + 'Name'] = value;

简写方式:

const obj = {
  [`${dynamic}Name`]: value
};

💬 写在最后

掌握这些 JavaScript 简写技巧,不仅能让你写出更高效、易读的代码,也能在团队协作中展示你对语言本质的理解。如果你还有其他实用技巧,欢迎评论区补充交流!

🎯 写得简洁,不等于难以维护;关键是适度使用 + 良好的命名!

复制全文 生成海报 编程 JavaScript 开发技巧

推荐文章

Nginx 反向代理 Redis 服务
2024-11-19 09:41:21 +0800 CST
Boost.Asio: 一个美轮美奂的C++库
2024-11-18 23:09:42 +0800 CST
Vue3如何执行响应式数据绑定?
2024-11-18 12:31:22 +0800 CST
避免 Go 语言中的接口污染
2024-11-19 05:20:53 +0800 CST
Claude:审美炸裂的网页生成工具
2024-11-19 09:38:41 +0800 CST
html一个包含iPhoneX和MacBook模拟器
2024-11-19 08:03:47 +0800 CST
Vue3中的自定义指令有哪些变化?
2024-11-18 07:48:06 +0800 CST
Golang - 使用 GoFakeIt 生成 Mock 数据
2024-11-18 15:51:22 +0800 CST
html流光登陆页面
2024-11-18 15:36:18 +0800 CST
淘宝npm镜像使用方法
2024-11-18 23:50:48 +0800 CST
12个非常有用的JavaScript技巧
2024-11-19 05:36:14 +0800 CST
Gin 与 Layui 分页 HTML 生成工具
2024-11-19 09:20:21 +0800 CST
PHP 8.4 中的新数组函数
2024-11-19 08:33:52 +0800 CST
解决python “No module named pip”
2024-11-18 11:49:18 +0800 CST
一个有趣的进度条
2024-11-19 09:56:04 +0800 CST
Vue3中如何进行异步组件的加载?
2024-11-17 04:29:53 +0800 CST
JavaScript 上传文件的几种方式
2024-11-18 21:11:59 +0800 CST
mendeley2 一个Python管理文献的库
2024-11-19 02:56:20 +0800 CST
程序员茄子在线接单