开发者社区> 问答> 正文

JavaScript中使用多层级的对象属性有什么比较优雅的方式?

比如有对象:

var a = {
        b:{
            c:{
                d:{
                }
            }
        }
    }

使用的时候比如
var param = a.b.c.d;
但是一旦其中c或者d不存在就会报错。
一般的方式是逐层检查,但是代码很不优雅。
有什么更好的方式呢?

展开
收起
管理贝贝 2016-02-05 11:11:52 2820 0
1 条回答
写回答
取消 提交回答
  • 静静的看着你们

    确定合理的数据结构

    如果服务端给你的是像你描述的那样多层的数据结构,先问他一句:“非得这样吗?”
    开发之前沟通充分,确定合理的数据结构,对于提高效率有事半功倍的作用。

    不怕层级多,只要层级分明

    在现实应用中,不能保证永远都能拿到“舒服”的数据结构,所以前端代码上也要想办法处理。以下是一些建议,供参考。

    1. 不要频繁地跨层操作数据。
      首先应该尽量避免用 a.b.c 这种方式访问对象的属性,这样的方式有这样几个缺点:

    最最主要的缺点:过多的使用这种方式会导致代码的混乱。因为 JavaScript 里对象的属性大多是可以“随时随地”读写的,所以在对属性进行赋值操作时,应该格外慎重。稍有不慎,很可能会出现在一处修改了某属性的值,导致“很远”的另一处使用到了这个属性的代码出错。一旦这样的代码体积庞大起来,维护的难度就蹭蹭蹭像火箭一样往上升。
    性能问题:每次访问 a.b.c 时,引擎都要先检查这几件事:a 是否存在 => a 是否对象 => a.b 是否存在 => a.b 是否对象 => a.b.c 是否存在,如果以上都为真,才会对 a.b.c 进行操作。尽管以现在的计算机的计算能力,这带来的性能损失可能并不明显,但毕竟是对计算资源的浪费。建议的做法是在闭包内为 a.b 创建引用,然后通过引用来访问 a.b.c

    1. 为每一层数据设置专门的处理方法。
      利用 JavaScript 面向对象的特性来编程,专门设置一个方法来处理对象的某个属性,确保其他地方在访问这个属性时,它的值一定符合某个约定的格式。

    下面是一个简单的示例:
    http://jsbin.com/lipeguvese/3/edit?js,console
    直接把代码贴下面,方便大家批评修改:

    var Factory = function(data){
      this.initialize(data);
    };
    Factory.prototype = {
      initialize: function(data){
        this.data = data;
        this.setup();
      },
      setup: function(){
        var data = this.data,
            a = data.a,
            d = data.d,
            e = data.e;
        // 把 data.a 属性交给 handleA 处理
        this.handleA(data.a);
        // 对 data 的其他属性的处理
        d.push(4);
        d = d.slice(1);
        e = e.toUpperCase();
        data.e = e;
      },
      handleA: function(a){
        // 把 a.b 交给 handleB 处理
        this.handleB(a.b);
        // 对 a 的其他属性的处理
        // ...
      },
      handleB: function(b){
        // 把 b.c 交给 handleC 处理
        this.handleC(b.c);
        // 对 b 的其他属性的处理
        // ...
      },
      handleC: function(c){
        data.c = c + 100;
      },
      output: function(){
        console.log(this.data);
      }
    };
    
    // 假设约定的数据格式如下
    var data = {
      a: {
        b: {
          c: 111
        }
      },
      d: [1,2,3],
      e: 'string property value'
    };
    
    // 处理数据
    var f = new Factory(data);
    f.output();
    2019-07-17 18:28:07
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载