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

就我而言，警报只是浏览器上的模型，用于向特定用户的操作提供信息反馈。因此，我认为需要使用对话框模型或表单来编辑memArray中的对象。

Answer 3

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)

有关此方法的深入解释，请参阅 this article。

要这样做，您需要将其移出全局范围。这是一个很好的发展纪律。作为第一步，您可以在全局范围内创建一个包含最新成员列表的对象：

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))
}

现在不会意外删除或改变成员数组，因此消除了 bug 表面积。

这就是 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 行代码）here。

JavaScript 发出警报提示和编辑数组？

JavaScript send out an alert to prompt and edit array?

javascript

arrays

prompt

function

object