文章目录
- 展开运算符介绍使用
- 实际项目应用
展开运算符介绍使用
展开运算符（...）是 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，并且记录创建时间已经格式化处理。
