JS对象解构

💡对象解构 | JavaScript语法 | Vue

💡基础语法

在 JavaScript 中，对象解构是一种从对象中提取属性值并将其赋值给变量的语法。使用对象解构的语法结构可以通过一种简洁的方式从对象中选择性地提取属性。

对象解构的基本语法是使用花括号 {} 来指定要提取的属性，然后将其赋值给对应的变量。例如：

const obj = { message: 'Hello', count: 42 };

// 使用对象解构
const { message, count } = obj;

console.log(message); // 输出: 'Hello'
console.log(count); // 输出: 42

在上面的示例中，我们创建了一个名为 obj 的对象，其中包含 message 和 count 两个属性。然后，通过对象解构将 obj 中的属性值提取出来并分别赋值给 message 和 count 变量。这样，我们可以直接使用这些变量来访问对象的属性值。

 

对象解构还支持给变量指定默认值，以防对象中不存在对应的属性。例如：

const obj = { message: 'Hello' };

// 使用对象解构，并为 count 指定默认值
const { message, count = 0 } = obj;

console.log(message); // 输出: 'Hello'
console.log(count); // 输出: 0

在上面的示例中，obj 对象中没有 count 属性，但我们通过对象解构为 count 指定了默认值为 0。因此，尽管 obj 中没有 count 属性，但 count 变量的值仍为默认值 0。

---

💡在Vue列表渲染中的应用

对象解构在 Vue.js 的 v-for 循环中使用时，可以方便地从迭代的对象中选择性地提取属性，并将其赋值给对应的变量。这样，我们可以在循环迭代中灵活地访问和使用对象的属性值。

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

<li v-for="{ message } in items">
  {{ message }}
</li>

<!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>