Js对象(四)对象与字符串相互转换 2021-11-24

JavaScript015

Js对象(四)对象与字符串相互转换 2021-11-24,第1张

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

一、将对象转为字符串:

 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)

toString()

使用对象的toString函数把对象转化为字符串。

// plain object

var obj = {}

obj.toString() // 返回"[object Object]" // 基本数据封装类

var num = new Number(2.2)

num.toString() // 返回"2.2" // 数组

var arr = [1,2,3]

arr.toString() // 返回"1,2,3" // 正则对象

var reg = new RegExp('\\d')

reg.toString() // 返回"/\d/" // 自定义对象

function Person(name, age) {

    this.name = name

    this.age = age

}

Person.prototype.toString = function () {

    return 'name is ' + this.name + 'and age is ' + this.age

}

var p = new Person('Scott', 31)

p.toString() // 返回"name is Scott and age is 31"

JSON.stringify

使用json序列化的方式把对象转换为字符串,该方式会把一个对象中所有标记为

enumerable的属性序列化为json格式的字符串。

// plain object

var obj = {name: 'Scott', age: 31}

JSON.stringify(obj) // 返回"{"name":"Scott","age":31}" // 基本数据封装类

var num = new Number(2.2)

JSON.stringify(num) // 返回"2.2" // 数组

var arr = [1,2,3]

JSON.stringify(arr) // 返回"[1,2,3]" // 自定义类型

function Person(name, age, maritalStatus) {

    this.name = name

    this.age = age

    // 由于婚姻状况是隐私的属性,不希望序列化字符串的时候暴露给他人,因此这里设置属性为不可枚举的

    Object.defineProperty(this, 'maritalStatus', {

        enumerable: false,

        configurable: false,

        writable: true,

        value: maritalState || 'unknown'

    })

    this.maritalStatus = maritalStatus

}

var p = new Person('Scott', 31, 'married')

// 序列化的时候是没有maritalStatus的

JSON.stringify(p) // 返回"{"name":"Scott","age":31}"

// 但是maritalStatus确实真实存在于对象中的

p.maritalStatus // 返回"married"

使用JSON.stringify 函数,将对象转换为JSON文本。

目前,Firefox、Opera、IE8以上版本也提供了本地JSON支持。其中,JSON解释器提供的函数有:JSON.parse、JSON.stringify。

对于那些并不提供本地JSON支持的浏览器可以引入脚本json2.js,来实现JSON转换功能。json2.js脚本可到https://github.com/douglascrockford/JSON-js/blob/master/json2.js页面下载。

函数说明:

JSON.stringify(value[, replacer[, space]])

参数

text

必选项。要转换为JSON文本的对象。

reviver

可选项。该参数是个替换函数。在转换中,遍历的每个节点,都将执行该函数,该函数的返回值将替代转换结果的相应节点值。

space

可选项。格式化输出JSON文本缩进的空格数量。如果不提供该参数将不会格式化输出。

参数reviver的委托类型

reviver(key, value)

reviver函数的中的this是当前所遍历到的节点的父节点。当所遍历的是根节点的时候,父节点是个Object对象,根节点是该对象的一个属性,属性名是空字符串。

参数

key

当父节点是数组Object,key为数组索引,否则key为Object属性名。

value

节点值。

注:JSON不支持循环数据结构。