Login
芋圆社区 > 编程 > JavaScript > 对象转为字符串

对象转为字符串

820
0
2022-08-05
2022-08-05
Hey、小怪兽

  • • 模拟数据:
  • const data = {
        name: '芋圆社区',
        url: 'inhami.com',
        logo: '芋圆logo.png'
    }
  • • 要将这个对象传给后端,一般来说是转成JSON字符串的(因为这样好处理),用JSON.stringify:
  • console.log(JSON.stringify(data));
  • • 根据后端需要的数据,前端做相应的处理,之前碰到了后端需要这样的数据:
  • username=1&address=2&number=3
  • • 输入框,然后表单验证拿到了这样一个对象:
  • // antd4.x部分代码
    form.validateFields().then(values => {
        // values就是{username:'1',address:'2',number:'3'}
        const paramStr = formateObjToParamStr(values)
        ......
    }).catch(() => {});
  • • 写一个方法就可以了:
  • function formateObjToParamStr(obj) {
        const data = [];
        const keys = Object.keys(obj)
        const values = Object.values(obj)
    
        for (let i = 0; i < keys.length; i++) {
            data.push(`${keys[i]}=${values[i]}`);
        }
        return data.join('&');
    }
  • • 完整代码(用我上面的芋圆社区的例子):
  • // React函数式组件方法写法
    const formateObjToParamStr = (obj) => {
        const sdata = [];
        const keys = Object.keys(obj)
        const values = Object.values(obj)
    
        for (let i = 0; i < keys.length; i++) {
            sdata.push(`${keys[i]}=${values[i]}`);
        }
        return sdata.join('&');
    }
    
    const data = {
        name: '芋圆社区',
        url: 'inhami.com',
        logo: '芋圆logo.png'
    }
    
    formateObjToParamStr(data) // name=芋圆社区&url=inhami.com&logo=芋圆logo.png
  • • 拓展考虑:
  • // 如果对象转字符串用于通过url下载或做请求
    window.location.href = `${url}?${paramStr}`
    
    // 考虑data里面携带& ? \ /等等
    const data = {
        name: '&芋圆&社#区&',
        url: '?inh@ami?.com?',
        logo: '%芋圆$logo./png/'
    }

上一篇:|| 运算符的坑

下一篇:call,apply,bind

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

Array 基础方法

Array 进阶方法 - ES6

公主连结.cysp转.skel

获取视频的第一帧

定制Console.log

WebAssembly简单案例

一些常用的方法【持续更新】

AES加密 CBC模式

滚动条滚动到底部的判断

console.log展开值不一样

JSON解析与序列化

|| 运算符的坑

对象转为字符串

call,apply,bind

获取数组中对象的某一属性值

jQuery合并ajax请求

批量命名全局变量

forEach方法

round,ceil,floor

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点