首页 前端知识 js基本常用方法——重命名(替换)key

js基本常用方法——重命名(替换)key

2024-05-31 20:05:57 前端知识 前端哥 840 715 我要收藏

目录

    • 一、重命名对象的key
      • 1、renameKeys
      • 2、replace方法替换指定名称
      • 3、replace进阶版替换
      • 4、封装方法renameObjectKey遍历替换
      • 5、利用迭代方法reduce替换key
      • 6、遍历最小差异化替换key,删除原属性
      • 7、对数组替换key的操作(map递归)

一、重命名对象的key

1、renameKeys

  • 代码
        console.log('-----------------方法1-----------------');
        const obj = {a: "小明", b: "20"};
        const newKeys = {a: "name", b: "age"};
        console.log('要转化的数据:\n',obj);
        const renamedObj = renameKeys(obj, newKeys);
        console.log('结果:\n',renamedObj);
        console.log('--------------------------------------');
  • 结果
    {a: “小明”, b: “20”} 改成 {name: ‘小明’, age: ‘20’}
    在这里插入图片描述

2、replace方法替换指定名称

  • 代码
  		console.log('-----------------方法2---------------');
        let object = {name: "小明", id: 20, sex: false};
        console.log('要转化的数据:\n',object);
        let str = JSON.stringify(object);
        //依次修改对象中的每一个对象
        str = str.replace('name', 'mingzi');
        str = str.replace('id', 'age');
        object = JSON.parse(str);
        console.log('结果:\n',object);
        console.log('--------------------------------------');
  • 结果
    name替换成了mingzi ,id替换成了age
    在这里插入图片描述

3、replace进阶版替换

  • 代码
        console.log('-----------------方法2进阶---------------');
        let object1 = {name: "小明", id: 20, sex: false};
        const targetKeys = ['MingZi','Age','Sex'];
        const keys = [];
        for (var key in object1) {
            keys.push(key);
        }
        console.log('要转化的数据:\n',object1);
        let str1 = JSON.stringify(object1);
        //tarKeys的数组长度和object1的key值长度一致,不一致也没影响,无论谁多谁少
        for (let i = 0;i<targetKeys.length;i++){
            str1 = str1.replace(keys[i],targetKeys[i])
        }
        object1 = JSON.parse(str1);
        console.log('结果:\n',object1);
        console.log('----------------------------------------');
  • 结果
    name替换成了MingZi
    id替换成了Age
    sex替换成了XingBie
    在这里插入图片描述

4、封装方法renameObjectKey遍历替换

  • 代码
  		console.log('-----------------方法4---------------');
        function renameObjectKey(oldObj, oldName, newName) {
            const newObj = {};
            Object.keys(oldObj).forEach(key => {
                const value = oldObj[key];
                if (key === oldName) {
                    newObj[newName] = value;
                } else {
                    newObj[key] = value;
                }
            });
            return newObj;
        }
        let object2 = {name: "小明", id: 20, sex: false};
        console.log('要转化的数据:\n',object2)
        //id替换为age
        object2 = renameObjectKey(object2, 'id', 'age');
        console.log('结果:\n',object2);
        console.log('--------------------------------------');
  • 结果
    id替换成了age
    在这里插入图片描述

5、利用迭代方法reduce替换key

  • 代码
        console.log('-----------------方法5---------------');
        let object3 = {key1: "小明", key2: 20, key3: false};
        const keyMap = {key1: "name", key2: "age", key3: "sex"};
        console.log('要转化的数据:\n',object3)
        const mappedData = Object.keys(keyMap).reduce((obj, k) => Object.assign(obj, {[keyMap[k]]: object3[k]}), {});
        console.log('结果:\n',mappedData);
        console.log('--------------------------------------');
  • 结果
    key1、key2、key3替换成了 name、age、sex
    在这里插入图片描述

6、遍历最小差异化替换key,删除原属性

  • 代码
        console.log('-----------------方法6---------------');
        let object4 = {
            "_id": "00607",
            "_email": "user1@gmail.com",
            "name": "小明"
        };
        console.log('要转化的数据:\n',object4)
        const new_key = "id";
        const old_key = "_id";
        //最小差异化替换key
        Object.keys(object4).forEach(key => {
            if (key === old_key) {
                object4[new_key] = object4[key];
                delete object4[key];
            } else {
                object4[`_${key}`] = object4[key];
                delete object4[key];
                object4[`${key}`] = object4[`_${key}`];
                delete object4[`_${key}`];
            }
        });
        console.log('结果:\n',object4);
        console.log('--------------------------------------');
  • 结果
    _id替换成了id
    在这里插入图片描述

7、对数组替换key的操作(map递归)

  • 代码
        //需求是将数组b根据a的值替换对象中的key值
 		console.log('-----------------方法7-----------------');
        let a = ["code", "name", "date"];
        let b = [{m1: 2, m2: 3, m3: 4, m4: 8}, {c1: 2, c2: 3, c3: 4}, {a1: 'knn', a2: 3, a3: 4, a4: 19}];
        console.log('要转化的数据:\n', b)
        //item 数组的每一个对象、index 数组下标、arr 即数组b
        let c = b.map((item, index, arr) => {
            let obj = {};
            var mm1 = 0;
            for (let i in item) {
                if (mm1 < a.length){
                    obj[a[mm1]] = item[i];
                    mm1++;
                }else {
                    //如果不需要可以不写
                    obj[i] = item[i];
                }
            }
            return obj;
        });
        console.log('结果:\n', c);
        // {code: 2, name: 3, date: 4, m4: 8}
        // {code: 2, name: 3, date: 4}
        // {code: 'knn', name: 3, date: 4, a4: 19}
        console.log('--------------------------------------');
  • 结果
    将数组b中的key替换成指定a = [“code”, “name”, “date”]的key
  • 在这里插入图片描述
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10280.html
标签
评论
发布的文章

npmjs官网(查询依赖包)

2024-06-07 00:06:56

npx使用及原理

2024-06-07 00:06:36

npm 包管理工具

2024-06-07 00:06:33

vue 思极地图开发

2024-06-07 00:06:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!