js中如何优雅修改一个多层嵌套list对象的值

如何优雅更改一个N层嵌套对象属性的值

• 看下边的代码，要加工一个嵌套list的属性值，然后再赋值回去，大概只能这样写：

dp.data.treelist = dp.data.treelist.map(...)

• 由于对象嵌套比较深（有可能N层），每次赋值都需要重复这个嵌套过程（dp.data.treelis） 两次
• 而我们希望的是，调用和赋值，可以（至少看起来）一次完成
• 我们可以利用对象中的 this 指向（父级），减少引用对象层级，实现复用

var obj = {
  list:{
    data:[1,2,3],
    update:function(){
    //注意，this指向父级，而不是最外层对象
      this.data = this.data.map(function(x){
        return x * x;
      })
    }
  }
}
obj.list.update()
console.log(obj);//{ "list": { "data": [ 1, 4, 9 ] } }

• 上边的方法有两个副作用
• 一是，在纯数据对象中，塞入了 update 这个操作方法
• 二是，同时，update 方法也无法在其它对象中使用
• 所以，我们可以把这种模式的对象抽象出来，做为一个公共的类

//假设有一个List类，接收一个list的核心属性，其它传入的属性也通过 others 自动添加
function List(list,others){
  this.list = list;
  for(key in others){
    this[key] = others[key];
  }
}
//支持简单赋值
List.prototype.setList = function(newList){
  this.list = newList;
}
//支持map赋值，赋值的方法可以添加很多种，最好使用参数多态，而不是合为一个方法
List.prototype.mapSetList = function(fn){
  this.list = this.list.map(fn);
}
//obj.data属性值就是一个 List 对象，该对象也支持继续嵌套，还是比较直观的
var obj = {
  data:new List([1,2,3,4,5],{
    count:100,
    code:2,
    user:{
      name:"zk"
    }
  })
}

obj.data.setList([5,6,7,8,9]);
obj.data.mapSetList(x=>x*x);
console.log(obj);
//{ "data": { "list": [ 25, 36, 49, 64, 81 ], "count": 100, "code": 2, "user": { "name": "zk" } } }

• 如此一来，我们就拥有了一个功能丰富且可扩展的 List 对象
• 这使得嵌套层级较深的 list 类的属性赋值变得更加简洁明了，更符合函数式编程的习惯
• 而且 list 实例的方法继续自类的原型，在数据对象中不会被显式的遍历，保证了数据的纯洁性