javascript - 如何在javascript中覆盖多维数组中的数据？

Question

我得到一个多维数组，其中每个数组都是所有用户信息(由用户输入)的组合

我希望用户能够修改他的信息，例如他的姓名或电话号码，以便用户下次登录时显示他的新信息。

userList 保存在 JSON 中，想法是从那里保存和加载更改。

示例:

如果我的数组有

    userList= JSON.parse(localStorage.getItem('userListLS')
     if(userList == null) {
userList =

      [
       ['Isaac', 'Garth', 'IsaacG11@email.com', 'Mazda']
       ['Matthew', 'Miller', 'mmiller21@mail.com', 'Volvo']
      ]
}

假设 Isaac 已登录，他希望将自己的名字更改为 Gabriel，并将电子邮件更改为 IsaacG21@email.com，这样新数组将是:

userList= [
       ['Gabriel', 'Garth', 'IsaacG21@email.com', 'Mazda']
       ['Matthew', 'Miller', 'mmiller21@mail.com', 'Volvo']
      ]

如何实现这一点？

请仅使用 JS 和 HTML。

Answer 1

最简单的方法是使用索引选择器直接修改数据:

This approach mutates the initial array instead of returning a new reference, which can lead to unwanted side effects.

function modifyData(data, userId, fieldId, newData) {
   if(data[userId] && data[userId][fieldId]) {
      data[userId][fieldId] = newData;
   }
   return data;
}

// example
var userList= [
  ['Isaac', 'Garth', 'IsaacG11@email.com', 'Mazda'],
  ['Matthew', 'Miller', 'mmiller21@mail.com', 'Volvo']
];
const FIELD_NAME_ID = 0;
const USER_ID = 0;

var modified = modifyData(userList, USER_ID, FIELD_NAME_ID, 'Morty')

console.log('initial', userList);
console.log('modified', modified);

一个不可变的方法是:

function modifyData(data, userId, fieldId, newData) {
   if(data && data[userId] && data[userId][fieldId]) {
      var _data = data.slice();
      var _user = data[userId].slice();
      _user[fieldId] = newData;
      _data[userId] = _user;
      return _data;
   }
   return data;
}

// example
var userList= [
  ['Isaac', 'Garth', 'IsaacG11@email.com', 'Mazda'],
  ['Matthew', 'Miller', 'mmiller21@mail.com', 'Volvo']
];
const FIELD_NAME_ID = 0;
const USER_ID = 0;



var modified = modifyData(userList, USER_ID, FIELD_NAME_ID, 'Morty');

console.log('initial', userList);
console.log('modified', modified);

但是您应该考虑将结构更改为对象字典:

{
 user1: { name: 'Isaac', lastName: 'Garth' /* ... */ }
 // ...
}

或者一个对象数组(但是你必须在数组中找到正确的用户:

[
 { name: 'Isaac', lastName: 'Garth' /* ... */ }
 // ...
]