未捕获的TypeError:notes.filter不是函数

所以我正在学习,练习Javascript和DOM。当我运行此注释编辑器应用程序时,出现的唯一问题是重构代码中的过滤器功能。我试图找到解决方案,但似乎仍然无法正常工作。谁能建议我如何解决这种未捕获的错误?

Index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    
    <h1>Notes App</h1>
    <h2>Take notes and never forget</h2>
    <input id ='search-text' type ='text' placeholder = 'Filter notes'>
        <select id ='filter-by'>
            <option value='byEdited'>Sort by last edited</option>
            <option value='byCreated'>Sort by recently created</option>
            <option value='alphabetical'>Sort alphabetically</option> 
            </option>
        </select>
 <div id='notes'></div>
<button id="create-note">Create Note</button>
    <script src="https://unpkg.com/uuid@latest/dist/umd/uuidv4.min.js"></script>
    <script src='notes-function.js'></script>
    <script src='notes-app.js'></script>
</body>
</html>

javascript主文件-​​notes-app.js

const notes = getSavedNotes()

const filters = {
  searchText: ''
}
renderNotes(notes, filters)

document.querySelector('#create-note').addEventListener('click', function(e) {
  const id = uuidv4()
  notes.push({
    id: id,
    title: '',
    body: ''

  })
  savedNotes(notes)
  //ocalStorage.setItem('notes', JSON.stringify(notes))
  //renderNotes(notes, filters)
  location.assign(`/notes-app/edit.html#${id}`)

})

document.querySelector('#search-text').addEventListener('input', function(e) {
  filters.searchText = e.target.value;
  renderNotes(notes, filters)
})

document.querySelector('#filter-by').addEventListener('change', function(e) {
  console.log(e.target.value)
})

重构的JavaScript代码

//Read existing notes from LocalStorage
const getSavedNotes = function() {
  const notesJson = localStorage.getItem('notes')

  if (notesJson !== null) {
    return JSON.parse(notesJson)
  } else {
    return []
  }
}

//Save notes to Local Storage
const savedNotes = function(notes) {
  localStorage.setItem('notes', JSON.stringify(notes))
}

//remove a note from the list
const removeNote = function(id) {
  const noteIndex = notes.findIndex(function(note) {
    return note.id === id
  })
  if (noteIndex > -1) {
    notes.splice(noteIndex, 1)
  }

}
//Generate DOM structure for the Note
const generateNoteDOM = function(note) {
  const noteEI = document.createElement('div')
  const textEI = document.createElement('a')
  // textEI.title = 'the link'
  // textEI.href  = '/notes-app/edit.html'
  const button = document.createElement('button')

  //Setup the remove note button
  button.textContent = 'x'
  noteEI.appendChild(button)
  button.addEventListener('click', function() {
    removeNote(note.id)
    savedNotes(notes)
    renderNotes(notes, filters)

  })

  //Setup the note title text
  if (note.title.length > 0) {
    textEI.textContent = note.title
  } else {
    textEI.textContent = 'Unamed note'
    // document.querySelector('#notes').appendChild(noteEI)
  }
  textEI.setAttribute('href', `/notes-app/edit.html#${note.id}`)
  noteEI.appendChild(textEI)
  //put the element near another element
  return noteEI

}


//Render application Notes
const renderNotes = function(notes, filters) {
  const filterNotes = notes.filter(function(note) {
    return note.title.toLowerCase().includes(filters.searchText.toLowerCase())
  })
  //clear element
  document.querySelector('#notes').innerHTML = ''

  filterNotes.forEach(function(note) {

    const noteEI = generateNoteDOM(note)
    document.querySelector('#notes').appendChild(noteEI)
  })
}

编辑HTML档案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    
    <!-- <a href="/notes-app/index.html">My text for the link</a> -->
    <input id = 'note-title' placeholder = 'Note title'>
    <textarea id='note-body' placeholder="Enter note text"></textarea>
    <button id ='remove-note'>Remove note</button>
    <script src = 'notes-function.js'></script>
    <script src ='note-edit.js'></script>
</body>
</html>

note-edit.js文件

const titleElement = document.querySelector('#note-title')
const bodyElement = document.querySelector('#note-body')
const removeElement = document.querySelector('#remove-note')
const noteId = location.hash.substring(1) //fromt first to the last
const notes = getSavedNotes()
const note = notes.find(function(note){
  return note.id === noteId
})

if(note === undefined){
  location.assign('/notes-app/index.html')
}
titleElement.value = note.title
bodyElement.value = note.body
 

bodyElement.addEventListener('input', function(e) {
  note.body = e.target.value //its updated the note object
  savedNotes(notes)
})

// document.querySelector('#note-body').value = note.body
titleElement.addEventListener('input', function(e){
  note.title = e.target.value
  savedNotes(notes)
})

//remove note
removeElement.addEventListener('click', function(e){
  removeNote(note.id)
  savedNotes(note)
  location.assign('/notes-app/index.html')
})