JS基础(十) 将字符串转为对象

JavaScript018

JS基础(十) 将字符串转为对象,第1张

<script>

        /*

            let phone = {

                name: '小米10',

                color: '红色',

                size: '1000*200*500',

                price: '2999'

            }

        */

        let str1 = 'name=小米10&color=红色&size=1000*200*500&price=2999'

        // let arr = str1.split('&')

        // console.log(arr) // (4) ["name=小米10", "color=红色", "size=1000*200*500", "price=2999"]

        // 定义一个反译方法，头大，真离谱

        function rever(str) {

            // 定义一个空对象

            let obj = {}

            str.split('&').forEach(item =>{

            let kv = item.split('=')

            obj[kv[0]] = kv[1]

            })

            return obj

        }

        let obj1 = rever(str1)

        console.log(obj1)

        let str = 'name=小米10&color=红色&size=1000*200*500&price=2999'

        // 思路：得先将字符串转为数组

        // 数组中的元素应该是什么样的

        // 结果中需清除“&”和“=”字符，那就得调用split()方法来分隔

        // 第一步：先将该型字符串调用split()方法以"&"字符分隔，返回一个数组

        // console.log(str.split('&'))

        // (4) ["name=小米10", "color=红色", "size=1000*200*500", "price=2999"]

        // 第二步：将得到的数组里的每一个元素再次调用split()方法以“=”分隔

        // 这样就将“&”和“=”字符清除了

        // 从而得到了第一位为属性名（下标为0），第二位为属性值的几个数组（下标为1）

        // 那么如何才能将属性名与属性值一一对应？

        /* str.split('&').forEach(item =>{

            console.log(item.split('='))

        }) */

        // 返回了四个数组

        // (2) ["name", "小米10"]

        // (2) ["color", "红色"]

        // (2) ["size", "1000*200*500"]

        // (2) ["price", "2999"]

        // 第三步：遍历过程中将数组赋值给新数组对象kv（封装起来）

        // 思考：如何才能将属性名与属性值一一对应？

        // 即如何实现将属性值赋值给属性名（下标为1的元素的值赋值给下标为0的元素）

        // 因为最后得返回一个包含四个属性的对象出去

        // 那就需要创建一个对象去接收（封装）这些值

        // 定义一个空对象

        let obj = {}  

        str.split('&').forEach(item =>{

            // 遍历过程中将数组赋值给新对象kv

            let kv = item.split('=')

            // kv中有两个元素，第一位为属性名，第二位为属性值

            obj[kv[0]] = kv[1]

        })

        console.log(obj)

        // {name: "小米10", color: "红色", size: "1000*200*500", price: "2999"}

    </script>

1、字符串转化为对象

很显然这就是一个对象的格式，但如何把文本转为对象呢？—>使用eval()， ⚠️（注意一定要加括号，否则会转换失败 ）

2、把文本转化为数组

在实际开发中我们经常需要将对象转为字符串来传递数据，传递完毕后再以对象的方式显示，所以必须掌握相互转换的方法

一、将对象转为字符串:

 let obj = {

        name: "小米10",

        color: '红色',

        size: '1000*200*500',

        price: '2999'

    }

    // 1. 获取对象的两种方式：

    // console.log(obj.name)

    // console.log(obj['name'])

    // 2.遍历对象

    // 2.1  for in  遍历对象

    // for(变量  in  对象){

    // }

    for (let key in obj) { //for in 里面的变量喜欢用key

        console.log(key)// key 变量 输出得到是属性值

        // console.log(obj[k])//得到里面的属性值

        // console.log(k + '--' + obj[k])

    }

    // 2.2  ES6中新增的获取对象的所有属性方法  

    // Object.keys()  返回对象的所有属性名 是个数组

    console.log(Object.keys(obj))//['name', 'color', 'size', 'price']

    Object.keys(obj).forEach(key =>{

            console.log(key + '--' + obj[key])

        })

        // Object.values返回对象的所有属性值 是个数组

    console.log(Object.values(obj))

    console.log('*'.repeat(30))

    // 3.两种方法转换为字符串

    //方法一

    let arr1 = [] //先声明空数组，再将空数组转换为字符串

    for (let key in obj) {

        arr1.push(key + '=' + obj[key]) // 声明空数组接收对象转换后的数组

    }

    console.log(arr1.join('&'))//也可以声明一个字符串去接

    // 方法二

    // 先找到数组里面所有的属性名，然后用map修改属性

    let str2 = Object.keys(obj).map(key =>[key, obj[key]].join('=')).join('&')

    console.log(str2)

二、将字符串转为对象

 let str = 'name=刘德华&age=18&sex=男'

        let obj = {}

        // split将字符串按照指定字符转为数组，forEach再遍历数组

        str.split('&').forEach(r =>{

            let arr = r.split('=')//然后再用split按等号将数组拼成新数组

            obj[arr[0]] = arr[1]//再给对象赋值 arr[0]是属性。arr[1]是值

        })

        console.log(obj)