JS只清空对象的value，保留key

最新推荐文章于 2023-10-12 12:52:36 发布

原创最新推荐文章于 2023-10-12 12:52:36 发布 · 975 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #开发语言

文章展示了如何使用JavaScript的Object.keys方法配合forEach遍历并清空对象的所有属性值，将属性值设置为空字符串。

JS清空对象的值：

var obj = {
	name: 'aaa',
	age:18
}
console.log(obj)
Object.keys(this.obj).forEach((key) => (this.obj[key] = ''));
console.log(obj)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SCENARIO24

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

JavaScript - 简单快速，根据条件剔除删除对象中某个字段键值（key / value）

🏆 前端领域优质创作者

10-03

5917

JavaScript-简单快速，根据条件剔除删除对象中某个字段键值（key/value），js根据条件删除对象中某个字段js删除对象中的某一个字段的方法实现，js根据指定条件删除对象中某个值，JavaScript删除对象的某个属性的方法，js去除对象里面的某个值，js根据条件删除数组中某个对象。

【js】对象删除key，场景：表单复制功能只需要少数字段留值

花椒和蕊的博客

04-20

813

之前的写法都是类似于this.form.id = ‘’,如果表单字段多的话，可能有四五十行代码都是这样。this.form[‘item’] 这样的写法拿到的是key为item的这一项。this.form[item] 这样的写法拿到的是key对应的value值。] 这样的写法才是动态的拿到循环的每一项的key。

参与评论您还未登录，请先登录后发表或查看评论

只清空对象的value,保留key

Passerby_OK的博客

09-29

985

只清空对象值，保留key

【方法1】删除Map中Value重复的记录，并且只保留Key最小的那条记录

iteye_13605的博客

06-19

296

