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.