Array.push 新对象，最后一个对象被推送

Question

I am trying to loop through an array of objects, which depending on their type property, will create a different class and append it to an array. The problem is that the output is always just a list of duplicates of the last class created.

// Create Elements from Content
// The id's are created by UUIDV4 and are all different.
self._elements = new Array

let e;
self.content.page_data.forEach(cont => {
    switch (cont.type) {
        case 'paragraph':
            e = new Paragraph()
            console.log(e.element.id)
            self._elements.push(e)  
            break;

        case 'title':
            console.log('title')
        return 
    }
})
console.log(self._elements)

After troubleshooting I've found that the problem isn't e , as each instance is different, however once it is pushed / added to the array, the problem occurs. The problem only occurs when instances of Paragraph() are created. As other items in the array, like text, will remain the same while still duplicating the last class.

Please can someone explain what I'm missing here?

EDIT - Class for Paragraph

class Paragraph {
  constructor(value = '') {

    self._element = template_paragraph.cloneNode(true).content.children[0];
    const quil = self._element.children[0].children[1].children[0];
    self.quill = new Quill(quil, {
      modules: {
        toolbar: [
          [{ header: [1, 2, false] }],
          ['bold', 'italic', 'underline'],
          [{ list: 'ordered' }, { list: 'bullet' }]
        ]
      },
      placeholder: 'Compose an epic...',
      theme: 'snow'  // or 'bubble'
    })

    self._element.id = uuidv4()
  }

  get element() {
    return self._element
  }

  set_content(content) {
    // Set quill value
    if (!content) return
    //self.quill.setContents(content)
  }
}

The quill interacts with my html clone as intended. I hope this will help.

Answer 1

The keyword is this in JavaScript. Not self (that's a Python thing.) Since self is not a keyword in JavaScript, some people use it by convention as a normal variable name by manually assigning var self = this; somewhere. But really, I think you just want to say this and use it the normal way .

Replace self with this in your code and you should be good to go.

Answer 2

Allow me to demonstrate a counterexample to your claim. You code seems to work correctly and the problem is elsewhere, most likely your Paragraph class.

By just changing the supporting framework (consisting of self and its content , page_data etc.) and the Paragraph class) I can demonstrate that your code (which I have used verbatim) works correctly, in that each element of self._elements is indeed different (most notably has a different id ).

 // [[[ MOCKED FRAMEWORK TO DEMONSTRATE THAT YOUR CODE WORKS let self = { content: { page_data: [ {type:'title'}, {type:'paragraph'}, {type:'paragraph'}, ] } }; let nextUnusedId = 101; let Paragraph = function () { this.element = { id: nextUnusedId++ } } // ]]] // Create Elements from Content // The id's are created by UUIDV4 and are all different. self._elements = new Array let e; self.content.page_data.forEach(cont => { switch (cont.type) { case 'paragraph': e = new Paragraph() console.log(e.element.id) self._elements.push(e) break; case 'title': console.log('title') return } }) console.log(self._elements)

Answer 3

Try just using a new variable declared inside the scope of the loop

// Create Elements from Content
// The id's are created by UUIDV4 and are all different.
self._elements = new Array

self.content.page_data.forEach(cont => {
    switch (cont.type) {
        case 'paragraph':
            var e = new Paragraph()
            console.log(e.element.id)
            self._elements.push(e)  
            break;

        case 'title':
            console.log('title')
        return 
    }
})
console.log(self._elements)

From your problem description, it sounds as if there is a single "reference" variable of 'e' and you are just creating an array of that reference over and over again, and whatever the loop last iterated over is what all those references point to