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

JavaScript012

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)

Object.keys()

Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。

例如:

let obj = {

name: 'haha',

age: 20,

showName: function () {}

}

Object.keys(obj) //['name','age','showName']

处理数组时,返回数组各元素的索引值:

let arr = ['a', 'b', 'c']

Object.keys(arr)// ['0', '1', '2']

let brr = [1, 3, 4]

Object.keys(brr)// ['0', '1', '2']

可自动排序:

let arr = { 100: 'a', 2: 'b', 7: 'c' }

console.log(Object.keys(arr))// console: ['2', '7', '100']

组合用法:

let obj = {

name: 'haha',

age: 20,

}

Object.keys(obj).map((val, index)=>{

obj[val] // 可以针对obj的不同属性做不同处理

})

Object.values()

Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

例如:

let obj = {

name: 'haha',

age: 20,

showName: function () {}

}

Object.values(obj) //['haha','20', f]

let brr = [1, 3, 4]

Object.values(brr)// [1, 3, 4]

排序:

let an_obj = { 100: 'a', 2: 'b', 7: 'c' }

console.log(Object.values(an_obj))// ['b', 'c', 'a']

字符串:

console.log(Object.values('haha'))// ['h', 'a', 'h', 'a']

Object.entries()

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。

const obj = { foo: 'bar', baz: 42 }

console.log(Object.entries(obj))// [ ['foo', 'bar'], ['baz', 42] ]

const anObj = { 100: 'a', 2: 'b', 7: 'c' }

console.log(Object.entries(anObj))// [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

非对象会被强制转为对象:

console.log(Object.entries('foo'))// [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

更优雅的遍历对象键值:

const obj = { a: 5, b: 7, c: 9 }

for (const [key, value] of Object.entries(obj)) {

console.log(`${key} ${value}`)// "a 5", "b 7", "c 9"

}

// 或者

Object.entries(obj).forEach(([key, value]) =>{

console.log(`${key} ${value}`)// "a 5", "b 7", "c 9"

})

Object.fromEntries()

Object.fromEntries() 把键值对列表转换为一个对象。改方法为ES10方法, Chrome不支持

const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

const obj = Object.fromEntries(arr)

console.log(obj)// { 0: "a", 1: "b", 2: "c" }

一个对象,但如何把文本转为对象呢。使用eval()注意一定要加括号,否则会转换失败

代码如下:

var

test='{

colkey:

"col",

colsinfo:

"NameList"

}'

把文本转化为对象

var

test='{

colkey:

"col",

colsinfo:

"NameList"

}'

var

obj2=eval("("+te...