Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.1k views
in Technique[技术] by (71.8m points)

javascript - Object have data but when opened it's empty

Framework: React

So when I'm running the code below I console.log the objects. When looking at the first object is pushed to the array then it contains text but when looking at the array of objects afterward it's empty.

The index 5 that is marked should be the object being pushed in the array in the red rectangle.

How come?

The code

    const SplitHtml = () => {
  const string =
    '<p><strong>Add and edit text here. <a target="_blank" rel="noopener noreferrer" href="https://www.google.com">This is a link</a> Select text to format it.</strong></p><p>&nbsp;</p><p></p>'

  const stringArray = string.split(/(<[^>]+>)/)
  let textArray = []
  let object = {}

  for (let i = 0; i < string.length; i++) {
    console.log(i, object.text)
    if (stringArray[i] === undefined) break
    // Print out
    if (stringArray[i].startsWith("<") && object.text && object.text.length > 0) {
      console.log(i, " push")
      textArray = [...textArray, object]
    }
    // Elements
    else if (stringArray[i] === "<p>") {
      object.type = "text"
    } else if (stringArray[i] === "<h1>") {
      object.type = "headline"
      object.importance = "1"
    } else if (stringArray[i] === "<h2>") {
      object.type = "headline"
      object.importance = "2"
    } else if (stringArray[i] === "<h3>") {
      object.type = "headline"
      object.importance = "3"
    } else if (stringArray[i] === "<h4>") {
      object.type = "headline"
      object.importance = "4"
    } else if (stringArray[i] === "<h5>") {
      object.type = "headline"
      object.importance = "5"
    } else if (stringArray[i] === "<h6>") {
      object.type = "headline"
      object.importance = "6"
    } else if (stringArray[i].startsWith("<a")) {
      object.type = "link"
    }
    // Style
    else if (stringArray[i] === "<strong>") {
      object.bold = true
    } else if (stringArray[i] === "</strong>") {
      object.bold = false
    } else if (stringArray[i] === "<i>") {
      object.italic = true
    } else if (stringArray[i] === "</i>") {
      object.italic = false
    }
    // Text
    else if (!stringArray[i].startsWith("<")) {
      object.text = stringArray[i]
    }
  }
  console.log(textArray)
}

The screenshot

enter image description here


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

If you hover the info icon you will see this message: Value below was evaluate just now

What this means is that the console.log will render what the object value was by that time, but if you are mutating an object the value will change and when you open that object in the console it will reflect the current state.

See the following example:

enter image description here

The ref object is modified and when expanded it will show and match the current value.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...