展开运算符的介绍使用（...），实际应用this.tableData.push({...})

我 | 在这里
⭐ 全栈开发攻城狮、全网10W+粉丝、2022博客之星后端领域Top1、专家博主。
🎓擅长 指导毕设 | 论文指导 | 系统开发 | 毕业答辩 | 系统讲解等。已指导60+位同学顺利毕业
✈️个人公众号：热爱技术的小郑。回复 Java全套视频教程 或 前端全套视频教程 即可获取 300G+ 教程资料，以及大量毕设项目源码。
🐬专注干货知识分享、项目实战案例开发分享
🚪 传送门：Github毕设源码仓库

展开运算符介绍使用

  展开运算符（...）是 ES6 引入的一项功能，在 JavaScript 中用途广泛。它可以用于对象、数组等多种数据结构，主要用于展开或复制它们的元素或属性。下面是展开运算符在不同场景中的常见使用方法：

1. 数组展开

• 合并数组：可以将多个数组合并为一个数组。
• 复制数组：可以创建数组的浅拷贝。
• 在函数参数中展开数组：可以将数组元素作为独立的参数传递给函数。

// 合并数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

// 复制数组
const originalArray = [7, 8, 9];
const copiedArray = [...originalArray];
console.log(copiedArray); // [7, 8, 9]

// 展开数组作为函数参数
function sum(a, b, c) {
    return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

2. 对象展开

• 合并对象：可以将多个对象合并为一个对象。
• 复制对象：可以创建对象的浅拷贝。
• 添加或覆盖对象属性：在复制对象时，可以添加或覆盖属性。

// 合并对象
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }

// 复制对象
const originalObject = { e: 5, f: 6 };
const copiedObject = { ...originalObject };
console.log(copiedObject); // { e: 5, f: 6 }

// 添加或覆盖对象属性
const baseObject = { g: 7, h: 8 };
const newObject = { ...baseObject, h: 9, i: 10 };
console.log(newObject); // { g: 7, h: 9, i: 10 }

3. 函数参数中的展开

  在函数定义中，使用展开运算符可以将不定数量的参数收集到一个数组中。这称为“rest参数”。
示例：

// Rest 参数
function multiply(multiplier, ...numbers) {
    return numbers.map(number => number * multiplier);
}
console.log(multiply(2, 1, 2, 3)); // [2, 4, 6]

4. 字符串展开

展开字符串为字符数组。

const str = "hello";
const charArray = [...str];
console.log(charArray); // ['h', 'e', 'l', 'l', 'o']

5. 应用场景总结

• 数组合并/复制：… 是合并和复制数组时最简便的方式。
• 对象合并/复制：使用 … 可以轻松合并或复制对象。
• 函数参数传递：通过 …，可以将数组元素作为函数的独立参数传递，也可以在函数内部将不定数量的参数收集为数组。
• 字符串处理：展开字符串为字符数组，可以方便地处理字符串中的每个字符。

注意事项：

• 浅拷贝：无论是数组还是对象，展开运算符只会进行浅拷贝。如果对象或数组中包含引用类型的数据（如嵌套对象），展开运算符不会递归复制这些引用类型的数据。
• 对象属性的覆盖顺序：在对象展开时，后面的属性会覆盖前面的属性。

  展开运算符极大地简化了数组和对象的操作，提升了代码的可读性和简洁性，是现代 JavaScript 编程中非常有用的工具。

实际项目应用

   newType: {
       typeName: "",
       typeDesc: "",
    },

  this.tableData.push({
        ...this.newType,
        typeId: 10,
        articleNum: 0,
        typeCreateTime: formatDate(date),
      }); 代码解释

  在一个表格数据数组 this.tableData 中新增一条记录（对象）。下面是对这段代码的详细解释：

1. this.tableData.push({…})

• this.tableData 是一个数组，通常用于存储表格中的数据。push() 方法会将新元素添加到数组的末尾。
• 这里的 push() 方法用于向 this.tableData 数组中新增一条数据。

2. {…this.newType}

• 通过展开运算符（...），将对象 this.newType 的所有属性复制到新的对象中。
• 这样可以在添加新对象时，继承 this.newType 中已有的属性，而不需要手动一个一个地写入属性。

3. typeId: 10

• 为新对象添加或覆盖属性 typeId，其值为 10。
• 如果 this.newType 中已有 typeId 属性，这里会覆盖原来的值。
  typeId 可能是数据的唯一标识或类型的 ID。

4. articleNum: 0

• 为新对象添加或覆盖属性 articleNum，其值为 0。
• articleNum 表示与此类型相关的文章数量，初始值为 0。

5. typeCreateTime: formatDate(date)

• 为新对象添加或覆盖属性 typeCreateTime，其值为 formatDate(date) 的返回值。
• formatDate(date) 是一个函数，用于格式化日期 date。函数可能将 date 转换为特定格式的字符串，如 YYYY-MM-DD 或 YYYY-MM-DD HH:mm:ss。
• typeCreateTime 可能表示记录的创建时间，格式化后存储。

6. 完整的作用
  这段代码的整体功能是在 this.tableData 数组中添加一条新数据。这条新数据继承了 this.newType 中的属性，并新增/覆盖了 typeId, articleNum, 和 typeCreateTime 属性。这样可以在表格中展示一条新的记录，记录的 typeId 固定为 10，articleNum 初始化为 0，并且记录创建时间已经格式化处理。