js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)

简介: js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)

需求描述

现需要将简易对象(属性值仅为数字/字符串)转换为尽可能短的字符串进行传递。

代码实现

let oldObj = {
  a: 1,
  b: "2",
};

console.log("原对象", oldObj);

let oldObjStr = JSON.stringify(oldObj);

console.log("原对象字符串", oldObjStr, "长度为:", oldObjStr.length);

function obj2str(oldObj) {
  let newObjStr = "";
  Object.keys(oldObj).forEach((key) => {
    let value = oldObj[key];
    if (typeof value === "number") {
      value = "$" + value;
    }
    newObjStr = newObjStr + "^" + key + "=" + value;
  });

  return newObjStr;
}

let newObjStr = obj2str(oldObj);

console.log("新对象字符串", newObjStr, "长度为:", newObjStr.length);

function str2obj(str) {
  // 按 ^ 分隔字符串
  var key_ValueList = str.split("^");
  var obj = {};
  var keyValueList;
  key_ValueList.forEach(function (ele, index) {
    // 按 = 分隔字符串
    keyValueList = key_ValueList[index].split("=");
    if (keyValueList && keyValueList.length === 2 && keyValueList[0]) {
      var newValue = keyValueList[1];
      // 以 $ 开头的字符串变对象后,数据类型为数字
      if (newValue[0] === "$") {
        newValue = Number(newValue.substring(1));
      }
      obj[keyValueList[0]] = newValue;
    }
  });
  return obj;
}

let newObj = str2obj(newObjStr);
console.log("恢复后的对象", newObj);

效果如下:

原对象 { a: 1, b: '2' }
原对象字符串 {"a":1,"b":"2"} 长度为: 15
新对象字符串 ^a=$1^b=2 长度为: 9
恢复后的对象 { a: 1, b: '2' }

函数封装

简易对象转指定格式的字符串

function obj2str(oldObj) {
  let newObjStr = "";
  Object.keys(oldObj).forEach((key) => {
    let value = oldObj[key];
    if (typeof value === "number") {
      value = "$" + value;
    }
    newObjStr = newObjStr + "^" + key + "=" + value;
  });

  return newObjStr;
}

指定格式的字符串恢复为简易对象

function str2obj(str) {
  // 按 ^ 分隔字符串
  var key_ValueList = str.split("^");
  var obj = {};
  var keyValueList;
  key_ValueList.forEach(function (ele, index) {
    // 按 = 分隔字符串
    keyValueList = key_ValueList[index].split("=");
    if (keyValueList && keyValueList.length === 2 && keyValueList[0]) {
      var newValue = keyValueList[1];
      // 以 $ 开头的字符串变对象后,数据类型为数字
      if (newValue[0] === "$") {
        newValue = Number(newValue.substring(1));
      }
      obj[keyValueList[0]] = newValue;
    }
  });
  return obj;
}
目录
相关文章
|
3天前
|
JavaScript 数据处理 索引
js字符串截取
js字符串截取
12 0
|
3天前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
4天前
|
存储 JavaScript 前端开发
|
5天前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
7 1
|
2天前
|
JavaScript
JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
|
3天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
4 0
|
3天前
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
9 0
|
3天前
|
JavaScript 前端开发 测试技术
js 控制台调试——console 对象【详解】
js 控制台调试——console 对象【详解】
9 0
|
3天前
|
JavaScript
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
4 0
|
4天前
|
存储 JavaScript 前端开发