1.6 ES6 核心语法糖ES6 及后续标准引入的一系列语法糖大幅简化了 JavaScript 代码的书写方式提升了代码的可读性与简洁度是现代前端交互开发的日常基础语法。这些语法糖普遍用于数据提取、对象操作、字符串拼接、安全访问等场景能够显著减少冗余代码降低边界错误的发生概率。1.6.1 解构赋值对象 / 数组 / 参数解构赋值是一种通过模式匹配快速从对象、数组等复合结构中提取值并直接赋值给变量的语法。它能够极大简化数据提取的代码量在处理接口返回数据、函数参数解析、状态拆分等场景中高频使用。一、对象解构从对象中提取对应属性赋值给同名变量支持重命名、默认值、嵌套解构等进阶能力。基础语法const { 属性名 } 对象基础示例const user { name: 张三, age: 25, gender: 男 }; // 传统写法 const name user.name; const age user.age; // 对象解构写法 const { name, age } user; console.log(name, age); // 张三 25重命名当变量名与属性名不一致时可通过冒号重命名const { name: userName, age: userAge } user; console.log(userName); // 张三默认值属性不存在时使用预设默认值仅当属性值严格为 undefined 时生效const { name, role 普通用户 } user; console.log(role); // 普通用户嵌套解构提取深层嵌套对象的属性适配接口返回的多层级数据结构const data { code: 200, result: { list: [], total: 10 } }; const { result: { total } } data; console.log(total); // 10二、数组解构按位置顺序从数组中提取值并赋值给变量支持默认值、变量交换、忽略元素等能力。基础语法const [变量1, 变量2] 数组基础示例const arr [1, 2, 3]; // 传统写法 const first arr[0]; const second arr[1]; // 数组解构写法 const [first, second] arr; console.log(first, second); // 1 2忽略元素通过空位跳过不需要的元素const [, , third] arr; console.log(third); // 3交换变量无需临时变量即可完成两个变量的值交换let a 1, b 2; [a, b] [b, a]; console.log(a, b); // 2 1默认值对应位置元素为 undefined 时触发默认值const [x, y, z 0] [1, 2]; console.log(z); // 0三、参数解构在函数参数中直接使用解构语法直接提取传入对象 / 数组的属性无需在函数体内二次取值尤其适合配置项类参数。对象参数解构最常用适合多参数函数// 传统写法需要手动从参数对象中取值 function getUserInfo(user) { console.log(user.name, user.age); } // 参数解构写法同时支持默认值 function getUserInfo({ name, age 18 }) { console.log(name, age); } getUserInfo({ name: 张三, age: 25 }); // 张三 25典型场景封装组件、请求函数时配置项参数通过对象解构接收同时设置默认配置提升代码可读性与健壮性。1.6.2 扩展运算符与剩余参数扩展运算符...与剩余参数...语法形式相同但作用与使用场景完全相反扩展运算符用于将可迭代对象 “展开” 为独立的元素剩余参数用于将独立的元素 “收集” 为数组。二者是数组、对象操作与函数参数处理的核心语法。一、扩展运算符扩展运算符可以展开数组、对象、字符串等可迭代结构常用于数据合并、浅拷贝、参数传递等场景。数组扩展const arr1 [1, 2, 3]; const arr2 [4, 5, 6]; // 数组合并 const merged [...arr1, ...arr2]; // [1,2,3,4,5,6] // 数组浅拷贝 const copy [...arr1]; // 在指定位置插入元素 const newArr [0, ...arr1, 4]; // [0,1,2,3,4]对象扩展const base { a: 1, b: 2 }; const extra { c: 3, b: 4 }; // 对象合并后面的属性会覆盖前面的同名属性 const mergedObj { ...base, ...extra }; // {a:1, b:4, c:3} // 对象浅拷贝 const objCopy { ...base }; // 新增属性并覆盖原有属性 const newObj { ...base, d: 4 }; // {a:1, b:2, d:4}函数调用传参将数组元素展开作为函数的独立参数替代传统的 apply 写法。const nums [1, 2, 3]; // 传统写法 Math.max.apply(null, nums); // 3 // 扩展运算符写法 Math.max(...nums); // 3二、剩余参数在函数形参中使用 ...将传入的多个实参收集为一个数组用于处理不定数量的参数是传统 arguments 对象的现代替代方案。基础语法function fn(...args) {}基础示例// 求和函数支持任意数量参数 function sum(...nums) { return nums.reduce((prev, cur) prev cur, 0); } sum(1, 2, 3); // 6 sum(1, 2, 3, 4, 5); // 15与解构结合使用提取部分参数后将剩余内容收集起来const [first, ...rest] [1, 2, 3, 4]; console.log(first); // 1 console.log(rest); // [2,3,4] const { name, ...other } { name: 张三, age: 25, gender: 男 }; console.log(other); // {age:25, gender:男}注意剩余参数必须放在参数列表的最后一位不能出现在中间或开头。1.6.3 可选链. 与空值合并可选链与空值合并运算符是 ES2020 引入的语法专门用于优化深层属性访问与默认值处理的代码能够大幅简化边界判断避免因属性不存在导致的运行时报错是处理接口返回的不确定数据的必备语法。一、可选链操作符.可选链操作符用于安全访问对象的深层嵌套属性当访问链中某一层的值为 null 或 undefined 时表达式会直接返回 undefined而不会抛出错误替代传统的多层 防御式判断。基础语法obj?.prop、obj?.[expr]、fn?.()基础示例const user { name: 张三, address: null }; // 传统写法层层判断避免 Cannot read properties of null 报错 const city user user.address user.address.city; // 可选链写法 const city user?.address?.city; console.log(city); // undefined不会报错支持的场景对象属性访问user?.name动态属性访问user?.[name]函数调用handleSubmit?.()函数存在才执行不存在则返回 undefined数组访问list?.[0]数组存在才访问对应下标典型场景处理后端接口返回的嵌套数据无需层层判空即可安全访问深层字段显著减少冗余的防御代码。二、空值合并运算符空值合并运算符是一个逻辑运算符当左侧操作数为 null 或 undefined 时返回右侧操作数否则返回左侧操作数。它专门用于设置默认值解决了传统 || 运算符会将所有假值0、、false都替换为默认值的问题。对比示例const count 0; // || 写法0 被视为假值会返回默认值不符合业务预期 const count1 count || 10; // 10 // ?? 写法仅 null/undefined 才返回默认值0 是有效值正常返回 const count2 count ?? 10; // 0常见使用场景// 表单字段默认值 const username formData.username ?? 未设置; // 接口分页参数默认值 const pageSize params.pageSize ?? 20;三、组合使用可选链与空值合并通常搭配使用实现「安全访问 兜底默认值」的完整逻辑是接口数据处理的标准写法。// 安全获取用户所在城市不存在则返回“未知” const city user?.address?.city ?? 未知;1.6.4 模板字符串与标签模板模板字符串是 ES6 引入的新型字符串语法使用反引号包裹支持多行字符串、变量插值与表达式嵌入彻底替代了传统的字符串拼接写法在动态文本生成、HTML 结构拼接等交互场景中广泛使用。标签模板是其高级用法可自定义模板的解析逻辑。一、模板字符串基础语法使用反引号 包裹字符串通过 ${表达式} 嵌入变量或任意 JavaScript 表达式核心特性与示例变量插值const name 张三; const age 25; // 传统字符串拼接 const str1 姓名 name 年龄 age; // 模板字符串 const str2 姓名${name}年龄${age};多行字符串无需手动拼接换行符直接换行书写即可适合拼接 DOM 结构。const html div classcard h3${title}/h3 p${content}/p /div ;嵌入表达式${} 中可以放入任意 JavaScript 表达式包括运算、函数调用、三元判断。const score 85; const levelText 等级${score 60 ? 及格 : 不及格};二、标签模板标签模板是模板字符串的高级用法在模板字符串前紧跟一个函数名该函数会自动接收模板的字符串片段与插值结果可自定义处理逻辑实现字符串过滤、国际化、语法转义等能力。基础示例// 定义标签函数 function highlight(strings, ...values) { return strings.reduce((result, str, i) { const value values[i] ? span classhighlight${values[i]}/span : ; return result str value; }, ); } const name 张三; const result highlight用户${name}操作成功; // 结果用户span classhighlight张三/span操作成功典型应用场景HTML 字符转义防止 XSS、多语言国际化文案处理、SQL 语句预处理等。