vue中三个点是什么意思- 技术经验 -卓越飞翔博客

vue 中三个点（...）表示展开运算符，它用于：展开数组，将多个数组元素合并为一个新数组。展开对象，将多个对象的属性和值合并为一个新对象。展开函数参数，接收不定数量的参数。

vue中三个点是什么意思

Vue 中三个点（...）的意思

在 Vue 中，三个点（...）表示展开运算符，它有以下作用：

展开数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const combinedArr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5]

展开对象

const obj1 = { name: 'John', age: 30 };
const obj2 = { city: 'New York' };
const combinedObj = { ...obj1, ...obj2 }; // { name: 'John', age: 30, city: 'New York' }

展开函数参数

const sum = (...numbers) =&gt; {
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
};
console.log(sum(1, 2, 3, 4, 5)); // 15

其它用途

克隆数组或对象：结合展开运算符和 Object.assign() 可实现快速克隆。
过滤数组：与 Array.prototype.filter() 结合使用，以展开的方式过滤元素。
解构对象：用于从对象中提取特定属性并将其分配给变量。

需要注意的是：

展开运算符只能用于可迭代对象（数组、对象、字符串）。
对于数组，展开运算符会将元素展开为独立项，而对于对象，它会展开属性和值。
展开运算符在浅复制中很有用，这意味着它只会复制对象的一级属性，而不会复制嵌套属性。

相关推荐