前端语法糖入门：让代码更简洁的秘密武器

// 基础语法

var person = new Object();

person.name = "张三";

person.age = 25;

person.sayHi = function() {

  console.log("你好！");

};

// 语法糖：对象字面量

const person = {

  name: "张三",

  age: 25,

  sayHi() {

    console.log("你好！");

  }

};

// 不好的写法：var

var a = 10;

if (true) {

  var a = 20; // 全局变量被覆盖

}

console.log(a); // 输出 20（预期是10）

// 好的写法：let/const

let b = 10;

if (true) {

  let b = 20; // 块级作用域，不影响外部

}

console.log(b); // 输出 10（符合预期）

const c = 30; // 常量，声明后不能修改

c = 40; // 报错：Assignment to constant variable

// 基础写法

const arr = \[10, 20, 30];

const a = arr\[0];

const b = arr\[1];

const c = arr\[2];

// 语法糖：数组解构

const \[a, b, c] = arr;

console.log(a, b, c); // 输出 10 20 30

// 进阶：跳过元素 + 默认值

const \[, b, c, d = 40] = arr; // 跳过第一个元素，d默认值40

console.log(b, c, d); // 输出 20 30 40

// 基础写法

const user = { name: "李四", age: 28, gender: "男" };

const name = user.name;

const age = user.age;

// 语法糖：对象解构

const { name, age } = user;

console.log(name, age); // 输出 李四 28

// 进阶：重命名 + 默认值

const { name: userName, gender: userGender = "未知" } = user;

console.log(userName, userGender); // 输出 李四 男

// 普通写法

function printUser(user) {

  console.log(user.name, user.age);

}

// 解构写法（更清晰）

function printUser({ name, age }) {

  console.log(name, age);

}

printUser(user); // 输出 李四 28

// 基础写法：字符串拼接

const name = "王五";

const age = 30;

const info = "我叫" + name + "，今年" + age + "岁，\n喜欢前端开发。";

// 语法糖：模板字符串

const info = \`我叫\${name}，今年\${age}岁，

喜欢前端开发。\`;

console.log(info);

// 输出：

// 我叫王五，今年30岁，

// 喜欢前端开发。

// 基础写法：普通函数

const add = function(a, b) {

  return a + b;

};

// 语法糖：箭头函数（1行代码，自动return）

const add = (a, b) => a + b;

// 进阶：多参数、多代码行

const calculate = (a, b, type) => {

  if (type === "add") return a + b;

  if (type === "subtract") return a - b;

};

const arr1 = \[1, 2, 3];

const arr2 = \[4, 5, 6];

// 合并数组（基础写法：arr1.concat(arr2)）

const mergedArr = \[...arr1, ...arr2];

console.log(mergedArr); // 输出 \[1,2,3,4,5,6]

// 复制数组（避免引用传递）

const copyArr = \[...arr1];

copyArr.push(4);

console.log(arr1); // 输出 \[1,2,3]（原数组不变）

// 函数传参（基础写法：Math.max.apply(null, arr1)）

const max = Math.max(...arr1);

console.log(max); // 输出 3

const obj1 = { a: 1, b: 2 };

const obj2 = { b: 3, c: 4 };

// 合并对象（后面对象覆盖前面的同名属性）

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // 输出 {a:1, b:3, c:4}

// 复制对象

const copyObj = { ...obj1 };

copyObj.a = 10;

console.log(obj1); // 输出 {a:1, b:2}（原对象不变）

const user = { name: "赵六" }; // user没有address属性

// 基础写法：需要先判断address是否存在

const street = user.address && user.address.street;

console.log(street); // 输出 undefined（不报错）

// 语法糖：可选链运算符

const street = user.address?.street;

console.log(street); // 输出 undefined（更简洁）

/\* 基础写法：单个属性逐个设置 \*/

.box {

  margin-top: 10px;

  margin-right: 20px;

  margin-bottom: 10px;

  margin-left: 20px;

  

  background-color: #f0f0f0;

  background-image: url("bg.png");

  background-repeat: no-repeat;

  background-position: center;

}

/\* 语法糖：简写属性 \*/

.box {

  margin: 10px 20px; /\* 上右下左：10px（上/下） 20px（左/右） \*/

  background: #f0f0f0 url("bg.png") no-repeat center; /\* 按顺序简写 \*/

}

/\* 定义CSS变量（通常在:root中，全局可用） \*/

:root {

  --primary-color: #2c3e50; /\* 主题色 \*/

  --font-size: 16px; /\* 基础字体大小 \*/

}

/\* 使用CSS变量 \*/

.button {

  background-color: var(--primary-color);

  font-size: var(--font-size);

}

.card {

  border: 1px solid var(--primary-color);

  font-size: var(--font-size);

}

/\* 后期修改：只改变量即可 \*/

:root {

  --primary-color: #3498db; /\* 主题色改为蓝色 \*/

}

// SCSS嵌套语法（编译后会变成原生CSS）

nav {

  width: 100%;

  

  // 后代选择器：nav ul

  ul {

    list-style: none;

    display: flex;

    

    // 后代选择器：nav ul li

    li {

      margin: 0 10px;

      

      // 伪类：nav ul li a:hover

      a:hover {

        color: var(--primary-color);

      }

    }

  }

}

// 编译后的原生CSS

nav {

  width: 100%;

}

nav ul {

  list-style: none;

  display: flex;

}

nav ul li {

  margin: 0 10px;

}

nav ul li a:hover {

  color: #2c3e50;

}

// 过度简化，可读性差

const f = (a,b)=>a+b;

// 更清晰（适合团队协作）

const add = (num1, num2) => num1 + num2;