如何在 JavaScript 中将数组转为对象

这篇具有很好参考价值的文章主要介绍了如何在 JavaScript 中将数组转为对象。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先,我们需要明白对象具有键和值。

const object = {
  key: 'value'
}

如果我们想把某个东西转换成一个对象,我们需要传递具有这两个要求的东西:键和值。

满足这些要求的参数有两种类型:

  • 具有嵌套键值对的数组
  • Map 对象

数组

这是一个带有键值对的嵌套数组

const nestedArray = [
  ['key 1', 'value 1'],
  ['key 2', 'value 2']
]

当我们应用它时,我们可以使用 Object.fromEntries 方法获取对象:

Object.fromEntries(nestedArray) // { key 1: "value 1", key 2: "value 2"}

Map

ES6 为我们带来了一个名为 Map 新的数据结构,它与 Objects 非常相似。

TC39:Map 对象是键/值对的集合,其中键和值可以是任意的 ECMAScript 语言值。

让我们创建新的 map 对象。

// 使用 constructor
const map = new Map([
  ['key 1', 'value 1'],
  ['key 2', 'value 2']
])

// 或者我们可以使用实例方法 set
const map = new Map()
map.set('key 1', 'value 1')
map.set('key 2', 'value 2')

// Map(2) {"key 1" => "value 1", "key 2" => "value 2"}

现在让我们使用 object.fromEntriesmap 转换成一个对象

Object.fromEntries(map) // { key 1: "value 1", key 2: "value 2"}

其他类型

尝试将其他数据类型传递到 Object.fromEntries 时要小心。以下所以列出的所有情况将一致抛出一个错误:

类型
undefined Object.fromEntries(undefined)
Null Object.fromEntries(null)
Boolean Object.fromEntries(true)
Number Object.fromEntries(100)
String Object.fromEntries("hi")
Object Object.fromEntries({key: "value"})
扁平化数组 Object.fromEntries([1,2,3])

注意:确保只传递一个键值对。

Object.fromEntries 和 Object.entries

Object.entries 方法返回一个给定对象自身可枚举属性的键值对数组。

const object = { key1: 'value1', key2: 'value2' }
const array = Object.entries(object) // [ ["key1", "value1"], ["key2", "value2"] ]

Object.fromEntries(array) // { key1: 'value1', key2: 'value2' }

对象到对象转换

你可以在最初的 TC39 提案 找到引入 Object.entries 方法的缘由。

通常,当我们选择使用 Object.entries 时,是因为它让我们能够访问一些漂亮的数组方法。

const user = {
  name: 'O.O',
  age: 18,
  address: 'xxx'
}

console.log(Object.entries(user).filter(([key, value]) => key !== 'age'))
// [["name", "O.O"], ["address", "xxx"]]

它返回了一组嵌套数组,而不是我们想要的对象转对象,后面又引入了 fromEntries 方便该操作。

const arr = [["name", "O.O"], ["address", "xxx"]]
console.log((Object.fromEntries(arr)) // {name: "O.O", address: "xxx"}
            
const user = {
  name: 'O.O',
  age: 18,
  address: 'xxx'
}

Object.fromEntries(Object.entries(user).filter(([key, value]) => key !== 'age'))
// {name: "O.O", address: "xxx"}

浏览器支持情况

除了 IE,大多数主流浏览器都支持这种方法:

如何在 JavaScript 中将数组转为对象
Object.fromEntries()

替代方案

Object.fromEntries 于2019年推出,所以它仍然是相当新的的一个方法。因此,在照顾旧浏览器的情况下,我们需要其他的替代方案,将一个键值对数组转化为一个对象以更好的支持。

Reduce

将数组转换为对象的一种常用方法是使用 reduce 方法

const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
])

function toObject(pairs) {
  return Array.from(pairs).reduce(
    (acc, [key, value]) => Object.assign(acc, { [key]: value }),
    {}
  )
}

toObject(array) // { key1: 'value1', key2: 'value2' }
toObject(map) // { key1: 'value1', key2: 'value2' }

Underscore 和 Lodash

Underscore 和 Lodash 也可将键值对转换为对象。

_.object — 将阵列转换为对象。传递单个[键、值]对列表,或键列表和值列表。

// Underscore
const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

_.object(array) // { key1: 'value1', key2: 'value2' }

