從不同的方式讀取數組給我不同的結果

Question

我嘗試使用redux來存儲數據並使用全局狀態的數據。 問題是我不明白為什么第三個console.log（）無法正常工作。

const results = this.props.popMovies

/* work */ console.log(this.props.popMovies[0].title)

                                    for (var i = 0; i < this.props.popMovies.length; i++)
/* work */ console.log(this.props.popMovies[i].title);

/* dosen't work */ console.log(...results.title)

如果有人可以向我解釋原因，那么它會對我有所幫助。 謝謝。

Answer 1

因為results是一個array並且沒有任何title屬性title 。 所以你實際上在做

console.log(...undefined)

首先，您可以使用map()排列所有標題，然后將其傳遞到console.log

console.log(...results.map(x => x.title))

這是使用演示數組的演示。

 const result = [{title:"title1"},{title:"title2"},{title:"title3"}] console.log(...result.map(x => x.title)) 

Answer 2

這是因為訪問results數組的title屬性要優先於...results.title上的spread運算符，這基本上意味着上述代碼正在嘗試傳播不存在的results.title對象/數組。

嘗試以下方法：

result.forEach(item => console.log(item.title))

Answer 3

編寫console.log(...results.title)意味着您正在嘗試傳播result.title但是title作為result的屬性不存在，而是在result數組內的對象中

您需要先傳播標題，然后再傳播它們。 為此，您可以對地圖使用擴展語法

console.log(...results.map(item => item.title));