Open serendipityApe opened 2 years ago
题目 实现 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(),需要支持如下调用
const arr = [1, 2, 3, 4] const newArr = update(arr, {$push: [5, 6]}) // [1, 2, 3, 4, 5, 6]
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 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]
> 答案
/**
明天更,今天忙着面试。。
如果你使用React,你肯定会遇到想要修改state的一部分的情况。
比如下面的state。
如果我们想要修改d来生成一个新的state,我们可以用 _.cloneDeep,但是这样没必要因为state.a并不需要被clone。
一个更好的办法是如下的浅拷贝
但是又有了新问题,如果我们同时需要修改c的话,我们需要写很复杂的代码,比如:
这显然还不如cloneDeep。
Immutability Helper 可以很好的解决这个问题。
请实现你自己的Immutability helper update(),需要支持如下调用
const newState = update( state, {a: {b: { c: {$set: 3}}}} ) / { a: { b: { c: 3 } }, d: 2 } /
const arr = [1, 2, 3, 4] const newArr = update( arr, {0: {$set: 0}} ) // [0, 2, 3, 4]
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 } /
const arr = [1, 2, 3, 4] const newArr = update(arr, {0: {$apply: (item) => item * 2}}) // [2, 2, 3, 4]
/**
} 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; }