实现Immutability helper

题目实现 Immutability helper

例子

如果你使用React，你肯定会遇到想要修改state的一部分的情况。

比如下面的state。

const state = {
  a: {
    b: {
      c: 1
    }
  },
  d: 2
}

如果我们想要修改d来生成一个新的state，我们可以用 _.cloneDeep，但是这样没必要因为state.a并不需要被clone。

一个更好的办法是如下的浅拷贝

const newState = {
  ...state,
  d: 3
}

但是又有了新问题，如果我们同时需要修改c的话，我们需要写很复杂的代码，比如：

const newState = {
  ...state,
  a: {
    ...state.a,
    b: {
       ...state.b,
       c: 2
    }
  }
}

这显然还不如cloneDeep。

Immutability Helper 可以很好的解决这个问题。

请实现你自己的Immutability helper update()，需要支持如下调用

{$push: array} 添加元素到数组

const arr = [1, 2, 3, 4]
const newArr = update(arr, {$push: [5, 6]})
// [1, 2, 3, 4, 5, 6]

{$set: any} 修改目标


const state = {
a: {
b: {
  c: 1
}
},
d: 2
}

const newState = update( state, {a: {b: { c: {$set: 3}}}} ) / { a: { b: { c: 3 } }, d: 2 } /

注意我们可以通过$set来修改数组中的元素

const arr = [1, 2, 3, 4] const newArr = update( arr, {0: {$set: 0}} ) // [0, 2, 3, 4]

3. {$merge: object} 合并到目标object

const state = { a: { b: { c: 1 } }, d: 2 }

const newState = update( state, {a: {b: { $merge: {e: 5}}}} ) / { a: { b: { c: 1, e: 5 } }, d: 2 } /

4. {$apply: function} 自定义修改

const arr = [1, 2, 3, 4] const newArr = update(arr, {0: {$apply: (item) => item * 2}}) // [2, 2, 3, 4]


> 答案

/**

@param {any} data
@param {Object} command */ const orders=['$set','$merge','$push','$apply'] function update(data, command) { return dfs(data,command)
} function dfs(data,command,pdata,pkey){ //data: 当前层state //command 当前层command //pdata: 上一层state //pkey: 上一个key for(let key in command){ if(orders.indexOf(key) !== -1){ switch (key) { case '$push': if(!Array.isArray(data)){ throw Error('need a Array'); } data.push(...command[key]); break; case '$set': // if(!Array.isArray(command[key] || !typeof command[key] === 'object' || command[key] ===null)){ // throw Error('need a Array or Object') // } pdata[pkey]=command[key]; break; case '$merge': if(typeof data !== 'object'){ throw Error('need a Object') } pdata[pkey]= Object.assign(data,command[key]); console.log(pdata[pkey]) break; case '$apply': // if(!command[key] instanceof Function){ // throw Error('need a Function') // } pdata[pkey]=command[key].call(null,pdata[pkey]) break; } }else{ if(command[key]){ dfs(data[key],command[key],data,key) } } } console.log(data); return data; }

serendipityApe / javascriptPromotion