zoukankan      html  css  js  c++  java
  • 为什么浮云身后留:JSON>JS

    0. 缘起

    令人蛋疼的需求,后台传来JSON形式的配置option,我前端需要先拿到这个,再在使用(修改图表配置)的时候转换为JS,等转换完毕再发送给后端原格式的option。就是JSON->JS->JSON,来一套九转返生。

    1. JSON兄弟会

    JSON.stringify(obj) -> JSON

    JSON.parse(JSON) -> JS

    深拷贝使用

    temp = JSON.parse(JSON.stringify(obj))

    2. 转换

        // JSON -> JS [OPTION EXCLUSIVE]
        transferOptions(row) {
          this.option = JSON.parse(JSON.stringify(row));
          let option = {};
          console.log("Bef this.option.options: ", this.option.options);
    
          this.option.options &&
            // key borderRadius | this.option.options[key] 2
            Object.keys(this.option.options).forEach((key) => {
              console.log(
                key,
                "this.option.options[key]: ",
                this.option.options[key]
              );
              if (this.option.options[key] === "") {
                option[key] = false;
              }
              option[key] =
                this.option.options[key] && this.option.options[key] !== false
                  ? JSON.parse(this.option.options[key])
                  : "";
            });
          this.option.options = JSON.parse(JSON.stringify(option));
    
          console.log("Aft this.option.options: ", this.option.options);
        },
    

    3.效果

    转换前
    image

    转换后
    image

    4. 诡异のBUG

    image
    image

    forEach后本该原Array随着Key改变而变,但这里的却不是。可能是深层次改变的原因,日后再探索。

    image

    REMEMBER, WHEN YOU NEED THE RETURN VALUE, USE [MAP]!!!

    5. 对象遍历

    map/forEach 数组方法

    for In 大部分用于对象

                    let form = this.$refs.chartOptionRefs.form;// (Object)
                    // [ Browswer DevTool Error ]
                    // form.options.map is not a function
                    // Because map is a array exclusive method!!!
                    // form.options = form.options.map((key) => {
                    //   return JSON.stringify(key);
                    // });
                    // [ Correct Useage ]
                    for (let key in form.options) {
                      console.log(" key: ", key);
                      form.options[key] = JSON.stringify(form.options[key]);
                    }
    

    image

    for of 不能遍历对象

    参考

    [关于map/forEach/for In/for Of](JS循环大总结, for, forEach,for in,for of, map区别 - 掘金 (juejin.cn))

  • 相关阅读:
    Redis安装测试
    linux 查看磁盘空间大小
    冷备份与热备份、双机热备与容错
    IDEA在编辑时提示could not autowire
    IntelliJ IDEA 快捷键和设置
    POI实现EXCEL单元格合并及边框样式
    metaq架构原理
    二叉树
    开启“树”之旅
    巧妙的邻接表(数组实现)
  • 原文地址:https://www.cnblogs.com/lepanyou/p/15633176.html
Copyright © 2011-2022 走看看