最近在阅读一些 JavaScript 代码时，我们发现很多时候可以用更简洁的语法来完成相同的操作，这便是 “语法糖” 的魅力。JavaScript 提供了许多这样的语法糖，可以帮助我们减少代码量，提升开发效率，并且让代码更易读。今天，我们就来一起探索这 40 个神奇的 “糖果”，看看它们是如何让我们的代码变得更优雅的。
开篇点题
你是否曾经觉得 JavaScript 代码写起来过于冗长？或者在阅读别人的代码时，看到一些 “奇奇怪怪” 的语法感到困惑？其实，这些 “奇奇怪怪” 的语法很可能就是 JavaScript 的语法糖。掌握这些语法糖，不仅能让你的代码更简洁，还能提升你的开发效率。本文将带你一步步揭开 JavaScript 40 个语法糖的神秘面纱。
变量声明与操作
1.批量声明变量
长代码：
let a;
let b;
let c;
a = 1;
b = 2;
c = 3;
简写：
let a = 1, b = 2, c = 3;
是不是简洁了很多？当我们需要一次性声明并初始化多个变量时，这种写法非常方便。
2.变量交换
长代码：
let temp = a;
a = b;
b = temp;
简写：
[a, b] = [b, a];
利用数组解构，可以轻松实现变量的交换，告别繁琐的临时变量。
3.三元运算符
长代码：
let status;
if (isActive) {
status = 'Active';
} else {
status = 'Inactive';
}
简写：
let status = isActive ? 'Active' : 'Inactive';
三元运算符是简化 if-else 逻辑的利器，让代码更紧凑。
4.字符串插值
长代码：
const greeting = 'Hello, ' + name + '!';
简写：
const greeting = `Hello, ${name}!`;
使用模板字符串，我们可以直接在字符串中嵌入变量，避免繁琐的字符串拼接。
5.默认参数
长代码：
function greet(name) {
name = name || 'Guest';
return `Hello, ${name}`;
}
简写：
function greet(name = 'Guest') {
return `Hello, ${name}`;
}
ES6 的默认参数语法，使得函数参数的默认值设置更加简洁直观。
对象与数组操作
6.对象属性简写
长代码：
const name = 'John';
const age = 30;
const person = { name: name, age: age };
简写：
const name = 'John';
const age = 30;
const person = { name, age };
当对象的属性名与变量名相同时，可以使用这种简写方式，让代码更清爽。
7.箭头函数
长代码：
const add = function(x, y) {
return x + y;
};
简写：
const add = (x, y) => x + y;
箭头函数不仅更简洁，还能自动绑定 this 上下文，简化了回调函数的书写。
8.短路求值设置默认值
长代码：
const port = userPort !== undefined ? userPort : 3000;
简写：
const port = userPort || 3000;
利用 || 的短路特性，可以简洁地为变量设置默认值。
9.对象解构
长代码：
const firstName = user.firstName;
const lastName = user.lastName;
简写：
const { firstName, lastName } = user;
对象解构可以快速从对象中提取属性，赋值给对应的变量。
10.数组解构
长代码：
const first = numbers[0];
const second = numbers[1];
简写：
const [first, second] = numbers;
数组解构和对象解构类似，可以方便地从数组中提取元素。
11.动态属性名
长代码：
const obj = {};
obj['color'] = 'blue';
简写：
const key = 'color';
const obj = { [key]: 'blue' };
利用计算属性名，可以使用变量动态地设置对象的属性名。
12.合并对象
长代码：
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = Object.assign({}, obj1, obj2);
简写：
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 };
使用展开运算符，可以简洁地合并多个对象。
13.对象方法简写
长代码：
const car = {
start: function() {
console.log('Car started');
}
};
简写：
const car = {
start() {
console.log('Car started');
}
};
当属性值为函数时，可以省略 function 关键字。
14.数组展开
长代码：
const arr1 = [1, 2];
const arr2 = arr1.concat([3, 4]);
简写：
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
利用展开运算符，可以简洁地合并多个数组。
15.剩余参数
长代码：
function sum() {
return Array.prototype.slice.call(arguments).reduce((a, b) => a + b, 0);
}
简写：
function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
剩余参数可以将函数的多余参数收集到一个数组中。
现代语法特性
16.空值合并运算符
长代码：
let value = userValue !== null && userValue !== undefined ? userValue : 'default';
简写：
const value = userValue ?? 'default';
空值合并运算符 (??) 只有当左侧为 null 或 undefined 时，才会返回右侧的值，更加精确地处理空值情况。
17.可选链
长代码：
let street = user && user.address ? user.address.street : undefined;
简写：
let street = user?.address?.street;
可选链 (?.) 可以避免访问深层嵌套对象时出现 undefined 错误。
18.短路求值
长代码：
if (isActive) {
doSomething();
}
简写：
isActive && doSomething();
使用 && 的短路特性，可以在满足条件时执行函数。
19.立即执行函数
长代码：
function sayHello() {
console.log('Hello!');
}
sayHello();
简写：
(() => console.log('Hello!'))();
使用箭头函数和括号，可以创建立即执行的函数。
20.指数运算
长代码：
const square = Math.pow(num, 2);
简写：
const square = num ** 2;
指数运算符 ** 是计算幂的简洁写法。
21.for...of 循环
长代码：
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
简写：
for (const item of arr) {
console.log(item);
}
for...of 循环更简洁地遍历数组或可迭代对象。
22.includes 方法
长代码：
if (arr.indexOf(value) !== -1) {
console.log('Value exists');
}
简写：
if (arr.includes(value)) {
console.log('Value exists');
}
includes 方法判断数组是否包含某个值，更易读。
23.Array.from()
长代码：
const arrayLike = { 0: 'a', 1: 'b', length: 2 };
const arr = Array.prototype.slice.call(arrayLike);
简写：
const arrayLike = { 0: 'a', 1: 'b', length: 2 };
const arr = Array.from(arrayLike);
Array.from() 可以将类数组对象或可迭代对象转换为数组。
24.find() 方法
长代码：
let found;
for (let i = 0; i < arr.length i if arri> 10) {
found = arr[i];
break;
}
}
简写：
const found = arr.find(item => item > 10);
find() 方法可以查找数组中符合条件的第一个元素。
25.findIndex() 方法
长代码：
let index = -1;
for (let i = 0; i < arr.length i if arri> 10) {
index = i;
break;
}
}
简写：
const index = arr.findIndex(item => item > 10);
findIndex() 方法查找数组中符合条件的第一个元素的索引。
26.some() 方法
长代码：
let hasItem = false;
for(let i = 0; i < arr.length i if arri> 10) {
hasItem = true;
break;
}
}
简写：
const hasItem = arr.some(item => item > 10);
some() 方法用于检测数组中是否有满足指定条件的元素。
27.every() 方法
长代码：
let allMatch = true;
for (let i = 0; i < arr.length; i++) {
if (arr[i] <= 10) {
allMatch = false;
break;
}
}
简写：
const allMatch = arr.every(item => item > 10);
every() 方法检测数组中是否所有元素都符合指定条件。
28.reduce() 方法
长代码：
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
}
简写：
const sum = arr.reduce((acc, curr) => acc + curr, 0);
reduce() 方法用于对数组中的每个元素执行一个由您提供的 reducer 函数，将其汇总为单个返回值。
29.map() 方法
长代码:
const doubledArr = [];
for(let i=0; i<arr.length; i++) {
doubledArr.push(arr[i] * 2);
}
简写:
const doubledArr = arr.map(item => item * 2);
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
30.filter() 方法
长代码:
const filteredArr = [];
for(let i=0; i 10) {
filteredArr.push(arr[i]);
}
}
简写:
const filteredArr = arr.filter(item => item > 10);
filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
31.padStart() 和 padEnd() 方法
长代码:
let str = '5';
while (str.length < 3) {
str = '0' + str;
}
console.log(str);
简写:
const str = '5'.padStart(3, '0');
const str2 = '5'.padEnd(3, '0');
padStart() 和 padEnd() 方法在字符串的开头和结尾填充指定字符串，直到达到指定长度。
32.Object.keys() 方法
长代码：
const keys = [];
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
keys.push(key);
}
}
简写:
const keys = Object.keys(obj);
Object.keys() 方法返回一个由给定对象自身的可枚举属性名称组成的数组。
33.Object.values() 方法
长代码:
const values = [];
for (const key in obj) {
if(obj.hasOwnProperty(key)) {
values.push(obj[key]);
}
}
简写:
const values = Object.values(obj);
Object.values() 方法返回一个由给定对象自身的所有可枚举属性值组成的数组。
34.Object.entries() 方法
长代码:
const entries = [];
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
entries.push([key, obj[key]]);
}
}
简写:
const entries = Object.entries(obj);
Object.entries() 方法返回一个由给定对象自身可枚举属性的 [key, value] 对组成的数组。
35.Set 数据结构
长代码:
const uniqueArr = [];
for(let i=0; i<arr.length; i++) {
if(uniqueArr.indexOf(arr[i]) === -1) {
uniqueArr.push(arr[i]);
}
}
简写:
const uniqueArr = [...new Set(arr)];
Set 数据结构只存储唯一值，可用于快速去重。
36.动态导入
长代码:
import('./module.js')
.then(module => {
module.function();
});
简写:
const module = await import('./module.js');
module.function();
import() 可用于动态导入模块，按需加载。
37.标签模板
长代码:
function tag(strings, ...values) {
console.log(strings);
console.log(values);
}
tag `Hello, ${'World'}!`;
简写:
function tag(strings, ...values) {
console.log(strings);
console.log(values);
}
tag`Hello, ${'World'}!`;
标签模板允许你使用一个函数来解析模板字符串。
38.Async/Await
长代码:
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
}
fetchData().then(data => {
console.log(data);
});
简写:
async function fetchData() {
await new Promise(resolve => setTimeout(resolve, 1000));
return 'data';
}
const data = await fetchData();
console.log(data);
async/await 是处理异步操作的更优雅的方式。
39.BigInt
长代码:
const bigNumber = 9007199254740991;
简写:
const bigNumber = 9007199254740991n;
BigInt 可以表示任意精度的整数。
40.globalThis
长代码:
let globalObj;
if (typeof window !== 'undefined') {
globalObj = window;
} else if (typeof global !== 'undefined') {
globalObj = global;
} else if (typeof self !== 'undefined') {
globalObj = self;
}
简写:
const globalObj = globalThis;
globalThis 提供了一种访问全局对象的标准方式，在各种环境中均适用。
总结
本文介绍了 JavaScript 中常用的 40 种语法糖，涵盖变量声明、对象操作、函数简写和现代语法特性等多个方面。掌握这些语法糖，可以使代码更简洁、更易读，并提升开发效率。我们鼓励大家在实际项目中尝试这些技巧，感受它们带来的便利。
现在，请思考一下：你在日常开发中还遇到过哪些让你惊艳的语法糖？欢迎在评论区分享你的经验和见解，让我们一起进步！