_.fromPairs — 此方法返回由键值对组成的对象。文章来源地址https://www.toymoban.com/news/detail-430203.html

// Lodash
const array = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

_.fromPairs(array) // { key1: 'value1', key2: 'value2' }

到了这里,关于如何在 JavaScript 中将数组转为对象的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 将csv内容转为对象数组,它能够正确处理由逗号分隔的数据,并且能够忽略双引号中的逗号

    它能够正确处理由逗号分隔的数据,并且能够忽略双引号中的逗号。

    2024年02月12日
    浏览(39)
  • 4 JavaScript数组和对象

    4 数组和对象 在JS中创建数组非常简单. 直接[ ]即可. 也可以用正规军的new Array(). 不过效果都是一样的. 数组的常用操作: 在JS中创建一个对象非常容易. 和python中的字典几乎一样{ }: 使用对象 从上述内容中几乎可以看到. JS对象的使用几乎是没有门槛的. 十分灵活 代码的效果图如

    2024年02月12日
    浏览(34)
  • JavaScript中删除两个数组对象中id相同的对象以及根据id删除数组中对象。

    1. filter方法 定义和用法 filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意 : filter() 不会对空数组进行检测。 注意 : filter() 不会改变原始数组。 语法 参数说明 2. some方法 定义和用法 some() 方法用于检测数组中的元素是否满足

    2024年02月03日
    浏览(47)
  • javascript二维数组(20)JSON对象

    在JavaScript中,JSON对象是一种数据格式,用于存储和传输数据。JSON,全称JavaScript Object Notation,是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。 JSON对象由键值对组成,其中键是字符串,值可以是字符串、数字、布尔值、null、数组或另一个J

    2024年02月07日
    浏览(47)
  • JavaScript:js数组/对象遍历方法

    一、js遍历方法 序号 方法 描述 1 for 使用最基本的for循环可以遍历数组 2 for of for...of语句用来遍历可迭代对象(包括数组、Set、Map、字符串等),它可以替代传统的for循环和forEach()方法。for...of循环每次迭代都将返回一个值,而不是索引。 3 for in for...in语句用来遍历对象的可

    2024年02月09日
    浏览(55)
  • Matlab中将行向量转为列向量的方法

    在进行一些代码编写的时候,可能需要将行向量转为列向量,那么怎么去完成这件事情呢,本篇文章给大家介绍两种简单的方法 假设有如下代码 这个代码直接给C的第三个元素赋值为1,这时候Matlab会默认其为行向量,如果我们实际需要的是列向量的话,那么可以使用下面代码

    2024年02月11日
    浏览(39)
  • 在Python中将字典转为成员变量的方法

    当我们在Python中写一个class时,如果有一部分的成员变量需要用一个字典来命名和赋值,此时应该如何操作呢?这个场景最常见于从一个文件(比如json、npz之类的文件)中读取字典变量到内存当中,再赋值给一个类的成员变量,或者已经生成的实例变量。 在python中直接支持了

    2024年04月28日
    浏览(29)
  • vue中string如何转为json对象

    Json字符串转换为json对象 1、使用eval 2、使用JSON.parse() eval 是javascript支持的方式,不需要严格的json格式的数据也可以转化 JSON.parse 是浏览器支持的转换方式,必须要标准的json格式才可以转换 举例: let result = eval(‘(’ + res.data.details + ‘)’); result 值为: this.goods_details = resu

    2024年02月11日
    浏览(34)
  • Typescript中将字符串转为数值有哪些方法?

    在TypeScript中,将字符串转换为数值(即字符串到数字的类型转换)有几种方法。以下是一些常见的方法: 1、使用全局函数 parseFloat() 和 parseInt(): 2、使用 Number 构造函数: 3、使用模板字面量和 + 运算符: 4、使用 parseInt() 和 parseFloat() 方法的函数形式: 需要注意的是,这些

    2024年02月12日
    浏览(41)
  • 从 JavaScript 中的数组中删除空对象

    从数组中删除空对象: 使用 Array.filter() 方法遍历数组。 将每个对象传递给 Object.keys() 方法并检查键的长度是否不等于 0。 filter 方法将返回一个不包含空对象的新数组。 我们传递给 Array.filter 方法的函数被数组中的每个元素(对象)调用。 如果函数返回真值,则 filter 方法将

    2024年02月01日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包