本文介绍在JavaScript中向对象动态添加属性的两种常用方法。首先讲解使用Object.assign()合并对象的技术要点，包括参数顺序和返回值处理。随后针对动态渲染场景，演示如何通过for...of和for...in遍历数组并添加自定义标记属性，帮助开发者实现如鼠标悬停状态判断等交互功能。
向对象内新增属性
第一步，确立待添加的属性名称及其对应的值；
let obj = {'a':123};设定待合并的源对象；
let obj1 = {'c':1,'d':2};调用Object.assign()函数实现对象合并
let twoobj = Object.assign(obj1,obj);
//两个注意的点：
//用一个新的名称来接受Object.assign的值；不要用obj1来接受，会报错
//第一个参数是原来的对象，第二个是要添加进去的对象；实现对象动态属性添加的两种方案
具体需求
需为各课程项增加鼠标悬停状态检测功能
逻辑分析
鉴于数据采用动态渲染机制，需在渲染前获取数据并注入flag标识，随后添加自定义isHover属性，最终渲染处理后的数据以判定鼠标选中效果。
以下展示两种动态添加对象属性的方式
for of遍历对象，获取对象元素for in遍历对象，获取对象索引
补充说明：
this.videoList = []
const data = await this.$http.post('Course/shows', {
type: nedCuriculums.type,
grade: nedCuriculums.grade,
classtype: nedCuriculums.classtype,
subject: nedCuriculums.subject,
term: term
}).catch(err => err)
this.term = term
var videoList = data.data
-----------------------------------------------------------
// 假如数据是这样：
videoList = [
{
id: 1
type: "同步课程",
grade: "一年级",
classtype: "xxx",
subject: "数学",
term: "上"
}，
{
id: 2
type: "同步课程",
grade: "一年级",
classtype: "xxx",
subject: "数学",
term: "上"
}
]
// 第一种方法，给对象动态添加属性 for of 根据对象
var newvideoList = {}
for (var item of videoList) {
newvideoList = {
isHover: false,
dirname: item.dirname,
id: item.id,
resourceId: item.resourceId
}
this.videoList.push(newvideoList)
}
// 第2种方法 for in 根据下标
for (var index in videoList) {
videoList[index].isHover = false
this.videoList.push(videoList[index])
console.log(index)
this.videoList.push(videoList[index])
}
上述内容系个人经验总结，旨在提供参考，恳请读者支持本站。