什么是语法糖

语法糖（Syntactic Sugar）是指编程语言中那些让代码更易读、更简洁的语法特性，它不引入新功能，只是用更“甜美”的语法包装现有功能。

关键特征：

• 语法层面改进，不影响运行时行为
• 可被等价转换为更基础的语法
• 提高可读性和开发效率
• 不改变语言的计算能力

经典语法糖示例

1. 类（class）语法糖

// 语法糖写法（ES6+）
class Person {
    constructor(name) {
        this.name = name;
    }

    greet() {
        return `Hello, ${this.name}`;
    }

    static create(name) {
        return new Person(name);
    }
}

// 脱糖后（ES5等效写法）
function Person(name) {
    this.name = name;
}

Person.prototype.greet = function () {
    return "Hello, " + this.name;
};

Person.create = function (name) {
    return new Person(name);
};

// Babel实际编译结果（简化）
var Person = /*#__PURE__*/ (function () {
    function Person(name) {
        _classCallCheck(this, Person);
        this.name = name;
    }

    _createClass(
        Person,
        [
            {
                key: "greet",
                value: function greet() {
                    return "Hello, " + this.name;
                },
            },
        ],
        [
            {
                key: "create",
                value: function create(name) {
                    return new Person(name);
                },
            },
        ]
    );

    return Person;
})();

2. 箭头函数语法糖

// 语法糖写法
const add = (a, b) => a + b;
const square = x => x * x;
const log = () => console.log("Hello");

// 脱糖后（传统函数）
const add = function (a, b) {
    return a + b;
};

const square = function (x) {
    return x * x;
};

const log = function () {
    console.log("Hello");
};

// 但注意：箭头函数不只是语法糖！
// 它还自动绑定this、没有arguments、不能作为构造函数
// 严格来说是"语义糖"或"语法盐"

3. 解构赋值语法糖

// 语法糖写法
const [first, second] = [1, 2, 3];
const { name, age } = person;
const { x: newX, y: newY } = point;

// 脱糖后
const first = [1, 2, 3][0];
const second = [1, 2, 3][1];

const name = person.name;
const age = person.age;

const newX = point.x;
const newY = point.y;

// 嵌套解构
const {
    a: {
        b: { c },
    },
} = obj;
// 等价于
const c = obj.a.b.c;

4. 模板字符串语法糖

// 语法糖写法
const name = "Alice";
const greeting = `Hello, ${name}!`;
const multiLine = `
  Line 1
  Line 2
`;

// 脱糖后
const name = "Alice";
const greeting = "Hello, " + name + "!";
const multiLine = "\n  Line 1\n  Line 2\n";

// 带标签的模板字符串
function highlight(strings, ...values) {
    return strings.reduce(
        (result, str, i) => result + str + (values[i] ? `<strong>${values[i]}</strong>` : ""),
        ""
    );
}

const result = highlight(`Hello ${name}, you have ${count} messages.`);
// 相当于
const result = highlight(["Hello ", ", you have ", " messages."], name, count);

5. 扩展运算符语法糖

// 语法糖写法
const arr = [...arr1, ...arr2];
const obj = { ...obj1, ...obj2 };
func(...args);

// 脱糖后
const arr = arr1.concat(arr2);
const obj = Object.assign({}, obj1, obj2);
func.apply(null, args);

// 但注意差异：
// [...iterable] 可以展开任何可迭代对象
// concat() 只能连接数组