在 JavaScript 的发展历程中，语法糖的不断引入使得开发者能够以更简洁、更优雅的方式编写代码。语法糖虽不会增加语言的功能，但能显著提升代码的可读性和开发效率。
可选链操作符（?.）
可选链操作符是 JavaScript 中极为实用的语法糖。在传统 JavaScript 中，当访问对象嵌套属性时，如果中间某个对象为null或undefined，就会抛出错误。例如：
let obj = {
a: {
b: {
c: 'value'
}
}
};
console.log(obj.a.b.c); // 正常输出 'value'
console.log(obj.d.e.f); // 抛出TypeError: Cannot read properties of undefined (reading 'e')
使用可选链操作符?.后，当访问路径上的对象为null或undefined时，表达式会立即返回undefined，而不会抛出错误：
let obj = {
a: {
b: {
c: 'value'
}
}
};
console.log(obj?.a?.b?.c); // 输出 'value'
console.log(obj?.d?.e?.f); // 输出 undefined
这在处理可能为null或undefined的对象属性访问时，极大地简化了代码，减少了繁琐的错误处理逻辑。
空值合并操作符（??）
空值合并操作符??用于在表达式为null或undefined时提供一个默认值。例如：
let value1 = null;
let value2 = value1?? 'default value';
console.log(value2); // 输出 'default value'
let value3 = 0;
let value4 = value3?? 'default value';
console.log(value4); // 输出 0，因为 0 不是 null 或 undefined
与逻辑或操作符||不同，||会在值为假值（如0、''、false等）时也使用默认值，而??仅在值为null或undefined时才使用默认值，这使得代码在处理默认值场景时更加精确。
箭头函数（() => {}）
箭头函数是 JavaScript 中函数定义的一种简洁语法糖。传统函数定义方式如下：
function add(a, b) {
return a + b;
}
使用箭头函数可以简化为：
const add = (a, b) => a + b;
箭头函数不仅语法简洁，而且在处理this绑定方面有独特优势。箭头函数没有自己的this，它的this继承自外层作用域，这在很多场景下避免了this指向混乱的问题，例如在事件处理和回调函数中：
const myObject = {
name: 'example',
callback: function() {
setTimeout(() => {
console.log(this.name); // 正确输出 'example'
}, 1000);
}
};
myObject.callback();
如果这里使用传统函数作为setTimeout的回调，this指向将不是myObject，而是window（在浏览器环境中）。
解构赋值
解构赋值是一种从数组或对象中提取值并赋值给变量的便捷语法。从数组解构赋值：
let [a, b, c] = [1, 2, 3];
console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3
从对象解构赋值：
let {name, age} = {name: 'John', age: 30};
console.log(name); // 输出 'John'
console.log(age); // 输出 30
解构赋值还可以设置默认值，使代码更加灵活：
let {city = 'Unknown'} = {name: 'John'};
console.log(city); // 输出 'Unknown'
这在函数参数处理等场景中非常实用，能够清晰地表明函数期望的参数结构。
模板字面量（ ） 模板字面量提供了一种创建字符串的更灵活方式。传统字符串拼接方式：
let name = 'John';
let message = 'Hello, my name is'+ name + '.';
使用模板字面量：
let name = 'John';
let message = `Hello, my name is ${name}.`;
模板字面量可以直接在字符串中嵌入表达式，并且支持多行字符串，无需手动添加换行符：
let html = `
<div>
<p>Some text</p>
</div>
`;
这在生成 HTML、CSS 等文本内容时，极大地提高了代码的可读性和维护性。
展开运算符（...）
展开运算符在 JavaScript 中用途广泛。它可以将数组或对象展开，方便进行元素的合并、复制等操作。例如，合并数组：
let arr1 = [1, 2];
let arr2 = [3, 4];
let combinedArr = [...arr1, ...arr2];
console.log(combinedArr); // 输出 [1, 2, 3, 4]
复制数组：
let originalArr = [1, 2, 3];
let copiedArr = [...originalArr];
console.log(copiedArr); // 输出 [1, 2, 3]
在函数调用中，展开运算符还可以将数组作为参数传递，避免了使用apply方法的繁琐：
function add(a, b, c) {
return a + b + c;
}
let numbers = [1, 2, 3];
let result = add(...numbers);
console.log(result); // 输出 6
对于对象，展开运算符同样适用，可以实现对象的合并与浅复制：
let obj1 = {a: 1, b: 2};
let obj2 = {c: 3};
let mergedObj = {...obj1, ...obj2};
console.log(mergedObj); // 输出 {a: 1, b: 2, c: 3}
for...of 循环
for...of循环是遍历可迭代对象（如数组、字符串、Map、Set 等）的简洁方式。与传统的for循环相比，它更加直观和简洁。例如，遍历数组：
let numbers = [1, 2, 3];
for (let number of numbers) {
console.log(number);
}
// 依次输出 1, 2, 3
遍历字符串：
let str = 'hello';
for (let char of str) {
console.log(char);
}
// 依次输出 'h', 'e', 'l', 'l', 'o'
for...of循环还可以结合解构赋值，在遍历数组或对象时更方便地获取元素和属性值：
let pairs = [[1, 'one'], [2, 'two']];
for (let [key, value] of pairs) {
console.log(key, value);
}
// 依次输出 1 'one', 2 'two'
async/await
async/await是处理异步操作的语法糖，基于 Promise 实现。它使得异步代码看起来更像同步代码，大大提高了异步代码的可读性。例如，使用fetch获取数据：
async function getData() {
try {
let response = await fetch('https://example.com/api/data');
let data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
getData();
在上述代码中，await关键字暂停函数执行，直到 Promise 被解决（resolved）或被拒绝（rejected），然后返回 Promise 的值或抛出错误。相比传统的链式调用then方法，async/await的代码结构更加清晰，逻辑更易理解。
