記一次遞歸在我項目中所發(fā)揮的作用

n7then 發(fā)布于2019-05-23 11:57 / 3364人閱讀

作者：陳大魚頭

github： KRISACHAN

背景

在最近的項目中，有這么一個功能點，就是要獲取在WEB IDE里用戶所寫的注釋中的一段特殊規(guī)則，然后解析成一段JS config 對象
例如：

//% width="100px" height="200px"
//% pos.top="50px" pos.left="50px"
//% writable=true
//% q.b.d.w.r.f=30 q.b.d.w.r.a=40

要轉(zhuǎn)成

{
    width: "100px",
    height: "200px",
    pos: {
        top: "50px",
        left: "50px"
    },
    writable: true,
    q: {
        b: {
            d: {
                w: {
                    r: {
                        f: 30,
                        a: 40
                    }
                }
            }
        }
    }
}

類似的規(guī)則

什么是遞歸

來自百度的解釋：
遞歸：程序調(diào)用自身的編程技巧稱為遞歸 (recursion)
尾遞歸：如果一個函數(shù)中所有遞歸形式的調(diào)用都出現(xiàn)在函數(shù)的末尾，我們稱這個遞歸函數(shù)是尾遞歸的。

就是 復(fù)讀機

遞歸怎么寫？

一般

