我 | 在这里
⭐ 全栈开发攻城狮、全网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,并且记录创建时间已经格式化处理。