Por que aparece isso se eu colocar um 'console.log(estatistica)'?

<div class="estatistica"> <p class="estatistica-titulo">Força</p> <div class="estatistica-valor"> <p class="estatistica-numero" data-estatistica="forca">0</p> </div> </div>

Olá Yuri, tudo bem?

Isso ocorre devido ao buscador que você está utilizando, que é o querySelectorAll.

Por padrão, ele irá retornar uma lista de elementos presentes no documento que possuem aquele seletor.

Portanto, para este caso ele nos informa que essa lista tem um tamanho 4 e indica a posição de cada elemento, caso queira saber mais sobre isso eu recomendo esse curso sobre array.

Tanto, que se eu quiser acessar o elemento da primeira posição dessa lista eu usaria:

console.log(estatistica[0])

E teria o retorno p.estatistica-numero , ou seja, o navegador continua me trazendo o elemento HTML que é um parágrafo e tem a classe estatistica-numero.

Como então acessar o valor do data- desse elemento?

Utiliza-se o dataset! Assim conseguimos entrar no elemento HTML e acessar o valor do conteúdo de texto do seu data-.

Acessando o valor do data- de uma única posição do array

console.log(estatistica[0].dataset)

Acessando o valor do data- de todas as posições do array

estatistica.forEach((item) => {
    console.log(item.dataset)
})

Espero ter ajudado, em caso de dúvidas ou dificuldades estou por aqui! Abraços e bons estudos =)