const fibonacci = num => (num === 1 ");

尾遞歸

const fibonacci = (num, total = 1) => (num === 0 ");

Array.reduce

const getArray = count => Array.from({ length: count }, (value, key) => key)
const fibonacci = num => getArray(num).reduceRight((accumulator, currentValue) => accumulator * currentValue)

功能實現(xiàn) 分步實現(xiàn)

過濾常規(guī)內(nèi)容，獲取特殊的備注信息，去除空格，并且轉(zhuǎn)成數(shù)組

此時的數(shù)組內(nèi)容為

[
    "http://% blockId="sloth_servo_write"  block="set servo %channel|degree %degree"",
    "http://% advanced=true",
    "http://% weight=50",
    "http://% degree.min=0 degree.max=180",
    "http://% channel.fieldEditor="gridpicker" channel.fieldOptions.columns=4",
    "http://% a.b.c.d=20 a.b.c.e=222",
    "http://% q.b.d.w.r.f=30 q.b.d.w.r.a=40"
]

const code = `
//% width="100px" height="200px"
//% pos.top="50px" pos.left="50px"
//% writable=true
//% q.b.d.w.r.f=30 q.b.d.w.r.a=40`
// 獲取特殊注釋數(shù)組
const annotation_array_filter = annotation_item => annotation_item.indexOf("http://%") >= 0;
// 去除特殊注釋前后的空格
const annotation_array_remove_space = annotation_item => annotation_item.trim();
const annotation_array = code.split("
")
                             .filter(annotation_array_filter)
                             .map(annotation_array_remove_space)

遍歷特殊規(guī)則數(shù)組，把每一項配置都壓入一個新對象

此時的新對象內(nèi)內(nèi)容為

{
    a.b.c.d: 20,
    a.b.c.e: 222,
    advanced: true,
    block: "set servo %channel|degree %degree",
    blockId: "sloth_servo_write",
    channel.fieldEditor: "gridpicker",
    channel.fieldOptions.columns: 4,
    degree.max: 180,
    degree.min: 0,
    q.b.d.w.r.a: 40,
    q.b.d.w.r.f: 30,
    weight: 50,
}

      const annotation_array_loop = annotation_item => {
        // 把注釋中的每一項配置轉(zhuǎn)成對象
        const result_forEach = result_item => {
          let annotation_sub_object = {};
          // 如果特殊注釋數(shù)組中的每一項包含多個配置，則扁平化
          const array_flattened = data => {
            const is_array = (this.type(data) === "[object Array]");
            const object_recursion = () => {
              const [key, value] = data.split("=");
              const annotation_sub_object = {};
              try {
                annotation_sub_object[key] = JSON.parse(value);
              } catch (error) {
                annotation_sub_object[key] = JSON.parse(value + """)
              };
              annotation_object = {
                ...annotation_object,
                ...annotation_sub_object
              };
            };
            // 判斷注釋數(shù)組項中每一個元素是否有多個配置，如果有則遞歸，否則則注入對象
            is_array ");" ") : result_item);
        const result = annotation_item.replace("http://% ", "")
                                      .split("/" /g")
                                      .map(result_map);
        result_forEach(result);
      };
      let annotation_object = {}; // 承載每一個配置的對象
      annotation_array.forEach(annotation_array_loop);

把數(shù)組里的元素轉(zhuǎn)成對象

此時數(shù)組內(nèi)容為

[
    {
        blockId: "sloth_servo_write"
    },
    {
        advanced: true
    },
    ...
]

      let main_array = []; // 承載每一個配置的數(shù)組
      const annotation_object_keys = Object.keys(annotation_object); // 獲取扁平化后的注釋對象的key
      const annotation_object_keys_loop = annotation_object_key => { // 循環(huán)變量每一項注釋
        const annotation_object_key_array = annotation_object_key.split("."); // 把多級對象轉(zhuǎn)成數(shù)組
        const annotation_object_value = annotation_object[annotation_object_key]; // 獲取每一項元素的值
        let sub_object = {}; // 暫時承載配置對象的對象
        const key_reduce = (accumulator, current_value, current_index, array) => { // key值遞歸，對每一項配置進行合并
          if (current_index === 0) { // 如果當(dāng)前遍歷的元素為第一項，也就是說為配置的頂級對象，所以直接壓入對象，并且輸出
            sub_object[current_value] = (current_index === array.length - 1 ");return sub_object[current_value];
          }
          accumulator[current_value] = {}; // 如果當(dāng)前遍歷的元素不為第一項，則當(dāng)前對象元素變?yōu)閷ο?          if (current_index === array.length - 1) { // 如果當(dāng)前遍歷的元素為數(shù)組最后一項，說明是配置對象最底的元素，可以直接賦值
            accumulator[current_value] = annotation_object_value;
          }
          return accumulator[current_value];
        };
        let level_object = annotation_object_key_array.reduce(key_reduce, annotation_object_key_array[0]);
        level_object = undefined; // 清空level_object
        main_array.push(sub_object);
        sub_object = undefined; // 清空sub_object
      }
      annotation_object_keys.forEach(annotation_object_keys_loop);

遞歸合并對象

此時的對象為

{
    a: {b: {…}},
    advanced: true,
    block: "set servo %channel|degree %degree",
    blockId: "sloth_servo_write",
    channel: {fieldEditor: "gridpicker", fieldOptions: {…}},
    degree: {min: 0, max: 180},
    q: {b: {…}},
    weight: 50
}

      const annotation_tree = {};
      const tree_data = (key, value, object) => { // 遞歸合并對象
        if (this.type(value) !== "[object Object]") { // 如果當(dāng)前傳入元素為對象，則直接壓入對象中
          object[key] = value;
        } else { // 否則繼續(xù)遞歸
          if (!object[key]) {
            object[key] = {};
          };
          for (let item in value) {
            tree_data(item, value[item], object[key]);
          }
        };
      };
      const main_array_forEach = item => { // 循環(huán)遍歷配置數(shù)組
        const key = Object.keys(item)[0];
        const value = Object.values(item)[0];
        tree_data(key, value, annotation_tree);
      };
      main_array.forEach(main_array_forEach);
      main_array = undefined; // 清空main_array

完整代碼

// 代碼轉(zhuǎn)換器
((wid, dcm) => {
  "use strict";
  const win = wid;
  const doc = dcm;

  // 基礎(chǔ)信息
  const base_info = {
    "version": "0.0.1",
    "author": "kris",
  };

  // 輸出的函數(shù)
  const funcs = {
    annotation_parser (annotation) {
      // 配置樹初始化
      this.annotation_tree = {};
      // 獲取特殊注釋數(shù)組
      const annotation_array_filter = annotation_item => annotation_item.indexOf("http://%") >= 0;
      // 去除特殊注釋前后的空格
      const annotation_array_remove_space = annotation_item => annotation_item.trim();
      // 循環(huán)遍歷特殊注釋數(shù)組
      const annotation_array_loop = annotation_item => {
        // 把注釋中的每一項配置轉(zhuǎn)成對象
        const result_forEach = result_item => {
          let annotation_sub_object = {};
          // 如果特殊注釋數(shù)組中的每一項包含多個配置，則扁平化
          const array_flattened = data => {
            const is_array = (this.type(data) === "[object Array]");
            const object_recursion = () => {
              const [key, value] = data.split("=");
              const annotation_sub_object = {};
              try {
                annotation_sub_object[key] = JSON.parse(value);
              } catch (error) {
                annotation_sub_object[key] = JSON.parse(value + """)
              };
              annotation_object = {
                ...annotation_object,
                ...annotation_sub_object
              };
            };
            // 判斷注釋數(shù)組項中每一個元素是否有多個配置，如果有則遞歸，否則則注入對象
            is_array ");" ") : result_item);
        const result = annotation_item.replace("http://% ", "")
                                      .split("/" /g")
                                      .map(result_map);
        result_forEach(result);
      };
      let annotation_object = {}; // 承載每一個配置的對象
      annotation.filter(annotation_array_filter)
                .map(annotation_array_remove_space)
                .forEach(annotation_array_loop);
      let main_array = []; // 承載每一個配置的數(shù)組
      const annotation_object_keys = Object.keys(annotation_object); // 獲取扁平化后的注釋對象的key
      const annotation_object_keys_loop = annotation_object_key => { // 循環(huán)變量每一項注釋
        const annotation_object_key_array = annotation_object_key.split("."); // 把多級對象轉(zhuǎn)成數(shù)組
        const annotation_object_value = annotation_object[annotation_object_key]; // 獲取每一項元素的值
        let sub_object = {}; // 暫時承載配置對象的對象
        const key_reduce = (accumulator, current_value, current_index, array) => { // key值遞歸，對每一項配置進行合并
          if (current_index === 0) { // 如果當(dāng)前遍歷的元素為第一項，也就是說為配置的頂級對象，所以直接壓入對象，并且輸出
            sub_object[current_value] = (current_index === array.length - 1 ");return sub_object[current_value];
          }
          accumulator[current_value] = {}; // 如果當(dāng)前遍歷的元素不為第一項，則當(dāng)前對象元素變?yōu)閷ο?          if (current_index === array.length - 1) { // 如果當(dāng)前遍歷的元素為數(shù)組最后一項，說明是配置對象最底的元素，可以直接賦值
            accumulator[current_value] = annotation_object_value;
          }
          return accumulator[current_value];
        };
        let level_object = annotation_object_key_array.reduce(key_reduce, annotation_object_key_array[0]);
        level_object = undefined; // 清空level_object
        main_array.push(sub_object);
        sub_object = undefined; // 清空sub_object
      }
      annotation_object_keys.forEach(annotation_object_keys_loop);
      const tree_data = (key, value, object) => { // 遞歸合并對象
        if (this.type(value) !== "[object Object]") { // 如果當(dāng)前傳入元素為對象，則直接壓入對象中
          object[key] = value;
        } else { // 否則繼續(xù)遞歸
          if (!object[key]) {
            object[key] = {};
          };
          for (let item in value) {
            tree_data(item, value[item], object[key]);
          }
        };
      };
      const main_array_forEach = item => { // 循環(huán)遍歷配置數(shù)組
        const key = Object.keys(item)[0];
        const value = Object.values(item)[0];
        tree_data(key, value, this.annotation_tree);
      };
      main_array.forEach(main_array_forEach);
      main_array = undefined; // 清空main_array
    },
  };
  // 引用的資源
  const libs = {};
  // 工具函數(shù)
  const tools = {
    // 獲取元素類型
    type (object) {
      return Object.prototype.toString.call(object);
    },
    // 分離傳入的代碼跟配置
    separate_code_and_config (data) {
      data.split("
")
          .forEach(item => {
        item.indexOf("http://%") >= 0 ");return this || (0, eval)("this");
  })();
  if (typeof module !== "undefined" && module.exports) {
    module.exports = code_transformer;
  } else if (typeof define === "function" && define.amd) {
    define([], function () {
      return code_transformer;
    });
  } else {
    !("code_transformer" in _global) && (_global.code_transformer = code_transformer);
  };
})(window, document);

備注：函數(shù)體積好大呀，但這只是業(yè)務(wù)里的一個小小小功能，流下了不會優(yōu)化代碼的淚水~

如果你、喜歡探討技術(shù)，或者對本文有任何的意見或建議，你可以掃描下方二維碼，關(guān)注微信公眾號“魚頭的Web海洋”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。

云服務(wù)器 GPU云服務(wù)器記一次在阿里云搭建服務(wù)器記一次阿里云服務(wù)器集體中毒大數(shù)據(jù)如何在執(zhí)法作用中發(fā)揮作用充分發(fā)揮

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/6931.html

發(fā)表評論

登陸后可評論

0條評論

n7then

男|高級講師

我要關(guān)注我要私信

TA的文章

jsp代碼實例第105課

閱讀 3330·2021-11-23 09:51
OneTechCloud：雙11鉅惠正式開啟！日本CN2上新，全場季付8折，充值余額多送10%

閱讀 2459·2021-11-09 09:46
Css Sprite(雪碧圖、精靈圖)<圖像拼合技術(shù)>

閱讀 1493·2019-08-30 15:54
HTML,CSS,JavaScript的思維導(dǎo)圖

閱讀 3140·2019-08-30 14:22
2017-05-28 前端日報

閱讀 2919·2019-08-29 12:40
Javascript克隆對象

閱讀 1644·2019-08-26 10:33
終于搞懂這些的區(qū)別了 clientX、offsetX、screenX、pageX

閱讀 1789·2019-08-23 17:09
es6刪除數(shù)組元素或者對象元素

閱讀 1565·2019-08-23 16:11

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

記一次遞歸在我項目中所發(fā)揮的作用

相關(guān)文章

記一次翻譯站經(jīng)歷

記一次XX前端面試

記一次 webpack 打包體積優(yōu)化

記一次Docker構(gòu)建失敗

發(fā)表評論

0條評論

n7then

男|高級講師

TA的文章

jsp代碼實例第105課

OneTechCloud：雙11鉅惠正式開啟！日本CN2上新，全場季付8折，充值余額多送10%

Css Sprite(雪碧圖、精靈圖)<圖像拼合技術(shù)>

HTML,CSS,JavaScript的思維導(dǎo)圖

2017-05-28 前端日報

Javascript克隆對象

終于搞懂這些的區(qū)別了 clientX、offsetX、screenX、pageX

es6刪除數(shù)組元素或者對象元素

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

記一次遞歸在我項目中所發(fā)揮的作用

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！