JavaScript 發出警報以提示和編輯數組？

Question

//global variable
var memArray  =[];

//object    
function member(id, password){

  this.id          = id; 
  this.pwd         = password
  }
  var memObj1=new member("m001","123");
  memArray.push(memObj1);

如何發出警報以提示和編輯推送到 memArray 的每個對象？

Answer 1

如果你想自定義它嘗試使用你自己的模式而不是 window.prompt 並且只顯示帶有可編輯文本字段的值，在提交時捕獲這些值並分別在數組中更改它們。

 var memArray = []; //object function member(id, password) { this.id = id; this.pwd = password } var memObj1 = new member("m001", "123"); var memObj2 = new member("m002", "123"); var memObj3 = new member("m031", "123"); memArray.push(memObj1); memArray.push(memObj2); memArray.push(memObj3); memArray.forEach((val, ind) => { memArray[ind] = JSON.parse(window.prompt("want to edit values?", JSON.stringify(memArray[ind]))); }); console.log(memArray)

Answer 2

Pavan 的回答很好，但要使其在自動化測試中可測試：

 // I would name these fields in your API // by making the constructor take an object. // Capitalise the name to signal that it can be newed function Member({id, password}) { this.id = id; this.pwd = password } // Name the array for what it is const members = [ new Member({id: "m001", password: "123"}), new Member({id: "m002", password: "123"}), new Member({id: "m031", password: "123"}) ] const editInBrowserFn = member => JSON.parse(window.prompt("want to edit values?", JSON.stringify(member))); const updateMembers = editFn => array => array.map(editFn) // To get an update const updatedMembers = updateMembers(editInBrowserFn)(members) console.log(updatedMembers) // You can now test it by making an testing editFn that doesn't need user interaction const testEditFn = m => new Member({id: m.id, password: 'test'}) const testMembers = updateMembers(testEditFn)(members) console.log(testMembers)

有關此方法的深入解釋，請參閱本文。

要這樣做，您需要將其從全局范圍中移除。 這是一個很好的發展紀律。 作為第一步，您可以在全局范圍內創建一個包含最新成員列表的對象：

const Members = (() => {
   let _members = []
   return {
      setMembers: members => _members = [...members],
      getMembers: () => [..._members]
   }
})()

現在更新成員的方式是這樣的：

const updateFn = updateMembers(editInBrowser)

function updatePasswords() {
   const members = Members.getMembers()
   Members.setMembers(updateFn(members))
}

現在沒有什么可以意外刪除或改變成員數組，從而消除錯誤表面區域。

這就是 React setState的設計方式。 它的靈感來自函數式編程思想和不變性。

您可能希望能夠只更新一名成員，因此：

const Members = (() => {
   let _members = []
   return {
      setMembers: members => _members = [...members],
      getMembers: () => [..._members],
      updateMember: updated => 
         this.members = _members.map(m =>
            m.id === updated.id ? updated : m)
   }
})()

現在你所有的數組變異都在一個地方，你只需要讓它在那里沒有錯誤。 否則，您的全局狀態會暴露出來，您必須修復與其相關的所有錯誤。 沒有這個，你所有的調用函數都負責正確管理應用程序的全局狀態。 復雜的。

將復雜性集中在一處。

我寫了一篇文章，並完全實現商店的（40行代碼）在這里。

Answer 3

就我而言，警報只是瀏覽器上的模型，用於向特定用戶提供有關其行為的信息反饋。 因此，我認為需要使用對話框模型或表單來編輯memArray的對象。