语法糖是什么糖🍬？

语法糖(Syntactic Sugar)

语法糖是什么？不用疑惑，你每天都会用到，不信你看看下面常见语法糖，其实就是方便开发者的一些简写。从定义式来说，语法糖是编程语言提供的特殊语法，它不改变语言功能，但能让代码更简洁易读，就像给苦咖啡加糖一样让代码更"甜"。

1. 模板字符

//语法糖（模板字符串）
const msg = `这是${name}!`
//等价于字符串拼接
const msg = '这是' + name + '!';

2. Class类

//Class语法糖
class Person {
    constructor(name) {
        this.name = name
    }
    sayHi() {
        console.log(`Hi, ${this.name}!`);
    }
}
//等价于原型链写法
function Person (name){
    this.name = name;
}
Person.prototype.sayHi = function() {
    console.log(`Hi, ${this.name}!`);
}

3. 解构赋值

// 语法糖（解构）
const { name, age } = { name: 'Alice', age: 25 };

// 等价于传统写法
const obj = { name: 'Alice', age: 25 };
const name = obj.name;
const age = obj.age;

4. 拓展运算符 ...

// 语法糖（展开数组）
const arr = [...[1, 2], 3]; // [1, 2, 3]

// 等价于 concat
const arr = [1, 2].concat([3]);

5. 默认参数

// 语法糖（默认参数）
function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

// 等价于逻辑或写法
function greet(name) {
  name = name || 'Guest';
  console.log('Hello, ' + name + '!');
}

6. 箭头函数 ()=>{}

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

// 等价于普通函数
const add = function(a, b) {
  return a + b;
};

7. 可选链 ?.

// 语法糖（可选链）
const value = obj?.prop?.nestedProp;

// 等价于手动检查
const value = obj && obj.prop && obj.prop.nestedProp;

8. 空值合并 ??

// 语法糖（空值合并）
const value = input ?? 'default';

// 等价于逻辑或（但有区别）
const value = input || 'default'; // 会过滤 falsy 值（如 0、''）