问答

js如何改变对象里的键

作者:admin 2021-04-20 我要评论

template Cascader :data="data" v-model="value1"/Cascader/templatescript export default { data () { return { value1: [], data: [{ value: 'beijing', lab...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
<template>
    <Cascader :data="data" v-model="value1"></Cascader>
</template>
<script>
    export default {
        data () {
            return {
                value1: [],
                data: [{
                    value: 'beijing',
                    label: '北京',
                    children: [
                        {
                            value: 'gugong',
                            label: '故宫'
                        },
                        {
                            value: 'tiantan',
                            label: '天坛'
                        },
                        {
                            value: 'wangfujing',
                            label: '王府井'
                        }
                    ]
                }, {
                    value: 'jiangsu',
                    label: '江苏',
                    children: [
                        {
                            value: 'nanjing',
                            label: '南京',
                            children: [
                                {
                                    value: 'fuzimiao',
                                    label: '夫子庙',
                                }
                            ]
                        },
                        {
                            value: 'suzhou',
                            label: '苏州',
                            children: [
                                {
                                    value: 'zhuozhengyuan',
                                    label: '拙政园',
                                },
                                {
                                    value: 'shizilin',
                                    label: '狮子林',
                                }
                            ]
                        }
                    ],
                }]
            }
        }
    }
</script>

如何把这个value和label换成gcId和gcName 改变这个键值

###
function map(list, cb) {
  return list.map(item => {
      const res = cb(item);
    if(item.children) res.children = map(item.children, cb);
    return res;
  })
}


var data = [
  {
    value: 'beijing',
    label: '北京',
    children: [
      {
        value: 'gugong',
        label: '故宫'
      },
      {
        value: 'tiantan',
        label: '天坛'
      },
      {
        value: 'wangfujing',
        label: '王府井'
      }
    ]
  }
];
map(data, item => ({
    gcId: item.value,
    gcName: item.label,            
}));
###
JSON.parse(JSON.stringify({label: 'asdfasdf'}).replace(/"label":/g, '"gcName":'))

把对象转换成字符串, 进行替换, 再parse成对象
防止替换出错多匹配一个key后面的冒号, 加双引号是因为转为字符串之后会带上双引号

###

测试对象

let dataArray = [{
    value: 'beijing',
    label: '北京',
    children: [
        {
            value: 'gugong',
            label: '故宫'
 },
        {
            value: 'tiantan',
            label: '天坛'
 },
        {
            value: 'wangfujing',
            label: '王府井'
 }
    ]
}, {
    value: 'jiangsu',
    label: '江苏',
    children: [
        {
            value: 'nanjing',
            label: '南京',
            children: [
                {
                    value: 'fuzimiao',
                    label: '夫子庙',
                }
            ]
        },
        {
            value: 'suzhou',
            label: '苏州',
            children: [
                {
                    value: 'zhuozhengyuan',
                    label: '拙政园',
                },
                {
                    value: 'shizilin',
                    label: '狮子林',
                }
            ]
        }
    ],
}];

实现代码

// 程序入口
replace(dataArray)


function replace(obj) {
    // 如果是数组 则不断遍历
 if (Array.isArray(obj)) {
     obj.forEach(d => replace(d))
     return
    }
    
    
 // 如果是对象,则获取其值临时保存
 let tValue = obj['value'];
 let tLabel = obj['label'];
 
 
 // 删除新值,重新创建gcID & gcName 并赋值
 delete obj['value'];
 delete obj['label'];
 obj.gcId = tValue;
 obj.gcName = tLabel;
 
 // 如果有children则递归执行
 if (obj.children) {
        replace(obj.children)
    }
}

结果

image.png

###

function mapData(model) {

// 判断如果是数组,就对单个元素使用 mapData 进行映射处理
if (Array.isArray(model)) {
    return model.map(it => mapData(it));
}

const r = { ...model }
["label", "value"].forEach(name => delete r[name]);

const { label, value } = model;
const r = { gcId: value, gcName: label };

// 如果有 children,对 children 数组进行映射处理
if (model.children) {
    r.children = mapData(model.children);
}

return r;

}
就是一个简单的递归映射就好了(看注释,不懂就评论中继续问):

function mapData(model) {
    // 判断如果是数组,就对单个元素使用 mapData 进行映射处理
    if (Array.isArray(model)) {
        return model.map(it => mapData(it));
    }

    const { label, value } = model;
    const r = { gcId: value, gcName: label };

    // 如果有 children,对 children 数组进行映射处理
    if (model.children) {
        r.children = mapData(model.children);
    }

    return r;
}

上面处理了每个元素只有 labelvaluechildren 属性的情况,如果还有其他属性,可以过滤,比如先复制,再删除

    const r = { ...model }
    ["label", "value"].forEach(name => delete r[name]);

或者通过 Lodash 的 omit() 来处理

    // 记得 import _ from "lodash";

    const r = _.omit(model, ["label", "value", "children"]);
    ({ label: r.gcId, value: r.gcName } = model);

    // 如果有 children,对 children 数组进行映射处理
    if (model.children) {
        r.children = mapData(model.children);
    }
###

对象中的键名是不可变的,你只能重新生成或者说构造一个按新键名生成的对象。
其实一个办法是该对象绑定一个特殊的查询方法,在查询方法中gcId和gcName分别对应原对象的value和label

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器