测开必备技能-JavaScript语法糖

JavaScript 的语法糖（Syntactic Sugar）是指那些让代码更简洁、更易读的语法特性，它们本质上是对底层功能的封装或简化写法，不改变语言的功能，但能提升开发效率。以下是 JavaScript 中常见的语法糖示例：

1. 箭头函数（Arrow Functions）

• 简化函数表达式，尤其是匿名函数。

// 传统写法
const add = function(a, b) { return a + b; };

// 语法糖（箭头函数）
const add = (a, b) => a + b;

2. 模板字符串（Template Literals）

• 用反引号 ` 包裹字符串，支持多行文本和变量嵌入（${}）。

// 传统拼接字符串
const message = "Hello, " + name + "!\nToday is " + day + ".";

// 语法糖（模板字符串）
const message = `Hello, ${name}!
Today is ${day}.`;

3. 解构赋值（Destructuring Assignment）

• 从数组或对象中提取值并赋值给变量。

// 数组解构
const [a, b] = [1, 2]; // a=1, b=2

// 对象解构
const { name, age } = { name: "Alice", age: 30 };

4. 展开运算符（Spread Operator）

• 用 ... 展开数组或对象。

// 合并数组
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// 合并对象
const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 }; // { a: 1, b: 2 }

5. 可选链操作符（Optional Chaining ?.）

• 安全访问深层嵌套的对象属性，避免 Cannot read property of undefined。

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

// 语法糖
const street = user?.address?.street;

6. 空值合并运算符（Nullish Coalescing ??）

• 提供默认值，仅在值为 null 或 undefined 时生效。

// 传统写法
const value = input !== null && input !== undefined ? input : "default";

// 语法糖
const value = input ?? "default";

7. 简写属性（Shorthand Property）

• 当对象属性名和变量名相同时，可以简写。

const name = "Alice";
const age = 30;

// 传统写法
const person = { name: name, age: age };

// 语法糖
const person = { name, age };

8. 类语法（Class）

• 简化原型继承的写法，更接近传统面向对象语言。

// 传统原型写法
function Person(name) { this.name = name; }
Person.prototype.sayHello = function() { console.log("Hello"); };

// 语法糖（Class）
class Person {
  constructor(name) { this.name = name; }
  sayHello() { console.log("Hello"); }
}

9. 默认参数（Default Parameters）

• 为函数参数设置默认值。

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

// 语法糖
function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}

10. 数组方法链式调用

• 使用 map、filter、reduce 等方法简化操作。

// 传统循环写法
const result = [];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] > 2) result.push(arr[i] * 2);
}

// 语法糖（链式调用）
const result = arr.filter(n => n > 2).map(n => n * 2);

总结

语法糖的核心目的是让代码更简洁、更符合直觉。虽然它们不改变 JavaScript 的底层逻辑，但能显著提升代码的可读性和开发效率。使用时应结合场景，避免过度简化导致代码难以维护。