js给对象动态添加属性的2种方法

最新推荐文章于 2024-07-24 16:25:35 发布

Lavandula angustifolia.

最新推荐文章于 2024-07-24 16:25:35 发布

阅读量7k

点赞数 1

分类专栏：笔记文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_45955391/article/details/121791615

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了两种在JavaScript中为对象动态添加属性的方法。一是使用`for...of`循环，创建新的对象并添加`isHover`属性；二是使用`for...in`循环，直接在原有对象上添加`isHover`属性。内容涉及到数据处理和前端渲染，适用于前端开发人员学习。

摘要由CSDN通过智能技术生成

js给对象动态添加属性的2种方法

需求：
要给每个课程添加一个判断鼠标是否hover

分析：
因为数据是动态渲染的，所以需要动态的给他添加一个flag标记，就得在数据渲染之前先拿到，然后再添加一个自己需要的比如isHover属性，然后就渲染处理之后的数据，从而就能够判断是否显示鼠标选中的效果。
在这里插入图片描述

下面是2中方法给对象动态添加属性

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])
  }