ES6扩展运算符...进行的数组删除

今天写了按照React小书写了Reducer，发现基础真是太重要了，所有关于上层建筑的细节都需要回到下层细节中去寻找，而且现在的基础也由ES3变成了ES6了。

const ADD_USER = "ADD_USER"
const DELETE_USER = "DELETE_USER"
const UPDATE_USER = "UPDATE_USER"

const usersReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_USER:
      return [...state, action.user]
    case DELETE_USER:
      return [...state.slice(0, action.index), ...state.slice(action.index + 1)]
    case UPDATE_USER:
      return {
        ...state, user: state.map((item, index) => {
          if (index == action.index) {
            return action.user
          }
        })
      }
    default:
      return state
  }
}

通过上面这种扩展运算符的方式，可以将 数组里面的值展开。

也许我们还需要知道，ES6中的扩展运算符是不支持对象扩展的，不过 ES7 是支持的

利用扩展运算符我们能够很好地简化我们的代码，比如 上方就是 Object.assign 的一种简化(环境需要支持ES7)

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
console.log(Object.assign({}, obj1, obj2)); // way1
console.log({...obj1, ...obj2});            // way2

以上代码的执行结果是相同的。但我们要知道如果写 Object.assign(obj1, obj2)与上两者有些不同。

如果只是想要和合并出一个新的对象请采用 way1 和 way2，如果是合并一个老对象用上面这句话。

---

在 Redux 中，推荐这种删除方式。

const deleteNumber = (arr, index) => {
  return [...arr.slice(0, index), ...arr.slice(index + 1)];
};
let testArr = [1, 2, 3, 4, 5];
console.log(deleteNumber(testArr, 4)); // [1, 2, 3, 4]

需要注意的是slice是返回一个新数组，确切地说是新的子数组，不会改变原来的数组。

---

complete.