快捷導(dǎo)航

js中如何往對(duì)象中添加屬性

更新時(shí)間：2022年10月08日 10:21:42 作者：RAY_CHEN.

這篇文章主要介紹了js中如何往對(duì)象中添加屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

往對(duì)象中添加屬性

首先，定義一個(gè)要添加進(jìn)去的屬性及屬性值；

let obj = {'a':123};

將要被添加的對(duì)象：

let obj1 = {'c':1,'d':2};

使用Object.assign()將兩個(gè)對(duì)象合并

let twoobj = Object.assign(obj1,obj);
//兩個(gè)注意的點(diǎn)：
//用一個(gè)新的名稱(chēng)來(lái)接受Object.assign的值；不要用obj1來(lái)接受，會(huì)報(bào)錯(cuò)
//第一個(gè)參數(shù)是原來(lái)的對(duì)象，第二個(gè)是要添加進(jìn)去的對(duì)象；

給對(duì)象動(dòng)態(tài)添加屬性的2種方法

需求

要給每個(gè)課程添加一個(gè)判斷鼠標(biāo)是否hover

分析

因?yàn)閿?shù)據(jù)是動(dòng)態(tài)渲染的，所以需要?jiǎng)討B(tài)的給他添加一個(gè)flag標(biāo)記，就得在數(shù)據(jù)渲染之前先拿到，然后再添加一個(gè)自己需要的比如isHover屬性，然后就渲染處理之后的數(shù)據(jù)，從而就能夠判斷是否顯示鼠標(biāo)選中的效果。

下面是2中方法給對(duì)象動(dòng)態(tài)添加屬性

for of 遍歷對(duì)象，得到對(duì)象
for in 遍歷對(duì)象，得到對(duì)象的下標(biāo)

補(bǔ)充：

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
-----------------------------------------------------------
// 假如數(shù)據(jù)是這樣：
videoList = [
	{
		id: 1
		type: "同步課程",
        grade: "一年級(jí)",
        classtype: "xxx",
        subject: "數(shù)學(xué)",
        term: "上"
     }，
     {
     	id: 2
		type: "同步課程",
        grade: "一年級(jí)",
        classtype: "xxx",
        subject: "數(shù)學(xué)",
        term: "上"
     }
]

// 第一種方法，給對(duì)象動(dòng)態(tài)添加屬性 for of  根據(jù)對(duì)象
 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  根據(jù)下標(biāo)
  for (var index in videoList) {
    videoList[index].isHover = false
    this.videoList.push(videoList[index])
    console.log(index)
    this.videoList.push(videoList[index])
  }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: