ES6解构赋值技巧与代码优化方法

const user = { name: 'Alice', age: 25, role: 'dev' };

const { name, age } = user;

// 相当于 const name = user.name, age = user.age;

const colors = ['red', 'green', 'blue'];

const [first, second] = colors; // first = 'red', second = 'green'

const { name, age = 18, city = 'unknown' } = user;

// 若 user 没有 age 或 city，自动使用默认值

const [a, b, c = 'default'] = ['x', 'y']; // c 将是 'default'

const { name: userName, role: userRole } = user;

// 解构后变量名为 userName 和 userRole

const { email = 'no@email.com', name: displayName } = user;

const student = {

  info: {

    name: 'Bob',

    score: { math: 90, english: 85 }

  }

};

const { info: { name, score: { math } } } = student;

// 直接获取 name 和 math 分数

const matrix = [[1, 2], [3, 4]];

const [[a, b], [c, d]] = matrix;

function greet({ name, age = 20 }) {

  console.log(`Hello ${name}, you are ${age} years old.`);

}

greet({ name: 'Tom' }); // 自动解构并使用默认 age

const key = 'title';

const post = { title: 'ES6 Tips', content: '...' };

const { [key]: value } = post; // value = 'ES6 Tips'