介绍晚上无聊的时候，我做了一个测试题，测试题的大体意思是：删除Map中Value重复的记录，并且只保留Key最小的那条记录。例如： I have a map with duplicate values: ("A", "1"); ("B", "2"); ("C", "2"); ("D", "3"); (&qu

快速清空对象中每个key的value

Haines

09-16

756

Object.keys()遍历对象，并快速清空对象key的value

js清空input file的value值

小柠檬爱编程

06-11

2917

在做上传本地图片的功能时遇到一个问题，第一次点file按钮选择图片完成会触发onchange事件，第二次如果选择相同的图片文件上传，则不会触发onchange事件，原因是：因为选择的文件两次的路径值相同，值没有改变，所以导致file不会触发onchange事件，因此就想到一个解决办法，需要每次创建完img后重置file的value来解决这个问题。解决方法一：每次创建完img后把file的value值重置为空字符串注意：浏览器的安全机制不允许直接用js修改file的value为空字符串以外的值，强制.

js代码-js获得map中key的个数

07-15

在JavaScript中，获取Map中key的个数非常简单，Map对象有一个内置的`size`属性，它会返回Map中的元素数量，也就是key的个数。例如： ```javascript console.log(myMap.size); // 输出：2 ``` 上面的代码会打印出2...

js中双层循环，要生成一个key-value形式的对象，如果对象key已经存在则中断循环，并提示key值重复

05-14

嗯，用户的问题是在JavaScript中使用双层循环生成一个key-value对象，如果key已经存在就中断循环并提示重复。我需要仔细思考如何解决这个问题。首先，用户想要在双层循环中创建对象，每次循环生成一个键值对。如果在...

如何使用Object.keys()获取到的key值来获取对象中key的value值

06-11

用户的问题：如何通过Object.keys()返回的key值获取对象中对应的value值？解决方案：1.首先，使用Object.keys()获取对象的键数组。2.然后，遍历这个数组（或者直接通过索引访问某个键），并用每个键去访问对象的值。...

遍历数组，将数组中key值相同的对象合并

lzfengquan的博客

03-28

2183

定义一个空数组接收汇总 const TotalData = []; // 拿到明细数据 tempData 进行遍历 tempData.forEach((value, key) => { //判断过滤后的数组是否为空 if (TotalData.length == 0) { TotalData.push(value); } else { TotalData.forEach((valueIndex, keyIndex) => { ..

JS递归遍历对象获得Value值方法技巧

11-27

一般要用到递归，就要判断对象是否和父类型是否一样，通过本文给大家演示下简单的对象递归，还有数组递归类似。 var obj = { a:{w:1,y:2,x:3}, b:{s:4,j:5,x:6}, c:{car:7,cat:8,mao:9} } function f(s){ for(var i in s){ if(typeof s[i]=="object"){ f(s[i]) }else{ 　　　console.log(s[i]); 　　} } } f(obj); 返回结果：1,2,3,4,5,6,7,8,9 以上所述是小编给大家介绍的JS递归遍历对象获得Value值方法技巧的全部叙述，

python是否支持对象之间的组合关系_Python 面向对象之组合用法

weixin_39827304的博客

12-04

184

面向对象组合用法软件重用的重要方式除了继承之外还有另外一种方式，即：组合组合指的是，在一个类中以另一个类的对象作为数据属性，称为类的组合class Arms: # 定义武器类bullet = 7.62def hit(self,man): # 装备功能passclass Man: # 定义一个男人role = 'person'def __init__(self,name,arms):self....

JS对象的合并与清空

布克吉的博客

06-20

1020

会合并相同属性、后面的会覆盖前面的。

JS Object只保留选定的key

weixin_39501680的博客

03-27

510

JS Object只保留选定的key

JavaScript之从一个数组对象中删除某一个key1和value1，并且取其他的key 和value组成一个新的数组对象

qq_35030421的博客

02-12

5234

本文主要记录一下关于数组与对象互相转换的问题，写的如有不妥之处，还请大家多多指教！有一个如：[{key1 : val1 , key2 : val2 , key3 : val3}, {key1 : val1 , key2 : val2 , key3 : val3} , ... , {key1: val1 , key2 : val2 , key3 : val3}] 这种类型的数组对象，现在需要...

Map集合按key删除和按value删除

最新发布

08-28

<think>根据用户需求，需要在el-cascader组件中配置value-key，以便获取的formData.value.ckry是对象数组格式（如[{'id': '1', 'name': '李云龙'}, ...]）。但是，需要注意的是，el-cascader组件的多选模式下，v-model绑定的值通常是每个选项的value组成的数组（默认情况下，value可以是任意类型，但通常为字符串或数字）。然而，用户希望得到的是整个选项对象（包含id和name）。实际上，el-cascader组件并不直接支持将整个对象作为选中的值。但是，我们可以通过以下步骤实现： 1. 在options中，每个节点的值（value）设置为该节点的唯一标识（如id），并在节点数据中包含name等属性。 2. 使用v-model绑定一个由选中的节点的value组成的数组（即id数组）。 3. 当选择发生变化时，通过选中的id数组，从整个options树中查找对应的节点对象，从而构建出我们需要的对象数组。但是，用户希望直接通过配置就能得到对象数组，而el-cascader组件本身不提供这样的功能。因此，我们需要在change事件中手动转换。然而，用户提到“配置value-key”，这让我们联想到el-select组件中有一个value-key属性，用于当选项的value为对象时，指定一个唯一标识的属性名。但是在el-cascader组件中，value-key的作用是：当选项的value是一个对象时，用来指定选项value中哪个属性作为唯一标识（用于多选时去重）。它并不能直接让我们得到整个对象。所以，在el-cascader中，我们仍然需要手动转换。具体步骤： 1. 定义options数据结构，每个节点包含id、name、children等属性。 2. 设置el-cascader的props配置，指定value为节点数据中存储id的属性名（比如'id'），label为节点数据中存储名称的属性名（比如'name'）。 3. 在v-model上绑定一个数组，这个数组是选中的节点的id数组（多选模式下，每个选中节点对应一个id，所以整个数组就是[id1, id2, ...]）。 4. 在change事件（handleChange）中，根据这个id数组，从options中找出对应的节点对象，然后提取出我们需要的属性（如id和name）组成对象数组。但是，用户当前的代码中，el-cascader的v-model绑定的是formData.ckry，而用户希望formData.ckry是对象数组。这里我们可以将v-model绑定到一个中间变量（比如selectedIds），然后在change事件中，将转换后的对象数组赋值给formData.ckry。或者，我们也可以直接使用计算属性的setter来实现，但考虑到代码清晰度，我们采用在change事件中转换的方式。修改如下：步骤1：调整el-cascader的绑定和事件 - 将v-model改为绑定一个中间变量selectedIds（数组，存储选中的id） - 在handleChange事件中，将selectedIds转换为对象数组，并赋值给formData.value.ckry 步骤2：定义中间变量selectedIds - 在script中声明selectedIds，并初始化为空数组步骤3：在组件挂载时，如果formData.value.ckry已经有值（编辑状态），则需要将formData.value.ckry（对象数组）转换为id数组，用于初始化selectedIds。但是，这样会带来两个数据源的问题，我们也可以不定义中间变量，而是使用计算属性来同步。但为了简单，我们采用直接操作formData.ckry的方式，并利用一个临时变量来存储id数组。然而，用户当前代码中，formData.ckry是直接绑定到el-cascader的。所以我们需要修改绑定。修改方案： 1. 将el-cascader的v-model改为绑定一个计算属性，该计算属性负责在get时返回id数组，在set时更新id数组并触发转换。 2. 或者，我们保持el-cascader绑定formData.ckryId（一个存储id数组的变量），然后通过watch或change事件来更新formData.ckry（对象数组）。考虑到代码的清晰，我们采用第二种方式，并修改formData的结构： - 在formData中，我们不再直接存储对象数组，而是存储两个字段： ckryIds: [] // 用于级联组件绑定的id数组 ckry: [] // 存储对象数组但是，这样会破坏原有数据格式，因为用户要求formData.value.ckry就是对象数组。所以我们可以： - 不改变formData.ckry的用途，但增加一个临时变量selectedIds用于级联组件绑定。具体代码调整如下：在模板中： <el-cascader v-model="selectedIds" ... @change="handleChange" /> 在script中： let selectedIds = ref([]); // 存储选中的id数组 // 在初始化时，如果formData.value.ckry有值（编辑状态），则将其映射为id数组，赋值给selectedIds onMounted(() => { // ... 其他初始化 if (props.formData.ckry && Array.isArray(props.formData.ckry)) { selectedIds.value = props.formData.ckry.map(item => item.id); } }); const handleChange = (ids) => { // 根据ids从整个userList（级联数据源）中查找对应的节点对象 // 注意：级联的数据源是userList，它是一个树形结构，我们需要递归查找 const selectedNodes = []; // 写一个递归函数来查找 function findNodes(nodes, ids) { nodes.forEach(node => { if (ids.includes(node.id)) { selectedNodes.push({ id: node.id, name: node.name }); // 这里假设节点有id和name属性 } if (node.children) { findNodes(node.children, ids); } }); } findNodes(userList.value, ids); formData.value.ckry = selectedNodes; }; 但是，这种方法需要递归查找，且效率可能不高。另外，我们假设节点数据中有id和name属性。另一种更高效的方法：在构建userList时，同时构建一个扁平化的映射表（id到节点对象的映射），这样我们可以直接通过id获取节点对象。例如： const nodeMap = ref({}); // 在获取userList后，构建映射表 const buildMap = (nodes) => { nodes.forEach(node => { nodeMap.value[node.id] = node; if (node.children) { buildMap(node.children); } }); }; // 在获取userList的回调中： getExamTaskUsers().then(res => { userList.value = res.data.data; buildMap(userList.value); }); const handleChange = (ids) => { formData.value.ckry = ids.map(id => { const node = nodeMap.value[id]; return { id: node.id, name: node.name }; }); }; 这样效率更高。但是，由于用户当前代码中，userList是从接口获取的，并且是级联的树形结构，所以我们需要构建映射表。考虑到用户代码，我们进行如下修改： 1. 在获取用户列表后，构建一个映射表（id到节点对象）。 2. 修改handleChange函数，使用映射表快速查找。具体代码： // 在script中 const nodeMap = ref({}); const buildMap = (nodes) => { nodes.forEach(node => { nodeMap.value[node.id] = node; if (node.children && node.children.length > 0) { buildMap(node.children); } }); }; const getUser = () => { getExamTaskUsers().then((res) => { if (res.data.code == 200) { userList.value = res.data.data; buildMap(userList.value); // 构建映射表 // 编辑状态下，初始化selectedIds if (props.formData.ckry && Array.isArray(props.formData.ckry)) { selectedIds.value = props.formData.ckry.map(item => item.id); } } }); }; const handleChange = (ids) => { // 使用映射表 formData.value.ckry = ids.map(id => { const node = nodeMap.value[id]; if (node) { return { id: node.id, name: node.name }; } else { return { id, name: '未知' }; // 兜底 } }); }; // 定义selectedIds const selectedIds = ref([]); 同时，在模板中，将el-cascader的v-model改为selectedIds。但是，这里有一个问题：级联组件的值通常是一个数组（每个选中节点的路径），而不仅仅是叶子节点的id。但在多选级联中，它默认返回的是每个选中节点的路径数组（每个路径是一个数组，从根节点到叶子节点）。这和我们预期的不同。因此，我们需要重新配置级联组件的props，使其只返回叶子节点，并且每个节点的值就是id，并且多选时返回的是叶子节点的值数组（即id数组）。在el-cascader中，通过props配置： :props="{ multiple: true, value: 'id', label: 'name', emitPath: false, checkStrictly: true }" 解释： - emitPath: false 表示选中节点时，只返回节点的值（id）而不返回路径。 - checkStrictly: true 表示可以选择任意节点（不一定是叶子节点）。但用户可能只需要叶子节点？根据需求来定。如果只需要叶子节点，那么可以设置checkStrictly为false（默认），并且确保只有叶子节点才是可选的。但级联多选通常用于选择叶子节点，所以我们可以设置emitPath为false，这样选中的值就是叶子节点的id（数组）。因此，修改模板中的el-cascader： <el-cascader v-model="selectedIds" :options="userList" :props="{ multiple: true, value: 'id', label: 'name', emitPath: false }" :show-all-levels="false" collapse-tags clearable @change="handleChange" /> 这样，selectedIds就是选中节点的id数组（每个id都是叶子节点的id），然后通过handleChange就可以转换为对象数组。总结： 1. 修改el-cascader的v-model绑定到selectedIds（一个数组，存储选中的id）。 2. 修改props配置，添加value、label的字段名，并设置emitPath为false。 3. 在获取用户列表后，构建一个id到节点对象的映射表（nodeMap）。 4. 在handleChange中，将selectedIds映射为对象数组，赋值给formData.value.ckry。 5. 在编辑初始化时，将formData.value.ckry（对象数组）转换为id数组，用于初始化selectedIds。注意：由于级联组件的数据是树形结构，我们构建映射表时需要递归遍历所有节点。代码修改如下：在模板中：将v-model改为selectedIds，并修改props配置。在script中： // 引入ref, onMounted等 const selectedIds = ref([]); const nodeMap = ref({}); // 构建映射表的函数 const buildMap = (nodes) => { nodes.forEach(node => { nodeMap.value[node.id] = node; if (node.children && node.children.length) { buildMap(node.children); } }); }; // 在getUser函数中，获取数据后构建映射表 const getUser = () => { getExamTaskUsers().then((res) => { if (res.data.code == 200) { userList.value = res.data.data; buildMap(userList.value); // 编辑状态初始化selectedIds if (props.dialogType === 'edit' && formData.value.ckry && Array.isArray(formData.value.ckry)) { selectedIds.value = formData.value.ckry.map(item => item.id); } } }); }; // handleChange函数 const handleChange = (ids) => { formData.value.ckry = ids.map(id => { const node = nodeMap.value[id]; if (node) { return { id: node.id, name: node.name }; } else { return { id, name: '未知' }; } }); }; 这样，我们就实现了需求。但是，注意在新增时，formData.value.ckry可能是空数组，所以selectedIds初始化为空数组，没有问题。另外，在编辑时，我们通过映射表将formData.value.ckry（对象数组）转换为id数组，然后赋值给selectedIds，这样级联组件就会显示之前选中的项。最后，我们还需要注意，如果用户清空了选择，那么ids为空数组，formData.value.ckry也会被设置为空数组。因此，按照上述步骤修改即可。由于改动较大，请根据实际数据结构调整（比如节点中的id和name字段名，接口返回的数据结构等）。另外，如果节点数据中没有name字段，而是其他字段（如label），则需要相应调整。根据用户之前的代码，el-cascader的props配置之前是：:props="{ multiple: true }"，现在需要修改为： :props="{ multiple: true, value: 'id', label: 'name', emitPath: false }" 注意：这里假设节点数据中标识节点值的属性名为'id'，显示文本的属性名为'name'。请根据实际接口返回的数据调整。如果接口返回的数据不是'id'和'name'，则需要修改为对应的字段名。例如，如果节点数据为： { value: '1', label: '李云龙', children: [...] } 那么props应配置为： :props="{ multiple: true, value: 'value', label: 'label', emitPath: false }" 请根据实际情况调整。修改后的模板部分： <el-cascader v-model="selectedIds" :options="userList" :props="{ multiple: true, value: 'id', label: 'name', emitPath: false }" :show-all-levels="false" collapse-tags clearable @change="handleChange" /> 注意：这里去掉了原来的`:props="{ multiple: true }"`，替换为新的配置。这样，我们就完成了需求。</think>在 Vue 中使用 Element UI 的 `el-cascader` 组件时，要实现 `formData.value.ckry` 获取 `[{'id': '1', 'name': '李云龙'}, ...]` 格式的数据，需要通过以下步骤配置 `value-key` 并处理数据转换： ### 解决方案 1. **配置 `value-key` 属性**： ```html <el-cascader v-model="formData.ckryIds" :options="userList" :props="{ multiple: true, value: 'id', // 指定值字段 label: 'name', // 指定显示字段 emitPath: false, // 不返回完整路径 valueKey: 'id' // 设置唯一标识键 }" @change="handleChange" /> ``` 2. **定义数据结构和映射逻辑**： ```javascript // 存储选中的ID数组 const formData = ref({ ckryIds: [], // 级联组件绑定的ID数组 ckry: [] // 最终需要的对象数组 }); // 创建ID到对象的映射表 const nodeMap = ref({}); // 构建映射表的递归函数 const buildNodeMap = (nodes) => { nodes.forEach(node => { nodeMap.value[node.id] = { id: node.id, name: node.name }; if (node.children) { buildNodeMap(node.children); } }); }; ``` 3. **处理数据变化**： ```javascript // 级联选择变化时的处理 const handleChange = (selectedIds) => { formData.value.ckry = selectedIds.map(id => nodeMap.value[id] || { id, name: '未知' } ); }; ``` 4. **初始化数据映射**： ```javascript onMounted(() => { getExamTaskUsers().then(res => { if (res.data.code === 200) { userList.value = res.data.data; buildNodeMap(userList.value); // 构建映射表 // 编辑模式初始化选中项 if (props.dialogType === 'edit') { formData.value.ckryIds = props.formData.ckry.map(item => item.id); } } }); }); ``` ### 关键配置说明 1. **`valueKey` 作用**： - 指定唯一标识符字段（默认为 `value`） - 确保在多选模式下正确识别和比较对象[^1][^2] ```html :props="{ valueKey: 'id' }" ``` 2. **`emitPath` 配置**： - 设置为 `false` 使组件只返回选中节点的值（而非完整路径） ```html :props="{ emitPath: false }" ``` 3. **数据映射原理**： ```mermaid graph LR A[级联组件选择] --> B[返回ID数组] B --> C[通过nodeMap映射] C --> D[生成对象数组] D --> E[存入formData.ckry] ``` ### 完整实现示例 ```javascript // 模板部分 <el-cascader v-model="formData.ckryIds" :options="userList" :props="cascaderProps" @change="handleChange" /> // 脚本部分 const formData = ref({ ckryIds: [], ckry: [] }); const cascaderProps = { multiple: true, value: 'id', label: 'name', emitPath: false, valueKey: 'id' }; const nodeMap = ref({}); const buildNodeMap = (nodes) => { nodes.forEach(node => { nodeMap.value[node.id] = { id: node.id, name: node.name }; if (node.children) buildNodeMap(node.children); }); }; const handleChange = (selectedIds) => { formData.value.ckry = selectedIds.map(id => nodeMap.value[id]); }; onMounted(async () => { const res = await getExamTaskUsers(); if (res.data.code === 200) { userList.value = res.data.data; buildNodeMap(userList.value); } }); ``` ### 注意事项 1. **数据结构要求**： - 选项数据必须包含 `id` 和 `name` 字段 - 嵌套数据使用 `children` 字段[^2] 2. **编辑模式初始化**： ```javascript // 编辑时回填数据 if (props.dialogType === 'edit') { formData.value.ckryIds = props.formData.ckry.map(item => item.id); } ``` 3. **性能优化**： - 对于大型数据集，建议使用扁平化数据结构 - 使用 Map 代替 Object 提升查找效率 4. **类型一致性**： - 确保 `id` 字段类型一致（全为字符串或全为数字） - 避免混合类型导致映射失败[^1]