前端开发中常用的语法糖
前端开发中常用的语法糖可以显著提升代码简洁性和可读性,
以下是主要语法糖分类及示例:
一、ES6核心语法糖
let/const声明
提供块级作用域,避免var的变量提升问题
const声明不可变常量,优先使用
let name = '小明'; if(true) { let name = '小红' } // 外层name不受影响 const PI = 3.14; // 不可重新赋值
箭头函数
简化回调函数写法,自动绑定this
// 传统写法 numbers.map(function(num) { return num*2 }); // 箭头函数 numbers.map(num => num*2);
模板字符串
支持多行文本和变量插值
const info = `姓名:${name} 年龄:${age}`;
二、数据操作语法糖
解构赋值
快速提取对象/数组值
const { name, age } = user; // 对象解构 const [first, second] = [1, 2]; // 数组解构
展开运算符
合并数组/对象,注意是浅拷贝
const newArr = [...arr1, ...arr2]; const newObj = { ...obj1, ...obj2 }
三、安全访问语法糖
可选链操作符
避免undefined报错
const street = user?.address?.street;
空值合并运算符
提供默认值(仅对null/undefined生效)
const value = input ?? 'default';