新增的文章会放在最下面（即新增的属性，放在对象的最后一位）

Question

createPost(state, newPost) {
  // 下面一行代码有bug：新增的文章会放在最下面（即新增的属性，放在对象的最后一位）
  // state.posts.data[newPost.data._id] = newPost.data

  // 解决方法1：将对象的最后一个属性，放在第一个位置
  const obj: { [key: string]: PostProps } = {}
  obj[newPost.data._id] = newPost.data
  state.posts.data = { ...obj, ...state.posts.data }

  // 解决方法2：先将对象转换为数组，再放进新增的元素，最后再转换为数组
  const arr: PostProps[] = objToArr(state.posts.data)
  arr.unshift(newPost.data)
  state.posts.data = arrToObj(arr) // 配合 helper.ts 文件的 arrToObj 函数的参数类型修改
},

老师你好。我感觉方法1比方法2好，老师有什么见解吗？
还有没有其它好的方法呢？

Answer 1

张轩 2021-06-27 09:21:26

同学你好 非常好的思考 这两种方法都可以 我觉得第一种方法更好一些，这个问题可以引申出另外一个知识点，就是假如你有排序需求的话（列表的排序），在这里我们可以引入另外一个辅助的数据结构，用来保存顺序，只保存 ID 即可，比如 ColumnsID: string[],里面存放的就是 Columns 的 id， ['1','2','3'] ，假如有排序，调换这个数组里面的顺序即可，这是flatten array 排序实现的一种常规做法。

• 提问者 风少_ #1

  非常感谢！

• 提问者 风少_ #2

  老师你好，还有个问题。
  1、之前讲到是将数组转换成带键值对的对象，但是对象存放的元素是无序的，那像这里如果考虑排序的话，是不是不应该转换成对象，用原来的数组就好了。
  2、听了优化这几节课，感觉好像都应该把数组转换成带键值对的对象，那哪些情况是要考虑转换，哪些情况又是不应该转换的

• 张轩 回复 提问者 风少_ #3

  只是多增加一个数据结构 就是一个数组 数组中只有 ID，没有其他的数据。这个数组只是为了数据排序存在的。

点开查看后面1条评论

Answer 2

张轩 2021-06-29 09:29:16

同学你好 我再回复一下 看你的回复好像没有理解我的意思。

假如再我们优化后的数据结构想添加排序功能的话，只需要多添加一个数组，它来处理排序的问题，比如

columns: { data: {}, currentPage: 0, sorts: ['id1', 'id2', 'id3'] },

原来的逻辑是不变的。

所以对于你最后的疑问：工作上，什么时候能用，答案是：即使是有顺序需求的场景，也没问题，都可以用。

这样就比较完美，又可以享受优化后的数据结构，又可以解决对象顺序的问题。可以参考 redux 中的一个文档来帮你理解：

https://redux.js.org/usage/structuring-reducers/normalizing-state-shape 看了它的例子你应该就明白啦。

• 提问者 风少_ #1

  焕然大悟，非常感激老师