尝试遍历对象数组，并创建一个新属性，该属性包含来自该句子的 text 属性的单词数组答案

【问题标题】：Trying to iterate over an array of objects, and create a new property that contains an array of words from that sentence's text property尝试遍历对象数组，并创建一个新属性，该属性包含来自该句子的 text 属性的单词数组
【发布时间】：2021-12-09 23:36:41
【问题描述】：

我的状态包含以下属性：

sentences: [
    {
        text: "Go away and hide behind that door where we found you just now.",
        grade: 606
    },
    {
        text: "Please don't let anyone spoil these nice fresh flowers.",
        grade: 609
    },
]

现在我正在尝试迭代句子，在每个句子上创建一个名为 words 的新属性，这将是一个单词数组。当我 console.log(this.sentences) 时，我看到了新属性，但是当我尝试在 DOM 中呈现该属性时，它没有显示新属性。

    mounted(){
        this.sentences.map((sentence) => {
            const arrayOfWords = sentence.text.split(' ');
            sentence.words = arrayOfWords
        })
        console.log(this.sentences)
    }

【问题讨论】：

你需要let words = this.sentences.map(...)
@mplungjan 为什么将它存储在变量中会改变什么？我只是想改变原始数组。
Array.map() 返回一个新数组。您需要将其存储在this.sentences
但是为什么 console.log(this.sentences) 显示我已经对其进行了变异并添加了单词数组？

标签： javascript vue.js vuejs2

【解决方案1】：

Array#map 返回：

一个新数组，每个元素都是回调函数的结果。

另外，您需要添加在每次迭代中计算的值：

为 arr 的每个元素调用的函数。每次callbackFn执行时，返回的值都会添加到newArray中。

因此，要获取更新版本，您需要将其分配给this.sentences：

new Vue({
  el: "#app",
  data: () => ({
    sentences: [
      { text: "Go away and hide behind that door where we found you just now.", grade: 606 },
      { text: "Please don't let anyone spoil these nice fresh flowers.", grade: 609 }
    ]
  }),
  mounted(){
    this.sentences = this.sentences.map(sentence => {
      const arrayOfWords = sentence.text.split(' ');
      sentence.words = arrayOfWords
      return sentence;
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(sentence, i) in sentences" :key="i">{{sentence.words}}</div>
</div>

更好的方法是创建一个computed property 来返回包含单词的句子列表：

new Vue({
  el: "#app",
  data: () => ({
    sentences: [
      { text: "Go away and hide behind that door where we found you just now.", grade: 606 },
      { text: "Please don't let anyone spoil these nice fresh flowers.", grade: 609 }
    ]
  }),
  computed: {
    sentencesWithWords: function() {
      return this.sentences.map(sentence => {
        const arrayOfWords = sentence.text.split(' ');
        sentence.words = arrayOfWords
        return sentence;
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(sentence, i) in sentencesWithWords" :key="i">{{sentence.words}}</div>
</div>

【讨论】：

计算属性有效，但我不知道为什么将新数组分配给 this.sentences 不会反映在我的 dom 中。 console.log(this.sentences) 显示了正确的东西，但是当我尝试在 dom 中渲染它们时，我看到了旧数组
@Bobimaru 如果您需要更多帮助，您可以分享演示链接或更新问题，因为我需要检查您如何渲染数组。尝试将您的代码与上面的代码进行比较，但我建议使用计算属性，特别是如果添加 words 仅用于 UI 目的

【解决方案2】：

Array.map() 不会改变原始数组。它返回一个新数组。您需要将其存储在this.sentences 中。或者使用forEach()对原数组进行变异：

mounted(){
    this.sentences.forEach(sentence => {
         const arrayOfWords = sentence.text.split(' ');
         sentence.words = arrayOfWords
    })
    console.log(this.sentences)
}

或

mounted(){
    this.sentences = this.sentences.map(sentence => {
         sentence.words = sentence.text.split(' ');
         return sentence
    })
    console.log(this.sentences)
}

【讨论】：