低代码导出前端代码遇到一些字符串和数据处理记录

概要

最近在做纯前端低代码导出代码功能，遇到的一些字符串和数据对象处理方法总结记录

1.删除对象转字符串所有key的双引号

 //str:JSON.stringify后的字符串
   function rmKeyDouquoMarks(str) {
      return str.replace(
        /("(\\[^]|[^\\"])*"(?!\s*:))|"((\\[^]|[^\\"])*)"(?=\s*:)/g,
        "$1$3"
      );
    }

2.删除对象转字符串某个key对应的value的双引号

删除第一个：

   //key:值对应的key，str:JSON.stringify后的字符串
   function rmValueDouquoMarks(str, key ) {
      if (str.split(`${key}:"`).length > 1) {
        let newStr = '"' + str.split(`${key}:"`)[1];
        let target = newStr.substring(0, newStr.indexOf('"', 1) + 1);
        str =
          target.length > 2
            ? str.replace(target, target.substring(1, target.length - 1))
            : str;
      }
      return str;
    }

删除所有：

//key:值对应的key，str:JSON.stringify后的字符串
function rmAllValDouquoMarks(str,key){
    while (str.includes( `${key}:"`)) {
        str = rmValueDouquoMarks(str, key);
      }
      return str;
}

3.字符串转函数

//str:字符串，that需要绑定的this
function strChangeToFun(str, that = null) {
  let fn = null;
  if (str && typeof str === "string") {
    try {
     let  func = new Function("return " + str);
      that && (func = func.bind(that))
      if (typeof func() === "function") {
        fn=func()
      }
    } catch (e) { }
  }
  return fn;
}

4.两个对象数据混合

解释：目标对象合并源对象生成新对象，目标对象优先级高于源对象，如果目标对象有值将取目标对象值否者取源对象值，数组类型强制覆盖或者子元素去重合并可选。有点类似vue mixins功能

/**
 * 
 * @param {*} obj 源对象
 * @param {*} target 目标对象
 * @param {*} arrAssginType 数组合并类型 0：强行target替换obj，1：子元素合并一起
 * @returns 
 */
const assginObject = function (obj, target, arrAssginType = 0) {
  const allKeys = function (obj, target) {
    let targetKeys = Object.keys(target);
    Object.keys(obj).forEach((key) => {
      if (!targetKeys.includes(key)) targetKeys.push(key);
    });
    return targetKeys;
  };

  const isNullOrUndefined = function (val) {
    return val === null || val === undefined;
  };

  if (Object.prototype.toString.call(obj) === "[object Object]") {
    let allKeysArr = allKeys(obj, target);
    let newObj = {};
    for (let key of allKeysArr) {
      if (Object.prototype.toString.call(obj[key]) === "[object Object]") {
        newObj[key] = assginObject(
          obj[key],
          (target && target[key]) || {}
        );
      } else if (obj[key] && Array.isArray(obj[key])) {
        newObj[key] = assginObject(
          obj[key],
          (target && target[key]) || []
        );
      } else {
        newObj[key] = !isNullOrUndefined(target[key]) ? target[key] : obj[key]

      }
    }
    return newObj;
  } else if (obj && Array.isArray(obj)) {
    return arrAssginType ?  [...new Set([...obj, ...target])]:[...target]
  } else {
    return isNullOrUndefined(target) ? obj : target;
  }
}

export default assginObject

5.数据对象深拷贝

//对象深度克隆
const deepClone = obj => {
    function isNullOrUndefined(val) {
        return val === null || val === undefined
    }
    if (Array.isArray(obj)) { //数组类型
        return obj.map(item => {
            return isNullOrUndefined(item) ? item : deepClone(item)//null和undefined无原型直接返回
        })

    } else if (Object.prototype.toString.call(obj) === '[object Object]') {//对象类型
        let newObj = {}
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                newObj[key] = isNullOrUndefined(obj[key]) ? obj[key] : deepClone(obj[key])
            }
        }
        return newObj

    }
    return obj.valueOf()//其他类型（基本类型或函数）
}
export default deepClone

6.字符串内容导出代码文件

   //字符串导出代码文件,content：字符串内容，filename文件名
   function exportLowCode(content, filename) {
      let elLink = document.createElement("a");
      elLink.download = filename;
      elLink.style.display = "none";
      let blob = new Blob([content]);
      elLink.href = URL.createObjectURL(blob);
      document.body.appendChild(elLink);
      elLink.click();
      document.body.removeChild(elLink);
    }