如何在 typescript 中将对象转换为数组
在 typescript 中可以通过三种方式将对象转换为数组:
-
object.keys()
- 返回包含对象键的数组。 -
object.values()
- 返回包含对象值的数组。 -
object.entries()
- 返回包含键值对数组的数组。
const obj = { name: 'tom', country: 'chile' };
const keys = object.keys(obj);
console.log(keys); // 👉️ ['name', 'country']
const values = object.values(obj);
console.log(values); // 👉️ ['tom', 'chile']
const entries = object.entries(obj);
console.log(entries); // 👉️ [['name', 'tom'], ['country', 'chile']]
在第一个示例中,我们使用了 object.keys
方法来获取对象键的数组。
该方法返回一个字符串数组,其中对象的键与 for...in
循环提供的顺序相同。
// 👇️️ ['one', 'two']
console.log(object.keys({one: 1, two: 2}));
然后,我们可以通过以下方式遍历键数组:
const obj = { name: 'tom', country: 'chile' };
const keys = object.keys(obj) as (keyof typeof obj)[];
console.log(keys); // 👉️ ['name', 'country']
keys.foreach((key) => {
// 👇️ name tom, country chile
console.log(key, obj[key]);
});
第二个示例演示如何使用 object.values
方法获取对象值的数组。
const obj = { name: 'tom', country: 'chile' };
const values = object.values(obj);
console.log(values); // 👉️ ['tom', 'chile']
与 keys
方法类似,将值添加到数组的顺序与 for...in
循环提供的顺序相同。
第三个示例使用 object.entries 方法,它返回一个二维数组。
嵌套数组由 2 个元素组成 - 键和值。
const obj = { name: 'tom', country: 'chile' };
// 👇️ const entries: [string, string][]
const entries = object.entries(obj);
console.log(entries); // 👉️ [['name', 'tom'], ['country', 'chile']]
我们可以使用 foreach()
方法方便地遍历键值对数组。
const obj = { name: 'tom', country: 'chile' };
// 👇️ const entries: [string, string][]
const entries = object.entries(obj);
console.log(entries); // 👉️ [['name', 'tom'], ['country', 'chile']]
entries.foreach(([key, value]) => {
// 👇️ name tom, country chile
console.log(key, value);
});
请注意
,我们使用数组解构来解构数组中的键和值。
这是一个更多的例子,展示了数组解构是如何工作的。
const arr = ['hello', 'world'];
const [a, b] = arr;
console.log(a); // 👉️ "hello"
console.log(b); // 👉️ "world"
我们基本上是将数组元素解包为变量。 请注意,订单已保留。
键值对数组有很多应用。
例如,我们可以使用一个创建一个 map,它是一种与对象非常相似的数据结构,其中保留了键的插入顺序,任何值(对象和基元)都可以用作键或值。
const arr = [
['name', 'tom'],
['country', 'chile'],
] as const;
const map = new map(arr);
console.log(map); // 👉️ {'name', 'tom', 'country' => 'chile'}
转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处
本文地址:
相关文章
在 angularjs 中设置 select from typescript 的默认选项值
发布时间:2023/04/14 浏览次数:132 分类:angular
-
本教程提供了在 angularjs 中从 typescript 中设置 html 标记选择的默认选项的解释性ag捕鱼王app官网的解决方案。
在 angular 中使用 typescript 的 getelementbyid 替换
发布时间:2023/04/14 浏览次数:259 分类:angular
-
本教程指南提供了有关使用 typescript 在 angular 中替换 document.getelementbyid 的简要说明。这也提供了在 angular 中 getelementbyid 的最佳方法。
在 typescript 中使用 try..catch..finally 处理异常
发布时间:2023/03/19 浏览次数:385 分类:typescript
-
本文详细介绍了如何在 typescript 中使用 try..catch..finally 进行异常处理,并附有示例。
在 typescript 中使用 declare 关键字
发布时间:2023/03/19 浏览次数:254 分类:typescript
-
本教程指南通过特定的实现和编码示例深入了解了 typescript 中 declare 关键字的用途。
在 typescript 中 get 和 set
发布时间:2023/03/19 浏览次数:962 分类:typescript
-
本篇文章演示了类的 get 和 set 属性以及如何在 typescript 中实现它。
在 typescript 中格式化日期和时间
发布时间:2023/03/19 浏览次数:269 分类:typescript
-
本教程介绍内置对象 date() 并讨论在 typescript 中获取、设置和格式化日期和时间的各种方法。
在 typescript 中返回一个 promise
发布时间:2023/03/19 浏览次数:586 分类:typescript
-
本教程讨论如何在 typescript 中返回正确的 promise。这将提供 typescript 中 returns promise 的完整编码示例,并完整演示每个步骤。
在 typescript 中定义函数回调的类型
发布时间:2023/03/19 浏览次数:1445 分类:typescript
-
本教程说明了在 typescript 中为函数回调定义类型的ag捕鱼王app官网的解决方案。为了程序员的方便和方便,实施了不同的编码实践指南。
在 typescript 中把 json 对象转换为一个类
发布时间:2023/03/19 浏览次数:521 分类:typescript
-
本教程演示了如何将 json 对象转换为 typescript 中的类。