js 遍历对象取key放入数组
时间: 2023-11-29 09:45:57 浏览: 92
以下是两种JavaScript遍历对象取key放入数组的方法:
1.使用Object.keys()方法
```javascript
let obj = { name: '小明', age: '20' };
let keys = Object.keys(obj);
console.log(keys); // 输出:['name', 'age']
```
2.使用Reflect.ownKeys()方法
```javascript
let obj = { name: '小明', age: '20' };
let keys = Reflect.ownKeys(obj);
console.log(keys); // 输出:['name', 'age']
```
相关问题
option遍历对象
在Vue中,可以使用v-for指令来遍历对象的option选项。 可以将对象的每个属性作为option的值和文本进行渲染。例如,可以使用如下代码来遍历一个对象options并生成option选项:
```
<template>
<select>
<option v-for="(value, key) in options" :key="key" :value="value">{{ value }}</option>
</select>
</template>
<script>
export default {
data() {
return {
options: {
option1: 'Option 1',
option2: 'Option 2',
option3: 'Option 3'
}
}
}
}
</script>
```
这样就可以通过v-for指令将options对象中的每个属性都渲染为一个option选项。
另外,在React中,可以使用函数将每个对象转换为React组件,并将它们作为数组传递。 你可以使用map函数来遍历对象并创建每个对象对应的React组件,然后将这些组件作为数组传递给需要渲染的组件。下面是一个示例代码:
```
import React from 'react';
function OptionList(props) {
const options = Object.keys(props.options).map((key) => {
return <option key={key} value={props.options[key]}>{props.options[key]}</option>;
});
return (
<select>
{options}
</select>
);
}
export default OptionList;
```
上述代码中,我们将options对象的每个属性都遍历了一遍,在每次遍历中,我们返回一个包含option选项的React组件,并将其放入options数组中。最后,我们将这个options数组作为子组件传递给需要渲染的组件。
总结起来,无论是在Vue还是在React中,我们都可以使用不同的方法来遍历对象的option选项,并根据需求选择合适的方法来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [遍历对象的方法](https://blog.csdn.net/MISS_zhang_0110/article/details/123369222)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [react js 遍历对象_遍历React.js中的嵌套对象](https://blog.csdn.net/cumian8165/article/details/108151862)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [jquery中each遍历对象和数组示例](https://download.csdn.net/download/weixin_38689857/13981904)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
只有两个数组对象A和B对象只有两个key值oid和typeiid,AB两个数组对进行比较,如果对象中的oid和typeiid相同就将这个对象放入arr1数组中,如果A有B没有就将这个对象放入arr2中,如果B有A没有就将这个对象放入arr3中 用ES6语法
可以使用 ES6 中的 Set 和 Map 对象来实现这个功能。具体步骤如下:
```javascript
// 定义两个数组 A 和 B,存放对象
const A = [{oid: 1, typeiid: 2, name: 'obj1'}, {oid: 2, typeiid: 1, name: 'obj2'}];
const B = [{oid: 1, typeiid: 2, name: 'obj3'}, {oid: 3, typeiid: 2, name: 'obj4'}];
// 定义三个 Set 对象,用于存放 A、B、AB 共有的对象
const setA = new Set(A);
const setB = new Set(B);
const setAB = new Set();
// 定义三个 Map 对象,用于存放 A 有 B 没有的对象(arr2)、B 有 A 没有的对象(arr3)以及 AB 共有的对象(arr1)
const map2 = new Map();
const map3 = new Map();
const map1 = new Map();
// 遍历 A 数组,将 A 和 B 共有的对象存入 setAB 中
A.forEach(objA => {
B.forEach(objB => {
if (objA.oid === objB.oid && objA.typeiid === objB.typeiid) {
setAB.add(objA);
}
})
});
// 遍历 setAB,将其中的对象存入 map1 中
setAB.forEach(obj => {
map1.set(JSON.stringify(obj), obj);
});
// 遍历 A 数组,将 A 有 B 没有的对象存入 map2 中
A.forEach(objA => {
if (!setB.has(objA)) {
map2.set(JSON.stringify(objA), objA);
}
});
// 遍历 B 数组,将 B 有 A 没有的对象存入 map3 中
B.forEach(objB => {
if (!setA.has(objB)) {
map3.set(JSON.stringify(objB), objB);
}
});
// 将 map1、map2、map3 转换成对应的数组 arr1、arr2、arr3
const arr1 = Array.from(map1.values());
const arr2 = Array.from(map2.values());
const arr3 = Array.from(map3.values());
```
解释一下代码的思路:
1. 首先使用 Set 对象将 A 和 B 数组中的对象去重,并分别存放到 setA 和 setB 中;
2. 使用 Set 对象 setAB 存放 A 和 B 共有的对象;
3. 使用 Map 对象 map1 存放 AB 共有的对象,其 key 值为对象的 JSON 字符串,value 值为对象本身;
4. 使用 Map 对象 map2 存放 A 有 B 没有的对象,其 key 值为对象的 JSON 字符串,value 值为对象本身;
5. 使用 Map 对象 map3 存放 B 有 A 没有的对象,其 key 值为对象的 JSON 字符串,value 值为对象本身;
6. 最后将 map1、map2、map3 转换成对应的数组 arr1、arr2、arr3 即可。
需要注意的是,上述代码中使用了 JSON.stringify 将对象转换成字符串,这是因为 Set 对象和 Map 对象默认使用的是对象的引用地址进行比较,而不是对象的属性值。因此,需要将对象转换成字符串后再进行比较。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)