js小技巧之对象和数组相互转化的方法

JavaScript021

js小技巧之对象和数组相互转化的方法,第1张

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" }

参数

value

必需。 要转换的 JavaScript 值(通常为对象或数组)。

replacer

可选。 用于转换结果的函数或数组。

如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。 使用返回值而不是原始值。 如果此函数返回 undefined,则排除成员。 根对象的键是一个空字符串:""。

如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。 成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时,将忽略 replacer 数组。

space

可选。 向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。

如果省略 space,则将生成返回值文本,而没有任何额外空格。

如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格。 如果 space 大于 10,则文本缩进 10 个空格。

如果 space 是一个非空字符串(例如“\t”),则返回值文本在每个级别中缩进字符串中的字符。

如果 space 是长度大于 10 个字符的字符串,则使用前 10 个字符。

返回值

一个包含 JSON 文本的字符串。

备注

如果 value 具有 toJSON 方法,则 JSON.stringify 函数将使用该方法的返回值。 如果 toJSON 方法的返回值为undefined,则不转换成员。 这使对象能够确定自己的 JSON 表示形式。

将不会转换不具有 JSON 表示形式的值,例如 undefined。 在对象中,将丢弃这些值。 在数组中,会将这些值替换为 null。

字符串值以引号开始和结束。 所有 Unicode 字符可括在引号中,但必须使用反斜杠进行转义的字符除外。 以下字符的前面必须是反斜杠:

引号 (")

反斜杠 (\)

退格键 (b)

换页符 (f)

换行符 (n)

回车符 (r)

水平制表符 (t)

四个十六进制数字 (uhhhh)

此示例使用 JSON.stringify 将 contact 对象转换为 JSON 文本。 定义 memberfilter 数组以便只转换 surname 和phone 成员。 省略 firstname 成员。

JavaScript

var contact = new Object()

contact.firstname = "Jesper"

contact.surname = "Aaberg"

contact.phone = ["555-0100", "555-0120"]

var memberfilter = new Array()

memberfilter[0] = "surname"

memberfilter[1] = "phone"

var jsonText = JSON.stringify(contact, memberfilter, "\t")

document.write(jsonText)

// Output:

// { "surname": "Aaberg", "phone": [ "555-0100", "555-0120" ] }

此示例将 JSON.stringify 与一个数组一起使用。 replaceToUpper 函数将数组中的每个字符串转换为大写形式。

JavaScript

var continents = new Array()

continents[0] = "Europe"

continents[1] = "Asia"

continents[2] = "Australia"

continents[3] = "Antarctica"

continents[4] = "North America"

continents[5] = "South America"

continents[6] = "Africa"

var jsonText = JSON.stringify(continents, replaceToUpper)

function replaceToUpper(key, value) {

return value.toString().toUpperCase()

}

//Output:

// "EUROPE,ASIA,AUSTRALIA,ANTARCTICA,NORTH AMERICA,SOUTH AMERICA,AFRICA"

此示例使用 toJSON 方法将字符串值转换为大写形式。

JavaScript

var contact = new Object()

contact.firstname = "Jesper"

contact.surname = "Aaberg"

contact.phone = ["555-0100", "555-0120"]

contact.toJSON = function(key)

{

var replacement = new Object()

for (var val in this)

{

if (typeof (this[val]) === 'string')

replacement[val] = this[val].toUpperCase()

else

replacement[val] = this[val]

}

return replacement

}

var jsonText = JSON.stringify(contact)

document.write(jsonText)

// Output:

{"firstname":"JESPER","surname":"AABERG","phone":["555-0100","555-0120"]}

'{"firstname":"JESPER","surname":"AABERG","phone":["555-0100","555-0120"]}'

*/

要求

在以下文档模式中受到支持:Internet Explorer 8 标准模式、Internet Explorer 9 标准模式、Internet Explorer 10 标准模式、Internet Explorer 11 标准模式。此外,也在应用商店应用(Windows 8 和 Windows Phone 8.1)中受支持。请参阅版本信息。

在以下文档模式中不受支持:Quirks、Internet Explorer 6 标准模式、Internet Explorer 7 标准模式。