最近在阅读一些 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 (arr[i] > 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 (arr[i] > 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 (arr[i] > 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

简写:

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

简写:

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 种语法糖，涵盖变量声明、对象操作、函数简写和现代语法特性等多个方面。掌握这些语法糖，可以使代码更简洁、更易读，并提升开发效率。我们鼓励大家在实际项目中尝试这些技巧，感受它们带来的便利。

现在，请思考一下：你在日常开发中还遇到过哪些让你惊艳的语法糖？欢迎在评论区分享你的经验和见解，让我们一起进步！